HTML semântico usa elementos que descrevem claramente seu significado e propósito, não apenas sua aparência. Isso ajuda tecnologias assistivas a entender e navegar pelo conteúdo.
Use a hierarquia de cabeçalhos corretamente:
<h1>Título Principal da Página</h1>
<h2>Seção Principal</h2>
<h3>Subseção</h3>
<h4>Sub-subseção</h4>
Boas práticas:
<h1> por página<nav aria-label="Navegação principal">
<ul>
<li><a href="/">Início</a></li>
<li><a href="/sobre">Sobre</a></li>
<li><a href="/contato">Contato</a></li>
</ul>
</nav>
<main>
<article>
<header>
<h1>Título do Artigo</h1>
<p>Por Autor, em Data</p>
</header>
<section>
<h2>Introdução</h2>
<p>Conteúdo...</p>
</section>
</article>
<aside>
<h2>Conteúdo Relacionado</h2>
<!-- Conteúdo lateral -->
</aside>
</main>
Use listas para grupos de itens relacionados:
<!-- Lista não ordenada para navegação -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<!-- Lista ordenada para sequências -->
<ol>
<li>Primeiro passo</li>
<li>Segundo passo</li>
</ol>
<!-- Lista de definição para termos -->
<dl>
<dt>Termo</dt>
<dd>Definição do termo</dd>
</dl>
<!-- Ênfase (itálico) -->
<em>Texto enfatizado</em>
<!-- Importância forte (negrito) -->
<strong>Texto importante</strong>
<!-- Marcação (destaque) -->
<mark>Texto destacado</mark>
<!-- Citação -->
<blockquote cite="fonte">
<p>Citação longa</p>
</blockquote>
<q cite="fonte">Citação curta</q>
<!-- Código inline -->
Use <code>console.log()</code> para debugar.
<!-- Bloco de código -->
<pre><code>
function exemplo() {
return true;
}
</code></pre>
<!-- Dados/valores -->
<data value="123">Cento e vinte e três</data>
<time datetime="2024-01-15">15 de janeiro de 2024</time>
Use elementos de landmark para criar estrutura clara:
<body>
<header>
<!-- Cabeçalho do site -->
</header>
<nav>
<!-- Navegação principal -->
</nav>
<main>
<!-- Conteúdo principal -->
</main>
<aside>
<!-- Conteúdo complementar -->
</aside>
<footer>
<!-- Rodapé -->
</footer>
</body>
Quando elementos semânticos não são suficientes:
<!-- Região com nome descritivo -->
<div role="region" aria-label="Estatísticas">
<!-- Conteúdo -->
</div>
<!-- Seção com propósito específico -->
<section aria-labelledby="titulo-secao">
<h2 id="titulo-secao">Título da Seção</h2>
</section>
Prefira elementos HTML semânticos sobre divs genéricas:
<!-- ❌ Ruim -->
<div class="button">Clique aqui</div>
<!-- ✅ Bom -->
<button>Clique aqui</button>
Mantenha uma hierarquia clara e lógica:
<!-- ❌ Ruim -->
<h1>Título</h1>
<h3>Subtítulo</h3> <!-- Pulou h2 -->
<!-- ✅ Bom -->
<h1>Título</h1>
<h2>Subtítulo</h2>
Cada página deve ter landmarks únicos e identificáveis:
<main id="conteudo-principal">
<!-- Conteúdo único desta página -->
</main>
Use navegação semântica com labels descritivos:
<nav aria-label="Navegação de breadcrumb">
<ol>
<li><a href="/">Início</a></li>
<li><a href="/categoria">Categoria</a></li>
<li aria-current="page">Página Atual</li>
</ol>
</nav>