Atributos Globais HTML

Atributos globais são atributos que podem ser adicionados a qualquer elemento HTML. Ao contrário dos atributos específicos de elemento — como href (somente em <a>), src (somente em <img>), ou colspan (somente em células de tabela) — os atributos globais fazem parte do vocabulário compartilhado que toda tag compreende.

É isso que os torna tão importantes: em vez de aprender um atributo diferente para cada elemento, você aprende um conjunto de atributos globais e o reutiliza em todo lugar. Você vai usar class e id para conectar elementos ao CSS e ao JavaScript, data-* para anexar seus próprios dados personalizados, tabindex para controlar o foco do teclado, lang e dir para tornar o conteúdo acessível em qualquer idioma, e hidden, title ou contenteditable para comportamentos comuns de interface.

Um atributo global ser válido em um elemento não significa que ele sempre terá um efeito visível. Por exemplo, spellcheck não altera o comportamento ou a semântica de um parágrafo, e lang não tem efeito em um elemento sem conteúdo de texto. Isso é normal — eles são permitidos em todo lugar; simplesmente não fazem nada quando não há nada sobre o que agir.

Você pode encontrar todos os atributos globais e suas explicações na tabela de referência abaixo, seguida de análises mais detalhadas dos que você usará com mais frequência.

O atributo id

id atribui um nome único a um elemento na página. É a âncora que conecta o HTML ao restante da plataforma: o CSS pode direcioná-lo com #name, o JavaScript pode obtê-lo com document.getElementById(), um label pode apontar um controle de formulário para ele com for, e um link pode pular diretamente até ele.

<h2 id="install">Installation</h2>

<!-- Clicking this link scrolls to the heading above -->
<a href="#install">Jump to Installation</a>

O valor deve ser único dentro do documento e não conter espaços. ids duplicados são inválidos e fazem com que getElementById() retorne apenas a primeira correspondência. Saiba mais no capítulo do atributo id e veja os links âncora em Links HTML.

O atributo class

Enquanto id é para um único elemento, class é para grupos de elementos que compartilham estilos ou comportamento. Um elemento pode ter várias classes separadas por espaços, e a mesma classe pode ser reutilizada em quantos elementos você quiser.

<button class="btn btn-primary">Save</button>
<button class="btn btn-secondary">Cancel</button>

Ambos os botões compartilham a classe btn (estilos comuns) e adicionam mais uma classe para sua variante. Esta é a base de como o CSS é aplicado — veja Seletores CSS e CSS id e class.

Atributos personalizados data-*

data-* permite anexar seus próprios dados privados a um elemento sem inventar atributos não padronizados. Qualquer atributo cujo nome comece com data- é válido e é ignorado pela renderização do navegador — ele existe puramente para seus scripts.

<button id="cart" data-product-id="42" data-price="19.99">
  Add to cart
</button>

<script>
  const btn = document.getElementById("cart");

  // A "data-foo-bar" attribute is read as element.dataset.fooBar
  console.log(btn.dataset.productId); // "42"
  console.log(btn.dataset.price);     // "19.99"
</script>

Note a regra de nomenclatura: o atributo data-product-id se torna dataset.productId em JavaScript — o prefixo data- é removido e cada segmento hifenizado se torna camelCase. Os valores são sempre strings, então converta-os (Number(btn.dataset.price)) quando precisar de um número.

O atributo tabindex

tabindex controla se um elemento pode receber foco pelo teclado e em que ordem a tecla Tab o alcança. Há três casos significativos:

• tabindex="0" — adiciona o elemento à ordem de tabulação natural, na posição determinada por seu lugar no documento. Use isso para tornar um elemento normalmente não focalizável (como um <div> que você transformou em um widget personalizado) acessível pelo teclado.
• tabindex="-1" — remove o elemento da ordem de tabulação, mas ainda permite focalizá-lo com JavaScript via element.focus(). Útil para mover o foco para uma região (por exemplo, um diálogo ou um resumo de erros) sem colocá-lo na sequência Tab.
• Um valor positivo (tabindex="1" e acima) — força o elemento para a frente da ordem de tabulação, à frente de tudo com tabindex="0" ou sem tabindex. Isso é um antipadrão: substitui a ordem de leitura natural e quase sempre confunde usuários de teclado. Evite-o.

<!-- Reachable by keyboard, in normal order -->
<div tabindex="0" role="button">Custom button</div>

<!-- Focusable by script only, skipped by Tab -->
<div id="dialog" tabindex="-1">Dialog content</div>

A regra de acessibilidade: deixe a ordem do DOM guiar a ordem de tabulação. Use 0 e -1 deliberadamente, e reserve valores positivos para nunca.

O atributo contenteditable

contenteditable="true" torna o conteúdo de um elemento diretamente editável pelo usuário, transformando uma <div> simples em uma superfície básica de texto rico. contenteditable="false" (o padrão) mantém-o somente leitura.

<div contenteditable="true">
  Click here and start typing — this text is editable.
</div>

É o bloco de construção por trás de editores na página e campos de notas inline. Como o usuário pode alterar o DOM, leia o texto atual em JavaScript com textContent ou innerHTML do elemento quando precisar salvá-lo.

Os atributos lang e dir (internacionalização)

lang declara o idioma do conteúdo de um elemento usando um código de idioma como en, fr ou ar. Definir lang no elemento <html> é essencial para acessibilidade: leitores de tela o usam para escolher a pronúncia e a voz correta, e mecanismos de busca e ferramentas de tradução o usam para identificar o idioma.

dir define a direção base do texto — ltr (da esquerda para a direita, o padrão), rtl (da direita para a esquerda, para idiomas como árabe e hebraico), ou auto (deixa o navegador inferir a partir do conteúdo).

<html lang="en">
  <body>
    <p>This paragraph reads left to right.</p>

    <!-- An Arabic phrase that reads right to left -->
    <p lang="ar" dir="rtl">مرحبا بكم في عالم البرمجة</p>
  </body>
</html>

Para detalhes de layout da direita para a esquerda, veja a propriedade CSS direction. Sempre defina lang em <html>, e adicione-o novamente em qualquer conteúdo inline que mude de idioma — acertar isso é uma das melhorias de acessibilidade mais simples e de maior impacto em uma página.

Notas de acessibilidade

Alguns atributos globais têm efeito direto em tecnologias assistivas, portanto use-os com cuidado:

• lang — necessário para que os leitores de tela leiam o conteúdo no idioma e sotaque corretos. Defina-o em <html> e em qualquer elemento cujo idioma difira da página.
• dir — garante que idiomas da direita para a esquerda sejam exibidos e navegados corretamente. Combine-o com lang para conteúdo RTL.
• tabindex — valores positivos quebram a ordem de foco esperada para usuários de teclado e leitores de tela; use apenas 0 e -1.
• accesskey — seus atalhos de teclado frequentemente entram em conflito com os atalhos de navegadores e tecnologias assistivas, portanto a tecla escolhida pode não funcionar para todos. Trate-o como uma conveniência, nunca como a única forma de alcançar um recurso.

Resumo

Um conjunto de atributos globais vale a pena conhecer profundamente porque você os usará constantemente: id, class, data-*, tabindex e o par de i18n lang / dir. Os demais — title, hidden, contenteditable, draggable, spellcheck, translate, style, accesskey — são úteis para reconhecer e consultar na tabela acima quando a situação exigir. E evite completamente os atributos removidos (contextmenu, dropzone); eles não fazem mais parte do HTML.

Prática