Tempo de leitura: 3 minutos

Tags estruturais página HTML: Neste artigo, vamos explorar cinco tags HTML importantes relacionadas à estruturação de uma página: nav, aside, header, main e footer. Essas tags são usadas para definir diferentes partes de uma página web e desempenham um papel crucial na criação de páginas web bem estruturadas, acessíveis e semânticas.

A Tag Nav

A tag nav é usada para definir uma seção de navegação em um documento HTML. Normalmente, ela contém uma lista de links que permitem aos usuários navegar pelo site. Aqui está um exemplo de como a tag nav pode ser usada:

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">Sobre</a></li>
        <li><a href="#contact">Contato</a></li>
    </ul>
</nav>

Neste exemplo, a tag nav contém uma lista não ordenada (<ul>) de links (<a>), cada um levando a uma seção diferente do site.

A Tag Aside

A tag aside é usada para definir conteúdo que está relacionado ao conteúdo principal de uma página, mas que pode ser considerado separado do conteúdo principal. Isso pode incluir barras laterais, caixas de chamada, publicidade, entre outros. Aqui está um exemplo de como a tag aside pode ser usada:

<aside>
    <h3>Notícias Relacionadas</h3>
    <p>Confira as últimas notícias sobre este tópico.</p>
</aside>

Neste exemplo, a tag aside contém um cabeçalho (<h3>) e um parágrafo (<p>), que juntos formam uma seção de “Notícias Relacionadas”.

A Tag Header

A tag header é usada para definir um cabeçalho para um documento ou uma seção. Normalmente, ela contém um grupo de elementos introdutórios ou de navegação, como um logotipo, um título, um subtítulo, e/ou alguns links de navegação. Aqui está um exemplo de como a tag header pode ser usada:

<header>
    <h1>Título do Site</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">Sobre</a></li>
            <li><a href="#contact">Contato</a></li>
        </ul>
    </nav>
</header>

Título do Site

Neste exemplo, a tag header contém um cabeçalho (<h1>) e uma seção de navegação (<nav>).

A Tag Main

A tag main é usada para definir o conteúdo principal ou importante em um documento. Existe apenas um elemento main em uma página e ele deve ser único para o documento, excluindo o conteúdo que é repetido em um conjunto de documentos, como cabeçalhos do site, navegação do site, rodapé do site, barras laterais, etc. Aqui está um exemplo de como a tag main pode ser usada:

<main>
    <h1>Título do Artigo</h1>
    <p>Este é o conteúdo do artigo.</p>
</main>

Título do Artigo

Este é o conteúdo do artigo.

Neste exemplo, a tag main contém um cabeçalho (<h1>) e um parágrafo (<p>), que juntos formam o conteúdo principal da página.

A Tag Footer

A tag footer é usada para definir um rodapé para um documento ou uma seção. Normalmente, ela contém informações sobre o autor do documento, direitos autorais, links para termos de uso, informações de contato, etc. Aqui está um exemplo de como a tag footer pode ser usada:

<footer>
    <p>Autor: João Silva</p>
    <p>Copyright &copy; 2022</p>
</footer>

Neste exemplo, a tag footer contém dois parágrafos (<p>), que juntos formam o rodapé da página.

Conclusão

Tags estruturais página HTML: Em resumo, as tags nav, aside, header, main e footer são componentes fundamentais de um documento HTML. Elas são usadas para definir diferentes partes de uma página web e desempenham um papel crucial na criação de páginas web bem estruturadas e acessíveis. Compreender como essas tags funcionam e quando usá-las é uma habilidade essencial para qualquer desenvolvedor web.

E por falar em desenvolvimento web, uma das coisas mais importantes é dar vida às suas criações e deixá-las acessíveis para todos através da internet. Faça como nós e disponibilize seus sites e sistemas hospedando-os na Hostinger! Clique aqui e saiba mais!!!