Tags semânticas do HTML5: guia completo com exemplos
Como o HTML semântico deixa a estrutura da página mais clara para pessoas e máquinas, onde melhora a acessibilidade e por que ele não é um atalho para ranqueamento.
Antes do HTML5, a web era um mar de divs e spans com classes CSS como .header, .sidebar, .footer. Os buscadores e os leitores de tela precisavam adivinhar o que era cada coisa. O HTML5 trouxe as tags semânticas — elementos que carregam significado por si mesmos, independentemente do CSS. A tag <article> indica conteúdo autossuficiente. A tag <nav> indica navegação. A tag <aside> indica conteúdo complementar, relacionado ao principal, mas não essencial para entendê-lo.
Tags estruturais da página
O HTML5 introduziu um conjunto de tags para marcar grandes regiões da página. Elas formam o esqueleto do documento, que navegadores, buscadores e tecnologias assistivas conseguem percorrer sem ler o CSS.
- <header>
- Conteúdo introdutório do contexto de seção mais próximo — da página ou de uma seção. No nível da página: o cabeçalho do site, com logo, navegação e busca. Dentro de <article>: o título, os metadados e o autor. Vários elementos <header> são válidos na mesma página, desde que pertençam a seções diferentes.
- <nav>
- Um bloco de links de navegação. Nem todo conjunto de links é <nav> — apenas as rotas principais de navegação: menu principal, breadcrumbs, paginação. Links do rodapé para a política de privacidade não são <nav>. Leitores de tela usam <nav> para um atalho de teclado que leva direto à navegação.
- <main>
- O conteúdo principal e exclusivo da página. Só existe um <main> por documento. O conteúdo de <main> não deve se repetir em outras páginas (cabeçalhos, rodapés e barras laterais se repetem, por isso ficam fora de <main>). Leitores de tela pulam direto para <main> com um atalho de teclado.
- <footer>
- A seção de encerramento do contexto de seção mais próximo. No nível da página: contatos, direitos autorais, links. Dentro de <article>: informações do autor, tags, data da última atualização. Assim como <header>, pode aparecer em várias seções.
- <article>
- Conteúdo autossuficiente e distribuível de forma independente: um post de blog, uma notícia, uma publicação de fórum, um cartão de produto ou um comentário. O teste principal: se você tirar o <article> do contexto e publicá-lo sozinho, ele faz sentido? Se faz, é um <article>.
- <section>
- Uma parte do documento com coesão temática e sem uma tag mais específica. Deve sempre ter um título (<h2>–<h6>). Se não houver título, provavelmente <div> é a escolha certa. Não use <section> como substituto estilizado de <div>.
- <aside>
- Conteúdo indiretamente relacionado ao principal: caixas de destaque, barras laterais, blocos de anúncio, biografias de autores, artigos relacionados. Dentro de <article>: uma nota ou citação não crítica para entender o texto principal. No nível da página: uma coluna lateral.
O esqueleto básico de qualquer página tem esta forma — e isso já é uma marcação semanticamente correta:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>
<body>
<header>
<a href="/"><img src="logo.svg" alt="Company name"></a>
<nav aria-label="Main navigation">
<ul>
<li><a href="/blog">Blog</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contacts">Contacts</a></li>
</ul>
</nav>
</header>
<main>
<!-- Unique page content -->
</main>
<footer>
<p>© 2026 Company name</p>
<nav aria-label="Secondary navigation">
<a href="/privacy">Privacy</a>
<a href="/sitemap">Sitemap</a>
</nav>
</footer>
</body>
</html>Tags de conteúdo: article, section, h1–h6, p
As tags de nível estrutural definem as regiões da página. As tags de nível de conteúdo descrevem a natureza do próprio conteúdo. Veja a combinação que aparece em toda página de blog.
<!-- Blog post page -->
<main>
<article>
<header>
<h1>How to choose the right HTML tag</h1>
<p>Published: <time datetime="2026-05-22">22 May 2026</time></p>
<address>
By: <a rel="author" href="/authors/pavlo">seohead</a>
</address>
</header>
<section>
<h2>Why semantics matters</h2>
<p>Section text...</p>
</section>
<section>
<h2>Main tags</h2>
<p>Section text...</p>
<aside>
<p>Note: the HTML Living Standard is continuously updated.</p>
</aside>
</section>
<footer>
<p>Tags: <a href="/tags/html">#html</a>, <a href="/tags/seo">#seo</a></p>
</footer>
</article>
<!-- Related articles -->
<aside aria-label="Related articles">
<h2>Also read</h2>
<ul>
<li><a href="/blog/heading-structure">Heading structure</a></li>
<li><a href="/blog/schema-org-json-ld">Schema.org markup</a></li>
</ul>
</aside>
</main>Quando usar section e quando usar div
A regra é simples: se o bloco tem um nome semântico, use <section>. Se ele existe só para estilo ou como gancho para JavaScript, use <div>.
<!-- CORRECT: section with a heading -->
<section>
<h2>Product benefits</h2>
<ul>
<li>Fast delivery</li>
<li>2-year warranty</li>
</ul>
</section>
<!-- CORRECT: div for styling -->
<div class="cards-grid">
<article>...</article>
<article>...</article>
<article>...</article>
</div>
<!-- WRONG: section with no heading -->
<section class="cards-grid">
<article>...</article>
</section>
<!-- WRONG: div where content has meaning -->
<div id="about">
<!-- The About section — this should be <section> -->
<h2>About us</h2>
<p>...</p>
</div>Tags de mídia, dados e utilitários
O HTML5 adicionou tags para tipos específicos de dados — elas dão sinais extras aos buscadores sem precisar de marcação Schema.org.
<figure> e <figcaption>
Conteúdo de mídia autossuficiente, com legenda. Imagens, diagramas, tabelas, trechos de código — tudo o que se relaciona ao texto principal e poderia ser movido ou colocado em um anexo sem perder o sentido. <figcaption> é a legenda oficial de um <figure>. O Google usa <figcaption> como descrição complementar da imagem ao analisar imagens.
<time>
Uma data ou hora legível por máquina. O atributo datetime, no formato ISO 8601, permite que o buscador determine com precisão a data de publicação ou de um evento, independentemente de como ela aparece para o usuário. O Google recomenda explicitamente usar <time> para datas de artigos nos dados estruturados do tipo Article.
<address>
Informações de contato do <article> mais próximo ou do documento como um todo. Dentro de <article>: os dados de contato do autor. No nível da página: as informações de contato da organização. Não use <address> para endereços postais fora do contexto de contato do autor ou da organização.
<details> e <summary>
Um widget nativo de seção recolhível, sem JavaScript. <summary> é o título visível. <details> guarda o conteúdo oculto. O navegador cuida de abrir e fechar automaticamente. Os buscadores indexam o conteúdo dentro de <details> mesmo quando ele está fechado. Ótimo para FAQs e spoilers.
<mark>
Destaca o texto como relevante no contexto atual — por exemplo, resultados de busca ou palavras-chave em uma citação. Não confunda com <strong> (importância) nem com <em> (ênfase). <mark> significa “marcado como relevante”, e não “importante” nem “estilizado como decoração”.
<data> e <output>
<data value="42">Quarenta e dois</data> relaciona um texto legível por pessoas a um valor legível por máquinas. <output> representa o resultado de um cálculo ou de uma ação do usuário. As duas tags são raras em sites de conteúdo, mas essenciais em aplicações web com formulários e calculadoras.
<figure> com legenda:<!-- figure + figcaption for an image -->
<figure>
<img
src="/images/html5-structure.webp"
alt="Diagram of the semantic structure of an HTML5 page"
width="800" height="450"
>
<figcaption>Fig. 1 — Typical semantic structure of an HTML5 document</figcaption>
</figure>
<!-- figure + figcaption for code -->
<figure>
<pre><code class="language-html"><article>...</article></code></pre>
<figcaption>Example: minimal article markup</figcaption>
</figure>
<!-- time with datetime attribute -->
<p>
Article updated:
<time datetime="2026-05-22T10:30:00+03:00">22 May 2026</time>
</p>
<!-- details + summary (FAQ without JS) -->
<details>
<summary>What is semantic HTML?</summary>
<p>Markup where each tag conveys the meaning of the content,
not just its visual appearance.</p>
</details>
<!-- mark for search highlighting -->
<p>Results for "<mark>semantic tags</mark>" — 42 articles</p>Aninhamento e combinações: exemplos reais
O poder semântico do HTML5 não está nas tags isoladas, mas na combinação correta delas. Vamos ver as arquiteturas típicas de página.
Página de listagem do blog
<main>
<header>
<h1>SEO blog</h1>
<p>Practical articles on website promotion</p>
</header>
<!-- Article list — each card is an article -->
<section aria-label="Article list">
<article>
<header>
<h2><a href="/blog/semantic-html5">HTML5 semantic tags</a></h2>
<p>
<time datetime="2026-05-22">22 May 2026</time>
· <span>18 min read</span>
</p>
</header>
<p>HTML5 semantic tags are the foundation of correct page markup...</p>
<footer>
<a href="/blog/semantic-html5">Read more</a>
</footer>
</article>
<article>
<header>
<h2><a href="/blog/heading-structure">Heading structure</a></h2>
<p>
<time datetime="2026-04-10">10 April 2026</time>
· <span>12 min read</span>
</p>
</header>
<p>One H1 per page. H2 divides content into sections...</p>
<footer>
<a href="/blog/heading-structure">Read more</a>
</footer>
</article>
</section>
<!-- Pagination -->
<nav aria-label="Pagination">
<a href="?page=1" aria-current="page">1</a>
<a href="?page=2">2</a>
<a href="?page=3">3</a>
</nav>
</main>Cartão de produto com avaliações
<main>
<article itemscope itemtype="https://schema.org/Product">
<!-- Product main area -->
<header>
<h1 itemprop="name">SoundMax Pro Wireless Headphones</h1>
<p itemprop="description">40 hours of battery life, active noise cancellation...</p>
</header>
<!-- Product image -->
<figure>
<img
src="/products/soundmax-pro.webp"
alt="SoundMax Pro wireless headphones — front view"
itemprop="image"
width="600" height="600"
>
<figcaption>SoundMax Pro in three colours: black, white, blue</figcaption>
</figure>
<!-- Price -->
<section aria-label="Price and purchase">
<p>
<data value="129" itemprop="price">$129</data>
</p>
<button type="button">Add to cart</button>
</section>
<!-- Specs -->
<section>
<h2>Specifications</h2>
<dl>
<dt>Battery life</dt><dd>40 hours</dd>
<dt>Connection</dt><dd>Bluetooth 5.3</dd>
<dt>Weight</dt><dd>250 g</dd>
</dl>
</section>
<!-- Reviews — each review is an article inside article -->
<section aria-label="Customer reviews">
<h2>Reviews</h2>
<article>
<header>
<strong>Anna K.</strong>
<time datetime="2026-04-15">15 April 2026</time>
</header>
<p>Excellent headphones, clean sound. The noise cancellation works brilliantly.</p>
</article>
<article>
<header>
<strong>Michael R.</strong>
<time datetime="2026-03-28">28 March 2026</time>
</header>
<p>The 40-hour claim is real. Took them on a business trip and they lasted the week.</p>
</article>
</section>
</article>
</main>Landing page com seções e barra lateral
<body>
<header>
<nav aria-label="Main navigation">
<!-- logo + menu -->
</nav>
</header>
<main>
<!-- Hero section -->
<section aria-labelledby="hero-title">
<h1 id="hero-title">SEO promotion for your business</h1>
<p>We help businesses improve technical and content foundations</p>
<a href="#contacts" role="button">Get a free audit</a>
</section>
<!-- Services -->
<section>
<h2>Our services</h2>
<ul role="list">
<li>
<article>
<h3>Technical audit</h3>
<p>Full technical health check of your site...</p>
</article>
</li>
<li>
<article>
<h3>Content strategy</h3>
<p>Keyword universe and content calendar...</p>
</article>
</li>
</ul>
</section>
<!-- Main content + sidebar -->
<div class="layout-two-col">
<section>
<h2>Case studies</h2>
<!-- ... -->
</section>
<aside aria-label="Contact us">
<h2>Get in touch</h2>
<address>
<p>Email: <a href="mailto:hello@seohead.tech">hello@seohead.tech</a></p>
<p>Telegram: <a href="https://t.me/seohead">@seohead</a></p>
</address>
</aside>
</div>
</main>
<footer>
<nav aria-label="Site map">
<ul>
<li><a href="/blog">Blog</a></li>
<li><a href="/glossary">Glossary</a></li>
</ul>
</nav>
<p><small>© 2026 seohead.tech</small></p>
</footer>
</body>Vários <nav>: breadcrumbs e paginação
<!-- Multiple <nav> elements are fine — distinguish them with aria-label -->
<!-- Breadcrumbs -->
<nav aria-label="Breadcrumbs">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li aria-current="page">HTML5 semantic tags</li>
</ol>
</nav>
<!-- Main navigation inside <header> -->
<nav aria-label="Main navigation">
<ul>
<li><a href="/blog" aria-current="page">Blog</a></li>
<li><a href="/services">Services</a></li>
</ul>
</nav>
<!-- Pagination at the end of a listing -->
<nav aria-label="Blog pages">
<a href="?page=1" rel="prev" aria-label="Previous page">←</a>
<a href="?page=1">1</a>
<span aria-current="page">2</span>
<a href="?page=3">3</a>
<a href="?page=3" rel="next" aria-label="Next page">→</a>
</nav>
<!-- In-page table of contents -->
<nav aria-label="Article contents">
<ol>
<li><a href="#structural-tags">Structural tags</a></li>
<li><a href="#content-tags">Content tags</a></li>
<li><a href="#nesting-examples">Nesting examples</a></li>
</ol>
</nav>Impacto no SEO: o que o buscador realmente recebe
A marcação semântica dá aos navegadores e às tecnologias assistivas informações estruturais mais claras. Ela pode tornar a página mais fácil de interpretar e de manter, mas não é um interruptor direto de ranqueamento nem um substituto para conteúdo útil.
Identificação do conteúdo principal
O Google usa <main> para identificar o conteúdo principal de uma página. O conteúdo do cabeçalho, do rodapé e de <aside> recebe menos peso no ranqueamento. Se todo o texto estiver dentro de <div class="main">, o Google precisa gastar mais recursos para entender a estrutura.
Atribuição de data e autor
<time datetime="2026-05-22"> dá ao Google uma data de publicação precisa, o que influencia a avaliação de atualidade. <address> com rel="author" vincula o artigo ao autor. Os dois sinais alimentam a geração de resultados avançados nas buscas.
Resultados avançados
O conteúdo de <details> + <summary> é indexado pelo Google e pode aparecer como blocos expansíveis nos resultados de pesquisa (People Also Ask). <figure> + <figcaption> influenciam a indexação de imagens e a forma como elas aparecem no Google Imagens.
Linkagem interna
Links dentro de <nav> recebem um contexto de navegação. Links dentro de <article> recebem um contexto de conteúdo. O Googlebot considera a posição do link na página ao avaliar seu peso. Um link do corpo de um <article> vale mais do que um link de um <aside>.
Erros comuns na marcação semântica
A maioria dos erros vem do hábito de pensar primeiro em divs ou de não entender para que serve cada tag.
<!-- MISTAKE 1: <section> instead of <div> for styling -->
<section class="flex-wrapper"> <!-- no heading = not section -->
<img src="photo.jpg" alt="">
</section>
<!-- CORRECT -->
<div class="flex-wrapper">
<img src="photo.jpg" alt="Photo description">
</div>
<!-- MISTAKE 2: <article> for a card without standalone meaning -->
<article class="feature-card">
<span class="icon">⚡</span>
<h3>Fast delivery</h3>
</article>
<!-- CORRECT: a benefits card is li or div, not article -->
<li class="feature-card">
<span class="icon" aria-hidden="true">⚡</span>
<h3>Fast delivery</h3>
</li>
<!-- MISTAKE 3: <header> as a synonym for <div class="header"> -->
<header class="section-header">
<h2>Our advantages</h2>
</header>
<!-- CORRECT: use <header> only when a section has an introductory group -->
<section>
<h2>Our advantages</h2> <!-- h2 directly, no header wrapper -->
...
</section>
<!-- MISTAKE 4: two <main> elements -->
<main>Primary content</main>
<main>Also important content</main> <!-- invalid! -->
<!-- CORRECT: one <main>, supplementary content in <aside> -->
<main>Primary content</main>
<aside>Supplementary content</aside>
<!-- MISTAKE 5: <address> for an office address in body text -->
<address>1 High Street, London</address> <!-- not in an author/org context -->
<!-- CORRECT -->
<p>Office address: 1 High Street, London</p>
<!-- or in footer as site contact information: -->
<footer>
<address>
<a href="mailto:hello@company.com">hello@company.com</a>
</address>
</footer>Outro problema frequente são os atributos alt vazios ou ausentes. Imagens dentro de <figure> precisam ter um alt com sentido ou alt="" (se a imagem for decorativa e já estiver descrita pelo <figcaption>). Nunca omita o atributo alt por completo: isso viola os padrões de acessibilidade e a validação HTML.
<!-- Decorative image: empty alt, figcaption describes it -->
<figure>
<img src="chart.png" alt="" role="presentation">
<figcaption>Organic traffic growth over 6 months: +340%</figcaption>
</figure>
<!-- Informative image: full alt text -->
<figure>
<img
src="html5-tags-map.png"
alt="Map of HTML5 semantic tags: header, nav, main, article, section, aside, footer"
>
<figcaption>Fig. 2 — Complete map of HTML5 semantic elements</figcaption>
</figure>
<!-- Mistake: no alt at all -->
<img src="diagram.png"> <!-- invalid! -->Perguntas frequentes
A marcação semântica afeta diretamente o ranqueamento no Google?
Dá para aninhar <article> dentro de outro <article>?
Qual é a diferença entre <strong> e <b>, e entre <em> e <i>?
Preciso usar role="main" junto com a tag <main>?
E as aplicações de página única (SPAs) em React ou Vue?
Check it with SpiderHead
Free and local: run the audit on your own machine.
