Conteúdo
Os atributos definem características ou atributos adicionais de um elemento, como a largura e a altura de uma imagem. Os atributos são sempre especificados em uma tag de abertura, geralmente consistindo de pares nome/valor, como name=”value”.
Os valores dos atributos devem estar sempre entre aspas. Além disso, alguns elementos requerem alguns atributos. Por exemplo, a tag <img> deve conter o atributo src e alt. Vamos ver alguns exemplos de uso de atributos:
<img src="images/sorriso.png" width="30" height="30" alt="Sorriso">
<a href="https://www.google.com/" title="Motor de busca">Google</a>
<abbr title="Linguagem de marcação de hipertexto">HTML</abbr>
<input type="text" value="João Silva">No exemplo acima, o src dentro da tag <img> é um atributo e o caminho da imagem fornecido é seu valor. Da mesma forma, href, dentro da tag <a> está um atributo, o link fornecido é seu valor e assim por diante.
Dica: Aspas simples e duplas podem ser usadas para citar valores de atributo. No entanto, aspas duplas são mais comuns. Nos casos em que o próprio valor do atributo contém aspas duplas, o valor precisa ser colocado entre aspas simples, por exemplo, value=’John “Williams” Jr.’
Existem vários atributos em HTML5 que não contêm pares nome/valor, mas apenas nomes. Tais propriedades são chamadas de propriedades booleanas. Alguns exemplos de propriedades booleanas comumente usadas são verificadas, desabilitadas, somente leitura, obrigatórias, etc.
<input type="email" required>
<input type="submit" value="Enviar" disabled>
<input type="checkbox" checked>
<input type="text" value="Texto somente leitura" readonly>Nota: Os valores de propriedade geralmente não diferenciam maiúsculas de minúsculas, exceto para alguns valores de propriedade, como propriedades de classe ide. No entanto, o World Wide Web Consortium (W3C) em sua especificação recomenda letras minúsculas para valores de atributo.
Atributos de Uso Geral
Existem algumas propriedades como id, título, classe, estilo etc. Pode ser usado na maioria dos elementos HTML. A seção a seguir descreve sua finalidade.
O atributo id
O atributo id é usado para fornecer nomes ou identificadores exclusivos para elementos em um documento. Isso facilita a seleção de elementos usando CSS ou JavaScript.
<input type="text" id="firstName">
<div id="container">Algum conteúdo</div>
<p id="infoText">Este é um parágrafo.</p>Observação: o valor do id de um elemento deve ser exclusivo em um único documento. Dois elementos no mesmo documento não podem ser nomeados com o mesmo nome de id e cada elemento pode ter apenas um id.
O atributo de class
Assim como o atributo id, o atributo class é usado para identificar elementos. Mas, diferentemente de id, o atributo class não precisa ser exclusivo dentro de um documento. Isso significa que você pode aplicar a mesma classe a vários elementos em um documento, como no exemplo a seguir:
<input type="text" class="highlight">
<div class="box highlight">Alguns conteúdos</div>
<p class="highlight">Este é um parágrafo.</p>Dica: Como esta classe pode ser aplicada a vários elementos, todas as regras de estilo escritas nesta classe serão aplicadas a todos os elementos desta classe.
O atributo title
O atributo title é usado para fornecer um texto sugerido sobre o elemento ou seu conteúdo. Experimente o exemplo abaixo para ver como funciona.
<abbr title="World Wide Web Consortium">W3C</abbr>
<a href="images/kites.jpg" title="Clique para ver uma imagem maior">
<img src="images/kites-thumb.jpg" alt="kites">
</a>Dica: Quando o usuário coloca o cursor do mouse sobre um elemento, o valor do atributo title (ou seja, o texto do título) é exibido como uma dica de ferramenta pelo navegador da web.
O atributo de style
A propriedade style permite especificar regras de estilo CSS, como cores, fontes, bordas, etc. diretamente no elemento. Vejamos um exemplo para ver como funciona:
<p style="color: blue;">Este é um parágrafo.</p>
<img src="images/sky.jpg" style="width: 300px;" alt="Céu Nublado">
<div style="border: 1px solid red;">Algum conteúdo</div>As propriedades que discutimos acima também são conhecidas como propriedades globais.
Leia também: Editor gratuito de PHP, HTML, CSS, JavaScript – Codelobster IDE
