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.