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

HTML: Semântica HTML

Última atualização: 2026-09-08

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.

Tags nesta seção: <div> <header> <nav> <main> <section> <article> <aside> <footer> <figure> <figcaption> <time> <mark> <details> <summary> <blockquote> <code> <address> <dialog> <span>

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

▶ 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

▶ 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

▶ 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

▶ 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.

Tags nesta seção: <div> <header> <nav> <main> <section> <article> <aside> <footer> <figure> <figcaption> <time> <mark> <details> <summary> <blockquote> <code> <address> <dialog> <span>

❓ 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%