O que são marcadores semânticos?
São marcadores que indicam o papel ou a função de uma determinada área da página.
Ajudam a estruturar o documento de forma mais lógica e organizada.
Substituem em muitos casos os
<div>genéricos que usávamos antes.
Principais marcadores semânticos do HTML5
<header>
Representa o cabeçalho da página ou de uma secção.
Normalmente contém o título, o logótipo e o menu de navegação.
Exemplo:
<nav>
Define a área de navegação.
Contém links para outras páginas ou secções.
Exemplo:
<section>
Agrupa uma secção temática do documento.
Pode conter títulos, parágrafos, listas, imagens, etc.
Exemplo:
<article>
Representa um bloco de conteúdo independente, como uma notícia, artigo ou publicação.
Pode ser usado dentro de uma
<section>.
Exemplo:
<aside>
Utilizado para conteúdos complementares, como barras laterais, notas ou links externos.
Exemplo:
<footer>
Define o rodapé da página ou de uma secção.
Pode incluir direitos de autor, contactos ou links adicionais.
Exemplo:
Vantagens de usar marcadores semânticos
* O código fica mais organizado e compreensível.
* Os motores de busca (Google, Bing) entendem melhor a estrutura da página.
* Melhora a acessibilidade para leitores de ecrã.
* Facilita a aplicação de estilos com CSS.
Os marcadores semânticos tornam o HTML mais “inteligente”, permitindo que o código reflicta o verdadeiro significado de cada parte da página.
A partir de agora, sempre que criares uma nova página, tenta substituir os <div> genéricos por estas tags semânticas, para uma estrutura mais moderna e correta.
