HTML moderno: estrutura, semântica e acessibilidade
Atributos globais aparecem na maioria dos elementos HTML, mas isso não significa que todos sejam úteis em qualquer contexto. Eles ajudam a identificar, classificar, internacionalizar e controlar estados. Use-os com propósito e respeite o comportamento nativo.
Identidade, classes e dados
id deve ser único no documento e serve para fragmentos, rótulos e APIs. class agrupa elementos para estilo ou comportamento. data-* guarda dados privados da aplicação; não armazene informações sensíveis nem substitua atributos semânticos existentes.
<section id="precos" class="painel" data-plano="pro">n ...n</section>Idioma e direção
lang permite pronúncia e regras linguísticas corretas. Defina-o em html e sobrescreva em trechos de outro idioma. dir controla direção quando necessário; para texto de origem desconhecida, dir="auto" pode ser útil.
<p>O termo <span lang="en">design system</span> aparece em inglês.</p>Foco, edição e visibilidade
Evite valores positivos de tabindex, pois criam uma ordem artificial difícil de manter. tabindex="-1" permite foco programático sem inserir o elemento na sequência. hidden remove o conteúdo da apresentação; não o use quando a informação precisa continuar disponível a leitores de tela. contenteditable exige gestão cuidadosa de foco, colagem e salvamento.
Checklist de qualidade
- Todos os ids são únicos?
- O idioma principal e as exceções estão identificados?
- A ordem de foco segue a ordem do documento?
Pratique agora
Crie uma seção com id navegável, classes reutilizáveis e um data-* lido por JavaScript. Teste um link de fragmento apontando para ela.
Uma resposta