Article image
Andreza Cristina
Andreza Cristina23/08/2023 21:50
Compartilhe

HTML semântico

  • #HTML

O HTML semântico é uma abordagem que dá significado claro e estrutura ao conteúdo da web. Isso ajuda motores de busca, leitores de tela e desenvolvedores a entender hierarquia e propósito dos elementos. Ao invés de focar na aparência visual, ele enfatiza significado e função do conteúdo.

Aqui estão alguns exemplos de elementos HTML semânticos:

1) <header>: Representa o cabeçalho ou topo da página. Pode conter o logotipo, o título principal e elementos de navegação.

2) <nav>: Representa uma seção de navegação. É usado para agrupar links de navegação.

3) <main>: Define o conteúdo principal da página. Geralmente contém o conteúdo principal que é exclusivo para a página.

4) <article>: Representa um conteúdo independente e auto-suficiente, como um post de blog ou uma notícia.

5) <section>: Divide o conteúdo em seções temáticas ou grupos de conteúdo relacionados.

6) <aside>: Contém conteúdo relacionado que é secundário para o conteúdo principal, como barras laterais.

7) <footer>: Representa o rodapé da página. Pode conter informações de contato, links para redes sociais e direitos autorais.

Usar elementos semânticos apropriados não apenas torna o código mais legível e organizado, mas também contribui para uma melhor experiência do usuário, acessibilidade e otimização para motores de busca.

Compartilhe
Comentários (1)
Jhonatan Serafim
Jhonatan Serafim - 24/07/2025 10:32

Ao pesquisar sobre HTML semântico, encontrei a imagem abaixo e achei interessante destacar uma observação que pode enriquecer o conteúdo: a tag <nav> responsável pelo menu de navegação está posicionada fora da tag <header>.

Embora essa estrutura funcione corretamente, o mais comum e semanticamente recomendado é que o menu principal esteja dentro do <header>, já que ele representa o cabeçalho introdutório da página e geralmente agrupa elementos como logotipo e navegação principal.

Ajuste sugerido: Agrupar a logomarca e o menu de navegação dentro da tag <header> junto com a <nav>.