Pular para o conteúdo
→ primo-academy
☰ Aulas · HTML · 0/18
Recomendado: essencial

Atributos Globais: O Que Vale Para Qualquer Tag

A maioria dos atributos que você viu até aqui é específica de uma tag: src em <img>, href em <a>, type em <input>. Mas existe um conjunto que funciona em qualquer tag HTML — os atributos globais. São pequenos ajustes que valem para quase tudo.

<p id="aviso" class="destaque" hidden>Você não me vê.</p>

<button data-id="42" data-action="comprar" tabindex="1">
  Comprar
</button>

<p lang="en-us">Hello, world!</p>

Vamos aos mais úteis:

  • id — identificador único na página. Já vimos no link âncora (#id). Use para conectar labels, ancorar links, identificar elementos via JS. Nunca repita o mesmo id na página.

  • class — agrupa elementos para estilizar com CSS ou selecionar com JS. Pode repetir (vários elementos compartilham a mesma classe).

  • hidden — esconde o elemento. Semântica: "isto não é relevante agora". Diferente de display: none do CSS em alguns detalhes (anuncia mudança para leitor de tela). Use-o em vez de style="display: none" quando puder.

  • data-* — você cria o atributo. data-id, data-user-id, data-qualquer-coisa. É o canal oficial para guardar dados extras no HTML sem inventar atributo não-padrão. JS lê com elemento.dataset.id (transforma data-id em .id).

  • tabindex — controla a ordem do foco com Tab.

    • tabindex="0" — entra no fluxo de Tab na ordem natural.
    • tabindex="-1" — removido do fluxo (só foca via JS).
    • tabindex="1" (ou maior) — força foco antes de elementos com tabindex menor. Evite valores positivos — bagunça a ordem natural e confunde quem navega por teclado.

  • lang — idioma do conteúdo deste elemento (sobrescreve o <html lang>). Essencial para conteúdo multilíngue na mesma página:

    <p>Hoje eu quero dizer <span lang="en">"I love you"</span> em inglês.</p>

  • title — tooltip nativo ao passar o mouse. Use com moderação: leitores de tela nem sempre leem, e muita info importante aqui é uma armadilha de acessibilidade.

  • style — CSS inline. Funciona em qualquer tag, mas evite: misturar estilo com estrutura dificulta manutenção. Prefira arquivo .css.

  • contenteditable="true" — torna o conteúdo editável no navegador. É como o Google Docs faz. Raramente usado por iniciantes, mas é bom saber que existe.

  • draggable="true" — permite arrastar o elemento. Combinado com a API de drag-and-drop do JavaScript.

  • spellcheck="false" — desabilita o sublinhado de erro ortográfico em <input> e <textarea>. Útil em campos de slug, código, etc.

  • translate — dica para ferramentas de tradução automática ("yes" ou "no"). Pouco usado, mas existe.

  • dir — direção do texto: ltr (esquerda→direita, padrão) ou rtl (direita→esquerda, para árabe, hebraico, persa). Veremos mais no nó de i18n.

E o atributo que não é exatamente um atributo, mas vive com eles:

  • role — faz parte da ARIA (Accessible Rich Internet Applications). Diz a leitores de tela que papel o elemento tem. Usado quando o HTML semântico não basta (ex: <div role="alert"> para anunciar dinamicamente uma mensagem). Veremos mais no nó de acessibilidade.

  • hidden esconde semântica (anuncia para leitor de tela).

  • data-* é o canal oficial para dados extras.

  • tabindex controla a ordem do foco com Tab.

  • lang pode ir em qualquer elemento, não só no <html>.

  • title, style, contenteditable, draggable, spellcheck completam o kit.

Dica: a maioria dos atributos globais pode ser lida ou modificada com JavaScript. elemento.id, elemento.classList, elemento.dataset.*, elemento.hidden = true — tudo direto, sem getAttribute (que também funciona, mas é mais verboso).

No próximo nó, vamos olhar i18n básico — HTML para conteúdo em vários idiomas na mesma página.

// recursos

← Voltar para HTML