Agora que já entendemos um pouco sobre os elementos HTML, chegou a hora de falar um pouco sobre os atributos.
A primeira coisa que você precisa saber é que os atributos servem para definir características ou propriedades ao elemento, como largura, altura ou a localização de uma imagem.
Lembra que falamos sobre as tags de abertura e falamos também sobre tags vazias?
Então, os atributos vão sempre nessas tags, ou seja, nunca vamos colocar atributos nas tags de fechamento.
Outro detalhe importante é que os atributos geralmente são definidos por um nome e um valor (nome="valor") que deve ser colocado entre aspas.
Enquanto há tags que não precisam de nenhum atributo para funcionar, outras exigem que sejam definidos alguns atributos.
Por exemplo, é o caso da tag de imagem <img> que deve conter pelo menos os atributos src e alt.
Aqui estão alguns elementos com seus atributos:
<img src="images/nomedaimagem.png" width="30" height="30" alt="Identificação Qualquer">
<a href="https://www.google.com/" title="Vá para o Google">Google</a>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<input type="text" name="nome" value="João da Silva">É interessante notar que as páginas web podem carregar elementos, as vezes usando o atributo src(source), e linkar usando o atributo hrefdentro da tag <a>.
Você pode usar aspas simples ou duplas para definir atributos, mas o padrão é usar duplas. Em casos onde o atributo possa ter aspas, use aspas simples – Por Exemplo: value=’João “Jr” da Silva’
Se você prestou atenção, eu disse que os atributos geralmente possuem nome e valor, mas há atributos que possuem apenas um nome, tendo um valor intrínseco.
Portanto, esses atributos são chamados de booleanos – Ou seja, se estão presentes passam um valor “true” (verdadeiro).
Os principais atributos booleanos são checked, disabled, readonly, required, etc – Vale notar que são termos em inglês bem associativos.
Então, aqui estão alguns exemplos desses tipos de atributos:
<input type="email" required>
<input type="submit" value="Enviar" disabled>
<input type="checkbox" checked>
<input type="text" value="Somente leitura" readonly>Não se preocupe em memorizar todos e também falaremos mais sobre atributos nos próximos conteúdos.
Os valores dos atributos não distinguem maiúsculas e minúsculas mas, por padronização (W3C), recomenda-se usar minúsculas. Vale dizer que existem poucas exceções, como é o caso dos valores para o atributo `class`.
Atributos de uso geral
Existem certos atributos que são meio que universais, podem ser usados na maioria dos elementos HTML, como vou te mostrar agora.
O atributo id
O atributo id, de forma bem óbvia, é um identificador (geralmente exclusivo) para um elemento em um documento HTML.
Esse atributo é muito utilizado para seleção de elementos quando usamos CSS ou JavaScript.
Aqui estão uns exemplos:
<input type="text" id="nome">
<div id="conteudo">Algum conteúdo aqui</div>
<p id="info">Isso é um parágrafo.</p>É importante dizer que o correto é esse id ser exclusivo, ou seja, não se deve ter mais de um elemento com o mesmo id.
O atributo class
Assim como vimos no atributo id, o class geralmente é usado para identificar um elemento, com a principal diferença de não precisar ser exclusivo.
Portanto, você pode definir um atributo de classe para selecionar ou “agrupar” vários elementos em um documento HTML, como a seguir:
<input type="text" class="highlight">
<div class="box highlight">Conteúdo em texto</div>
<p class="highlight">Um parágrafo de texto.</p>Como o class não é um atributo exclusivo, podemos usá-lo, por exemplo, para aplicar um estilo a todos os elementos que possuem a mesma classe, como a cor do texto.
O atributo title
Como o próprio nome indica, ele é usado para fornecer um texto consultivo, ou seja, quando você passa o cursor em cima do elemento com title seu valor é mostrado.
Aqui estão alguns exemplos:
<abbr title="World Wide Web Consortium">W3C</abbr>
<a href="cursos/curso-html-5.html" title="Clique para acessar o curso">
<img src="imagens/html-5.jpg" alt="HTML5">
</a>O atributo style
Esse atributo é interessante porque permite que você defina estilos CSS diretamente no elemento HTML.
Aqui estão exemplos de uso:
<p style="color: blue;">Esse texto vai ficar azul!</p>
<img src="imagens/sky.jpg" style="width: 300px;" alt="Imagem de Núvens com 300px de largura">
<div style="border: 1px solid red;">Conteúdo com uma borda vermelha</div>Vamos aprender bastante sobre atributos e sobre estilização de elementos HTML nas próximas aulas.
Então, acabamos de ver alguns atributos globais, se você quiser conhecer outros, verifique a Referência de Atributos Globais.
Para ver a lista completa das tags/elementos HTML, veja a Referência de Tags HTML5.
