HTML Básico – Atributos

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.

Navegação

<< HTML Básico – ElementosHTML Básico – Cabeçalhos >>