HTML: Referência de Atributos Globais HTML
Atributos globais são propriedades que podem ser usadas em todas as tags HTML. Eles definem a identidade, o estilo, o comportamento, o idioma e os métodos de interação de um elemento.
1. O Que São Atributos Globais
Atributos globais são atributos universais definidos na especificação HTML que podem ser aplicados a qualquer elemento HTML (incluindo elementos raiz como <html>, <head> e <body>). Eles fornecem controle semântico e comportamental consistente em todas as tags. Entender e usar atributos globais com proficiência é fundamental para escrever HTML semântico, acessível e de fácil manutenção.
2. Atributos Globais Mais Usados
Os quatro atributos globais a seguir são os mais usados no desenvolvimento diário:
id— Um identificador único para um elemento, não deve ser duplicado na mesma página. Usado para seletores CSS,getElementById()do JavaScript e links âncora.class— Uma lista de nomes de classes separados por espaço, usada para seletores CSS e JavaScript. Um elemento pode ter múltiplas classes.style— Estilos CSS inline escritos diretamente na tag. Tem prioridade maior que folhas de estilo externas.title— Texto de dica exibido ao passar o mouse. Especialmente útil para<abbr>,<iframe>e elementos similares.
▶ Exemplo
HTML
<!-- id — identificador único -->
<div id="cabecalho">Cabeçalho do Site</div>
<!-- class — nomes de classes -->
<p class="destaque importante">Este texto tem os estilos destaque e importante aplicados</p>
<!-- style — estilos inline -->
<span style="color: red; font-weight: bold;">Texto em negrito vermelho</span>
<!-- title — dica ao passar o mouse -->
<abbr title="HyperText Markup Language">HTML</abbr> é uma linguagem de marcação web.
3. Idioma e Direção
Esses dois atributos são críticos para declarar o idioma e a direção de leitura do conteúdo da página, e são muito importantes para SEO e acessibilidade:
lang— Declara o idioma do conteúdo do elemento, ex.:lang="en"(inglês),lang="pt-br"(português brasileiro)dir— Direção do texto:ltr(esquerda para direita, padrão),rtl(direita para esquerda, para árabe/hebraico)
▶ Exemplo
HTML
<!-- Declara o idioma principal da página como português brasileiro -->
<html lang="pt-br">
<!-- Texto do corpo em português -->
<p lang="pt-br">Bem-vindo ao nosso site!</p>
<!-- Texto em árabe, da direita para a esquerda -->
<p dir="rtl" lang="ar">مرحبا بالعالم</p>
ℹ️ Nota: O atributo
lang é crucial para SEO (os mecanismos de busca podem identificar com precisão o idioma do conteúdo) e para leitores de tela (que selecionam o mecanismo correto de síntese de voz). Torne um hábito definir lang na tag <html>.
4. Atributos de Dados (data-*)
O atributo data-* permite armazenar dados personalizados em elementos HTML, que o JavaScript pode ler via API dataset. Note que * deve começar com uma letra minúscula e não pode conter letras maiúsculas:
HTML
<!-- Use data-* para armazenar informações do produto -->
<div class="produto" data-id="1001" data-name="Mouse Sem Fio" data-price="99.00" data-stock="true">
<h3>Mouse Sem Fio</h3>
<p>Preço: R$ 99,00</p>
<button onclick="adicionarAoCarrinho(this)">Adicionar ao Carrinho</button>
</div>
<script>
function adicionarAoCarrinho(btn) {
const produto = btn.closest('.produto');
const id = produto.dataset.id;
const name = produto.dataset.name;
const price = produto.dataset.price;
console.log('Adicionado ao carrinho:', id, name, price);
alert(`"${name}" adicionado ao carrinho, preço: R$ ${price}`);
}
</script>
5. Atributos Interativos
Esses atributos controlam a visibilidade do elemento, a ordem de foco e o comportamento de edição:
hidden— Oculta um elemento (equivalente adisplay: none), o elemento não ocupa espaçotabindex— Ordem de navegação por tecla Tab:tabindex="0"foca na ordem do documento,-1torna não focalizávelcontenteditable— Torna o conteúdo do elemento editável; defina comotruepara ativarspellcheck— Ativa ou desativa a verificação ortográfica:true/false
▶ Exemplo
HTML
<!-- hidden — oculta informações invisíveis -->
<div hidden>Esta mensagem não é visível para os usuários</div>
<!-- tabindex controla a ordem de foco -->
<input type="text" tabindex="2" placeholder="Focado em segundo">
<input type="text" tabindex="1" placeholder="Focado em primeiro">
<!-- contenteditable ativa edição na página -->
<div contenteditable="true" style="border:1px solid #ccc; padding:10px; border-radius:4px;">
Este texto pode ser editado diretamente no navegador!
</div>
<!-- spellcheck — verificação ortográfica -->
<textarea spellcheck="true" placeholder="O texto em português será verificado ortograficamente"></textarea>
6. Outros Atributos Globais
Aqui estão mais atributos globais úteis:
| Atributo | Descrição | Exemplo |
|---|---|---|
accesskey |
Atalho de teclado para ativar ou focar um elemento | accesskey="s" (pressione Alt+S para focar) |
draggable |
Se um elemento é arrastável, funciona com a API Drag & Drop | draggable="true" |
autofocus |
Foco automático ao carregar a página (para <input>, <textarea>, <button> e outros elementos de formulário) |
autofocus |
translate |
Controla se o conteúdo do elemento pode ser traduzido (yes / no) |
translate="no" |
slot |
Usado com elementos <slot> de Web Components |
slot="cabecalho" |
is |
Especifica um elemento interno personalizado | is="x-foo" |
itemscope / itemprop / itemtype |
Microdados para marcação de dados estruturados | itemscope itemtype="https://schema.org/Product" |
❓ Perguntas Frequentes
P Qual é a diferença entre
id e class? Quando uso cada um?R
id é como um RG — cada página pode ter apenas um elemento com um determinado id, sendo único. class é como um nome de turma — múltiplos elementos podem compartilhar o mesmo class, sendo reutilizável. Na prática, use class em 90% dos casos porque reutilização de estilo é a norma. id tem maior especificidade CSS, mas não abuse apenas pela prioridade. Lembre-se：id para mirar com JavaScript, class para estilizar com CSS.P O que é
data-* e como leio?R
data-* armazena dados personalizados em elementos HTML. Exemplo：<div data-user-id="123" data-role="admin">. Leitura：JavaScript acessa via element.dataset.userId (converte hífens para camelCase automaticamente). Usos comuns：armazenar IDs de usuário, informações de produto, parâmetros de configuração. Nota：data-* é apenas para dados relacionados à exibição — nunca armazene informações sensíveis aqui (são visíveis no código-fonte).P O que é
contenteditable?R
contenteditable="true" torna o conteúdo do elemento diretamente editável pelo usuário — clique e digite, como um editor de texto rico. Usos comuns：notas online, tabelas editáveis, comentários instantâneos. Com document, você pode adicionar funcionalidades como negrito, itálico e outras formatações. Nota：isso é apenas efeito front-end — o conteúdo editado não é salvo automaticamente no servidor; você precisa de JavaScript para enviar.P Qual é a diferença entre
hidden e display:none?R Ambos ocultam elementos, mas diferem：1）
hidden é um atributo HTML5 padrão com semântica clara — "este elemento não deveria ser visível agora"; 2）display:none é estilização CSS — apenas oculta visualmente; 3）hidden tem prioridade sobre display:none — mesmo com display:block definido, elementos hidden permanecem invisíveis. Recomendação：use hidden para estado de visibilidade do elemento, display:none para necessidades de estilo.📖 Resumo
- Atributos globais podem ser usados em todos os elementos HTML
idpara identificação única,classpara agrupamento de estilos,stylepara estilos inline,titlepara dicas ao passar o mouselangdeclara o idioma,dircontrola a direção do textodata-*armazena dados personalizados, lidos via APIdatasethiddenoculta elementos,tabindexdefine a ordem de Tab,contenteditableativa edição de conteúdoaccesskeypara atalhos de teclado,draggablepara arrastar e soltar,autofocuspara foco automático
📝 Exercícios
- Vitrine de Produtos: Crie cards de produto usando
data-*para armazenar o id, nome, preço e status de estoque de cada produto. Exiba as informações do produto em um popup quando um botão for clicado. Inclua pelo menos 3 cards de produto. - Editor de Tarefas: Use
contenteditable="true"para criar uma área de edição de tarefas simples, e use o atributohiddenpara alternar a funcionalidade "mostrar/ocultar painel do editor". Defina uma ordem lógica de foco por Tab usandotabindex.
