Estrutura HTML semântica para uma página

Código

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Título descritivo da página</title>
  <meta name="description" content="Explique em uma frase o que a pessoa encontrará nesta página.">
</head>
<body>
  <header>
    <a href="/" aria-label="Página inicial">Minha marca</a>
    <nav aria-label="Navegação principal">
      <a href="/servicos">Serviços</a>
      <a href="/contato">Contato</a>
    </nav>
  </header>

  <main>
    <article>
      <h1>Assunto principal da página</h1>
      <p>Apresente aqui a resposta ou proposta principal.</p>
    </article>
  </main>

  <footer>
    <p>&copy; 2026 Minha marca</p>
  </footer>
</body>
</html>

Quando usar

Use ao começar uma página institucional, landing page ou conteúdo editorial. A estrutura ajuda leitores de tela e mecanismos de busca a entenderem a função de cada bloco.

Como adaptar ao seu projeto

Troque o título, a descrição e os textos. Mantenha apenas um conteúdo principal por página e use títulos em ordem lógica, sem escolher o nível apenas pelo tamanho visual.

Antes de publicar

Semântica não substitui conteúdo de qualidade. Evite criar seções vazias ou repetir o mesmo título em vários níveis.

Códigos relacionados

HTML

Imagem responsiva com largura, altura e texto alternativo

Exemplo de imagem que se adapta à tela, reserva espaço no carregamento e oferece uma alternativa textual útil.

Git

.gitignore para um projeto web

Base conservadora que evita versionar dependências, segredos locais, logs e arquivos gerados.

JavaScript

Botão para copiar texto com Clipboard API

Função de cópia com retorno visual e alternativa para navegadores sem acesso à API moderna.