English العربية Português 日本語

HTML: Semântica HTML

Tags semânticas dão significado à estrutura da sua página web — elas dizem ao navegador não apenas como exibir algo, mas também "o que esta seção é". Isso ajuda muito no SEO, na acessibilidade e na legibilidade do código.

1. O Que é Semântica

"Semântica" significa "significado". Você pode construir qualquer layout com <div>, mas o navegador não consegue entender a finalidade do container. As tags semânticas comunicam sua finalidade diretamente pelo nome:

▶ Exemplo

HTML 
<header>
<h1>Meu Blog</h1>
<nav>
<a href="index.html">Início</a>
</nav>
</header>
<main>
<article>
<h2>Título do Artigo</h2>
<p>Conteúdo do artigo...</p>
</article>
<aside>Barra lateral</aside>
</main>
<footer>
<p>&copy; 2026</p>
</footer>
▶ Experimente
📌 Tags Comuns: <header> cabeçalho da página, <nav> navegação, <main> conteúdo principal, <section> seção, <article> artigo, <aside> barra lateral, <footer> rodapé. Todas são containers block-level que funcionam como <div>, mas seus nomes descrevem sua finalidade.

2. Benefícios da Semântica

A semântica oferece três benefícios diretos: os mecanismos de busca entendem a estrutura da sua página com mais precisão; os leitores de tela podem pular diretamente para áreas específicas; os desenvolvedores entendem o layout de um olhar, sem precisar adivinhar o que um nome de classe de <div> significa.

3. Container de Imagem/Conteúdo: <figure> e <figcaption>

<figure> envolve conteúdo autônomo como imagens, blocos de código ou gráficos, enquanto <figcaption> fornece uma legenda:

▶ Exemplo

HTML 
<figure>
<img src="grafico.png" alt="Gráfico de dados de vendas 2026">
<figcaption>Figura 1: Comparação de vendas trimestrais de 2026</figcaption>
</figure>

<figure>
<pre><code>console.log("Olá, Mundo!");</code></pre>
<figcaption>Exemplo de código: exibindo Olá, Mundo!</figcaption>
</figure>
▶ Experimente

4. Tempo e Destaque: <time> e <mark>

<time> torna datas e horários legíveis por máquinas, e <mark> destaca palavras-chave de busca ou textos importantes:

▶ Exemplo

HTML 
<p>Publicado em <time datetime="2026-06-12">12 de junho de 2026</time></p>

<p>Busca por: <mark>tags semânticas</mark>,
os resultados serão destacados.</p>

<p><time datetime="2026-06-12T14:30:00+08:00">
Amanhã às 14h30</time> a reunião será realizada.</p>
▶ Experimente

5. Conteúdo Expansível: <details> e <summary>

<details> cria um widget interativo expansível/recolhível, e <summary> define seu título visível. HTML puro, sem necessidade de JavaScript:

▶ Exemplo

HTML 
<details>
<summary>O que são tags semânticas?</summary>
<p>Tags semânticas são tags HTML que usam nomes significativos
para descrever a finalidade do conteúdo, como &lt;header&gt;,
&lt;nav&gt;, &lt;article&gt;, etc.</p>
</details>

<details open>
<summary>Painel já expandido (com atributo open)</summary>
<p>Adicionar o atributo open faz com que o painel seja expandido por padrão.</p>
</details>
▶ Experimente
💡 Mais Tags Semânticas: <blockquote> para citações, <code> para código, <address> para informações de contato, <dialog> para diálogos. Tudo pode ser semântico — encontre a tag mais adequada antes de usar uma genérica.

❓ Perguntas Frequentes

P Como as tags semânticas afetam o SEO?
R Mecanismos de busca usam tags semânticas para entender a estrutura da página e a importância do conteúdo. <header> diz aos mecanismos de busca "este é o cabeçalho da página", <main> indica "este é o conteúdo principal", <article> significa "este é um artigo independente". Mecanismos de busca dão maior peso ao conteúdo dentro de <main> e <article>. Além disso, tags semânticas ajudam os mecanismos de busca a gerar snippets de resultados mais precisos.
P Qual é a diferença entre <section> e <article>?
R <article> é conteúdo independente e completo que pode ser publicado ou reutilizado por si só (como posts de blog, notícias, reviews). <section> é um agrupamento temático de conteúdo, tipicamente com um título, mas não é independente (como capítulos, painéis de abas, características de produto). O teste：se o bloco de conteúdo faz sentido por si só, use <article>; se precisa de contexto para ser compreendido, use <section>.
P Quando devo usar <div>?
R Use <div> apenas quando não existir uma tag semântica adequada. Cenários comuns：1）Containers puramente de estilização (envolver elementos para layout Flexbox); 2）Hooks de JavaScript (modais, popups); 3）Agrupamentos sem significado semântico. Regra：primeiro procure tags semânticas (header/nav/main/section/article/aside/footer), use div como fallback quando nenhuma se encaixar.
P Como é a compatibilidade de <details> e <summary>?
R <details> e <summary> são painéis expansíveis nativos do HTML5, suportados por todos os navegadores modernos (Chrome, Firefox, Safari, Edge) — excelente compatibilidade. Benefícios：expansível sem JavaScript, suporta navegação por teclado e leitores de tela. Limitações：personalização de estilo limitada (como ícones de seta), interações complexas ainda precisam de JavaScript. IE não suporta, mas IE foi descontinuado — não precisa se preocupar.

📖 Resumo

📝 Exercícios

  1. Construa um Esqueleto: Use tags semânticas para montar a estrutura de uma página de blog e preencha com algum texto de exemplo.
  2. Compare a Experiência: Use um leitor de tela para navegar em uma página só com <div> e uma página semântica lado a lado, e observe a diferença.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%