Entendendo o HTML Parte 3: Tags main, section, article e aside

O HTML é uma linguagem incrivelmente versátil, que permite estruturar páginas web de forma clara e organizada.

Nesta terceira parte da série, vamos explorar as tags main, section, article e aside, fundamentais para criar um layout semântico e acessível.

Se você ainda não conferiu as partes 1 e 2, ao finalizar esta leitura, não deixe de acessar os artigos Entendendo o HTML e Entendendo o HTML: Parte 2.

As tags abordadas neste conteúdo ajudam a definir a hierarquia do conteúdo e são especialmente importantes para melhorar a experiência do usuário e a otimização para motores de busca (SEO).

A tag main: Entendendo o HTML

A tag <main> é utilizada para identificar o conteúdo principal de uma página, ou seja, o que é mais relevante para o usuário.

Somente deve haver uma tag <main> por documento, e ela não deve conter elementos que se repetem em todas as páginas, como cabeçalhos, rodapés ou barras de navegação.

Exemplo de uso:

<main>
    <h1>Bem-vindo ao nosso site!</h1>
    <p>Aqui você encontrará os melhores artigos sobre tecnologia.</p>
</main>

Benefícios:

  • Ajuda os leitores de tela a localizarem rapidamente o conteúdo principal.
  • Indica aos motores de busca qual é o foco da página.

A tag section: Entendendo o HTML

A tag <section> é usada para agrupar conteúdos relacionados dentro de uma página.

Cada seção pode ter seu próprio título e pode conter outros elementos como parágrafos, imagens ou listas.

Quando usar?

  • Para dividir o conteúdo em partes temáticas ou funcionais.
  • Em páginas longas, onde diferentes tópicos precisam ser organizados de forma clara.

Exemplo:

<section>
    <h2>Notícias Recentes</h2>
    <p>Confira as últimas atualizações do mundo da tecnologia.</p>
</section>

<section>
    <h2>Tutoriais</h2>
    <p>Aprenda a criar um site responsivo em poucos passos.</p>
</section>

Com o uso de <section>, você melhora a organização do código e facilita a leitura tanto para humanos quanto para máquinas.

A tag article: Entendendo o HTML

A tag <article> representa um conteúdo independente e autocontido que pode ser distribuído separadamente, como um post de blog, uma notícia ou um comentário.

Características:

  • Deve ter sentido completo mesmo fora do contexto da página.
  • É ideal para conteúdo que pode ser reutilizado ou compartilhado.

Exemplo:

<article>
    <h2>O Futuro da Inteligência Artificial</h2>
    <p>A Inteligência Artificial está mudando o mundo. Descubra como essa tecnologia pode impactar a sua vida.</p>
    <p>Leia mais sobre avanços recentes e aplicações práticas.</p>
</article>

Você pode ter múltiplos <article> em uma página, especialmente em sites de notícias ou blogs.

A tag aside: Entendendo o HTML

A tag <aside> é usada para conteúdo relacionado ao principal, mas que não é essencial.

Geralmente, ela aparece como uma barra lateral ou uma seção de informações complementares.

Exemplos de uso:

  • Links para artigos relacionados.
  • Publicidade.
  • Biografia de um autor em um blog.

Exemplo prático:

<aside>
    <h3>Artigos Relacionados</h3>
    <ul>
        <li><a href="#">O que é HTML5?</a></li>
        <li><a href="#">Introdução ao CSS</a></li>
        <li><a href="#">JavaScript para iniciantes</a></li>
    </ul>
</aside>

O <aside> é uma excelente maneira de adicionar contexto ou complementar o conteúdo principal sem interromper a experiência do usuário.

Como combinar essas tags?

Estas quatro tags podem ser usadas juntas para criar um layout bem estruturado e funcional. Veja um exemplo completo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de Layout</title>
</head>
<body>
    <main>
        <section>
            <h1>Bem-vindo ao Nosso Blog</h1>
            <p>Aqui você encontra conteúdos exclusivos sobre tecnologia.</p>
        </section>

        <section>
            <h2>Artigos Recentes</h2>
            <article>
                <h3>Como o 5G Está Transformando a Conectividade</h3>
                <p>Com velocidades incríveis, o 5G promete revolucionar a forma como usamos a internet.</p>
            </article>

            <article>
                <h3>Desenvolvimento Web: O que Esperar em 2025</h3>
                <p>Descubra as tendências que estarão em alta no mundo do desenvolvimento web.</p>
            </article>
        </section>
    </main>

    <aside>
        <h2>Destaques</h2>
        <ul>
            <li><a href="#">Guia de Iniciação em Python</a></li>
            <li><a href="#">O que é UI/UX Design?</a></li>
            <li><a href="#">Top 10 Frameworks para Desenvolvedores</a></li>
        </ul>
    </aside>
</body>
</html>

Benefícios de usar essas tags

  • Semântica clara: Melhora a compreensão do conteúdo por navegadores e motores de busca.
  • Acessibilidade: Auxilia dispositivos assistivos a identificar e navegar pelo conteúdo.
  • SEO: Estruturas organizadas ajudam na indexação e ranqueamento das páginas.
  • Manutenção: Facilita a leitura e modificação do código.

Conclusão: Entendendo o HTML

As tags main, section, article e aside desempenham papéis cruciais na criação de um HTML moderno, semântico e acessível.

Ao entender como e quando utilizá-las, você pode estruturar seu site de forma eficiente, proporcionando uma experiência melhor para os usuários e otimizando seu site para motores de busca.

Coloque em prática o que aprendeu e veja a diferença em seus projetos!

Marcos R.S
Marcos R.S

Olá, pessoal! Sou Marcos, apaixonado por aprender, especialmente sobre tecnologia. Estou sempre em busca de lapidar os conhecimentos que já possuo e adquirir novos. Atuo com análise e desenvolvimento de sistemas, sou graduando em Sistemas de Informação e tenho formação técnica em Informática.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *