Como usar as tais tags semânticas?
As tags semânticas são uma forma de estruturar e organizar o conteúdo de um site de maneira mais significativa. Elas fornecem informações adicionais aos navegadores e motores de busca sobre o significado de cada elemento da página, o que pode melhorar a experiência dos usuários e a otimização para mecanismos de pesquisa.
Aqui estão algumas dicas de como usar as tags semânticas:
<header>
: Use essa tag para identificar o cabeçalho da página. Normalmente, o cabeçalho contém o logotipo, menu de navegação e outros elementos importantes para a página.
Exemplo:
<header>
<h1>Meu Site</h1>
<nav>
<ul>
<li><a href="#">Página Inicial</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</header>
<nav>
: Use essa tag para identificar a barra de navegação principal do site. Isso ajuda os navegadores a entender e destacar a área de navegação em uma página.
Exemplo:
<nav>
<ul>
<li><a href="#">Página Inicial</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
<main>
: Use essa tag para delimitar o conteúdo principal da página. É recomendado ter apenas um elemento<main>
por página.
Exemplo:
<main>
<h2>Conteúdo Principal</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</main>
<article>
: Use essa tag para identificar um conteúdo autônomo e significativo que pode ser distribuído ou reutilizado independentemente, como uma postagem de blog.
Exemplo:
<article>
<h3>Título do Artigo</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
<section>
: Use essa tag para agrupar elementos relacionados em uma página. Por exemplo, você pode usar<section>
para agrupar os diferentes capítulos de um livro.
Exemplo:
<section>
<h2>Capítulo 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section>
<h2>Capítulo 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
Essas são apenas algumas das tags semânticas disponíveis. É importante entender a função e o propósito de cada tag para poder aplicá-las adequadamente em seus projetos.