
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).
Sumário do Artigo
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!