Atributos

Atributos dão informações extras aos elementos: idioma, endereço do link, texto alternativo da imagem, se o campo é obrigatório. No Belavista, cada atributo tem nome, valor e regra de escrita.

O exemplo deste capítulo é 06-atributos, no pacote que acompanha o volume. Leia → mude uma coisa → preveja → recarregue → confira.

O que você vai aprender

• Escrever atributos no formato nome="valor".
• Distinguir atributos globais (id, class, lang, title) dos específicos.
• Usar id único e class reutilizável.
• Conhecer atributos booleanos (required, disabled, hidden).
• Evitar aspas e espaços errados.

Anatomia

No elemento, atributos ficam na tag de abertura:

<a href="cartazes.html" class="nav-link" id="link-cartazes">Cartazes</a>

• href — específico de a.
• class e id — globais (quase todos os elementos).
• Valores entre aspas. Aspas duplas são o padrão deste volume.

Ordem dos atributos não muda o significado. Legibilidade sim: agrupe o que for parecido.

Globais que você vai usar muito

• id — identificador único na página. Âncoras (#agenda) e aria-labelledby dependem disso.
• class — rótulo reutilizável para CSS/JS. Vários elementos podem compartilhar a mesma classe.
• lang — idioma de um trecho diferente do documento.
• title — dica suplementar (não substitui texto visível nem alt).
• hidden — esconde o elemento até o CSS/JS decidir o contrário (com cuidado).

Booleanos

Alguns atributos são verdadeiros só por estarem presentes:

<input type="text" name="nome" required>
<button type="submit" disabled>Enviar</button>

required e disabled não precisam de ="true". Escrever required="required" funciona, mas a forma curta basta.

data-* e aria-*

Atributos data-* guardam dados customizados para scripts. aria-* reforçam acessibilidade quando o HTML nativo não basta. Nesta etapa, reconheça a existência; não invente ARIA para substituir HTML semântico.

Erro comum: repetir o mesmo id em dois elementos (“header” em todo canto). IDs duplicados quebram âncoras e rótulos. Classes repetem; ids, não.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Atributos — Belavista</title>
  </head>
  <body>
    <main>
      <h1 id="titulo-pagina">Ficha do cartaz</h1>
      <p class="lead" lang="pt-BR">Edição <span class="destaque">serigrafia</span> · Recife.</p>
      <p>
        <a class="botao" href="#inscricao" title="Ir para o formulário fictício">Quero a oficina</a>
      </p>
      <form id="inscricao" action="#" method="get">
        <label for="nome">Nome</label>
        <input id="nome" name="nome" type="text" required>
        <button type="submit">Reservar vaga (demo)</button>
      </form>
      <p hidden id="aviso-interno">Mensagem só para quem remover o atributo hidden.</p>
    </main>
  </body>
</html>

Mude o id do título e a âncora do link juntos. Preveja: o salto só funciona se os dois combinarem.

Aspas e espaços

class="botao primario" são duas classes. class="botao-primario" é uma. Espaço separa classes. Não deixe espaço em volta do = (href = "..." atrapalha leitores humanos e alguns parsers antigos — evite).

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Por que id deve ser único e class pode repetir?
2. O que significa um atributo booleano presente sem valor?
3. No exemplo, o que quebra se for do label não bater com id do input?

Respostas comentadas

1. id aponta para um nó específico (âncora, rótulo). class agrupa vários nós para o mesmo estilo ou comportamento.
2. O atributo está ativo (verdadeiro). Ausente, está inativo.
3. O rótulo deixa de associar ao campo: clicar no texto pode não focar o input; leitores de tela perdem a ligação clara.