HTML moderno: estrutura, semântica e acessibilidade
Esta referência substitui a antiga comparação entre “tags HTML5 e XHTML 1.1”. Para projetos web atuais, consulte o HTML Living Standard e escolha elementos conforme o significado. XHTML 1.1 é relevante apenas para documentos servidos com sintaxe XML específica, não como recomendação geral para páginas HTML.
Estrutura do documento
html, head, title, meta, link e body formam a base. No conteúdo, use header, nav, main, article, section, aside e footer quando suas definições correspondem à região.
Conteúdo, mídia e dados
Para texto e agrupamento: h1–h6, p, ul, ol, dl, blockquote, figure e figcaption. Para mídia: img, picture, audio, video, track e iframe. Para dados tabulares: table, caption, thead, tbody, tr, th e td.
Formulários e interação
Use form, label, input, textarea, select, option, fieldset, legend e button. Para interação nativa, considere details/summary e dialog. Prefira elementos nativos a recriar controles com div e ARIA.
O que evitar
Elementos como font, center, marquee, frame e frameset são obsoletos. Não copie referências antigas sem verificar o status atual. Validadores ajudam a detectar erros, mas a escolha correta também exige entender o conteúdo e testar acessibilidade.
Checklist de qualidade
- Existe um elemento nativo que já oferece a semântica e interação necessárias?
- O elemento está conforme e não obsoleto?
- A página foi validada e testada por teclado?
Pratique agora
Revise uma página sua e substitua ao menos três contêineres genéricos por elementos semânticos adequados. Depois, valide novamente.
Respostas de 2