HTML moderno: estrutura, semântica e acessibilidade
A sintaxe HTML é tolerante a muitos erros, mas isso não significa que qualquer marcação seja correta. Um documento previsível usa elementos bem aninhados, atributos válidos e uma estrutura que preserva o significado do conteúdo.
Tag não é o mesmo que elemento
Em <p>Olá</p>, as marcações de abertura e fechamento são tags; o conjunto completo é um elemento. A maioria dos elementos aceita conteúdo entre as tags, mas alguns são vazios, como <img>, <br>, <hr>, <input> e <meta>.
Aninhamento correto
O último elemento aberto deve ser o primeiro a fechar. Indentação não muda o significado para o navegador, mas torna a hierarquia visível para quem mantém o código.
<article>n <h2>Título do artigo</h2>n <p>Leia o <a href="/guia/">guia completo</a>.</p>n</article>Maiúsculas, comentários e parser
Em documentos HTML, nomes de tags não diferenciam maiúsculas de minúsculas, porém a convenção moderna é usar minúsculas. Comentários usam <!-- comentário --> e não devem guardar senhas, chaves ou informações privadas: eles continuam disponíveis no código-fonte entregue ao visitante.
Checklist de qualidade
- Feche os elementos na ordem inversa em que foram abertos.
- Use minúsculas e indentação consistente.
- Não adicione barra final a elementos vazios por hábito de XHTML; ela é desnecessária em HTML.
Pratique agora
Crie um artigo com título, dois parágrafos, um link e uma imagem. Valide a marcação e corrija todos os avisos que afetarem a estrutura.
