HTML moderno: estrutura, semântica e acessibilidade
HTML é a linguagem de marcação que dá significado e estrutura ao conteúdo de uma página. O navegador interpreta seus elementos para formar uma árvore do documento; CSS cuida da apresentação e JavaScript adiciona comportamento. Hoje o HTML é mantido como um Living Standard, portanto a referência correta é a especificação atual, não uma “versão final” isolada.
HTML descreve significado
Elementos como <nav>, <main>, <article> e <button> comunicam o papel de cada parte do conteúdo. Essa informação ajuda navegadores, mecanismos de busca e tecnologias assistivas. Escolha elementos pela função, não pela aparência.
Uma <div> é um contêiner neutro. Ela continua útil para agrupamento e layout, mas não deve substituir um elemento semântico que já representa a intenção correta.
A base de um documento
Todo documento começa com o doctype moderno, define o idioma da página e separa metadados do conteúdo visível.
<!doctype html>n<html lang="pt-BR">n<head>n <meta charset="utf-8">n <meta name="viewport" content="width=device-width, initial-scale=1">n <title>Minha primeira página</title>n</head>n<body>n <header>...</header>n <main>...</main>n <footer>...</footer>n</body>n</html>Pense em conteúdo antes do visual
Uma boa sequência é: definir a hierarquia da informação, marcar cada trecho com o elemento adequado, testar navegação por teclado e leitor de tela e só então construir a camada visual. O resultado tende a ser mais robusto, fácil de manter e adaptável a diferentes telas.
Checklist de qualidade
- Use um único propósito principal por página.
- Defina
lang="pt-BR"quando o conteúdo estiver em português brasileiro. - Não use tags apenas para produzir tamanho, cor ou espaçamento.
Pratique agora
Crie uma página simples com cabeçalho, navegação, conteúdo principal, um artigo e rodapé. Abra-a sem CSS e confirme se a estrutura ainda faz sentido.
