O que é HTML semântico?
HTML semântico significa escolher elementos que descrevam o que o conteúdo é, e não a sua aparência. Um <nav> é um bloco de navegação. Um <article> é um conteúdo autocontido. Um <button> executa uma ação. Esses elementos carregam significados que navegadores, tecnologias assistivas e motores de busca podem processar.
A alternativa é uma página construída com elementos genéricos <div> e <span>, frequentemente chamada de “div soup”. Ela pode parecer idêntica na tela, mas é opaca para um leitor de tela e mais difícil de manter. A semântica não custa nada e traz benefícios em todos os lugares.
Landmarks
Elementos de landmark definem as principais regiões de uma página e permitem que os usuários pulem entre elas.
<!-- layout.html -->
<body>
<header>
<a href="/">hackweb</a>
<nav aria-label="Main">
<a href="/guides">Guides</a>
</nav>
</header>
<main>
<h1>Guides</h1>
</main>
<footer>
<p>© 2026 hackweb.dev</p>
</footer>
</body>- header — conteúdo introdutório da página ou de uma seção.
- nav — um bloco de links de navegação. Rotule navs repetidos com
aria-label. - main — o conteúdo principal, usado apenas uma vez e ignorado por leitores de tela.
- aside — conteúdo relacionado tangencialmente ao conteúdo principal.
- footer — conteúdo de encerramento, como copyright ou links relacionados.
Usuários de leitores de tela podem listar e pular entre landmarks, o que transforma uma página longa em uma estrutura navegável.
Cabeçalhos
Os cabeçalhos formam a estrutura da página. Use um único <h1> para o tópico principal, depois <h2> e <h3> para seções e subseções.
<!-- outline.html -->
<h1>CSS Grid</h1>
<h2>Tracks and lines</h2>
<h3>Defining columns</h3>
<h3>Placing items</h3>
<h2>Responsive grids</h2>Nunca escolha o nível de um cabeçalho com base no seu tamanho. Use CSS para a aparência e cabeçalhos para a estrutura. Pular níveis, como saltar do h1 para o h4, torna a estrutura confusa para tecnologias assistivas.
Elementos de conteúdo
Além dos landmarks, o HTML possui elementos para tipos específicos de conteúdo.
- article — conteúdo autossuficiente que poderia existir de forma independente, como um post ou comentário.
- section — um grupo temático, geralmente com um título.
- figure e figcaption — mídia com uma legenda.
- blockquote e cite — uma citação e sua fonte.
- time — uma data ou hora com um
datetimelegível por máquina. - address — informações de contato.
- ul, ol, dl — listas não ordenadas, ordenadas e de descrição.
<!-- post.html -->
<article>
<h1>What is DNS?</h1>
<p><time datetime="2026-09-15">September 15, 2026</time></p>
<figure>
<img src="/dns.svg" alt="A DNS lookup walks the name hierarchy" width="800" height="400" />
<figcaption>Resolving a name step by step.</figcaption>
</figure>
<blockquote cite="https://example.com">
<p>DNS is the internet's phone book.</p>
</blockquote>
</article>Usar o elemento correto significa que você obtém o comportamento padrão e o significado adequados, sem esforço extra.
Links versus botões
Este é o erro semântico mais comum.
- Use
<a href>para navegação para uma URL. Ele suporta clique com o botão direito, abrir em nova aba, favoritos e ativação via teclado. - Use
<button>para ações que alteram o estado ou enviam dados. Ele é focável, operável via teclado e anunciado como um botão.
<!-- controls.html -->
<a href="/guides/css">Read the CSS guide</a>
<button type="button" onclick="toggleMenu()">Toggle menu</button>Um <div onclick="..."> parece clicável, mas não é acessível via teclado, não é anunciado como um controle e não é focável. Corrigi-lo exige recriar tudo o que o botão já oferece nativamente.
Formulários e tabelas
Formulários possuem sua própria semântica: <form>, <label>, <fieldset>, <legend>, <input>, <select> e <textarea>. Todo input deve ter um label, e agrupar controles relacionados com fieldset e legend ajuda a todos. O guia de Formulários & Validação aprofunda esse assunto.
Tabelas servem para dados tabulares, não para layout. Use <table>, <thead>, <tbody>, <th> com scope e <caption> para que a relação entre as células e os cabeçalhos fique clara.
Quando uma div é aceitável
Elementos genéricos não são um pecado. Use <div> e <span> quando você genuinamente precisar de um container para estilização ou layout sem significado semântico. A regra é simples: opte por um elemento semântico quando houver um disponível, e use uma div quando nenhum se encaixar. Adicionar section sem um título ou nav em volta de um único link não relacionado adiciona ruído em vez de significado.
Melhores práticas
- Use apenas um
h1e mantenha os níveis de cabeçalho em ordem. - Estruture as páginas com header, nav, main e footer.
- Use article e section para o conteúdo, não div.
- Prefira button para ações e anchors para navegação.
- Forneça um texto
altsignificativo para cada imagem, oualt=""se for decorativa. - Rotule os controles de formulário e agrupe os que forem relacionados.
- Valide seu HTML para que o parser não precise realizar recuperações.
Erros comuns
- Construir tudo usando divs e spans.
- Usar uma div com onclick em vez de um button.
- Escolher os níveis de heading com base no tamanho da fonte.
- Múltiplos elementos h1 sem um tópico principal claro.
- Usar tabelas para layout.
- Envolver links únicos em um nav, ou usar section sem um heading.
Próximos passos
A semântica é a base de uma página acessível e fácil de encontrar. Aprofunde seus conhecimentos com o básico de HTML, torne-a inclusiva com o guia de Acessibilidade, dê suporte com o básico de SEO e complete o aprendizado com Formulários e Validação.