Nesse artigo, daremos um exemplo de uma estrutura de HTML semântico. Não é uma fórmula pronta e exata, mas é um bom caminho para aqueles que precisam de ajuda nessa tarefa.
E a primeira tag que vamos criar dentro da tag <body> é a tag <header>, a tag de cabeçalho. E nessa tag <header>, é usualmente comum adicionar uma tag <nav>, que é a tag para um menu de navegação.
E nesse menu de navegação, listamos os links com o auxílio das tags <ul>, <li> e <a>.
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#posts">Posts</a></li>
</ul>
</nav>
</header>
Após a tag <header>, vamos dar início ao conteúdo principal da página. Para isso, usaremos a tag <main>, que é a tag semântica para englobar as seções do conteúdo principal.
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#posts">Posts</a></li>
</ul>
</nav>
</header>
<main>
</main>
Dentro da tag <main>, a página pode conter diferentes seções. Semanticamente falando, cada seção deve desempenhar um papel único, por exemplo:
- Seção de postagens
- Seção de comentários
- Seção de patrocinadores
- Seção de galeria de imagens
- ...
Para essa estrutura, vamos pensar em uma seção de postagens de notícias. Logo, é viável englobar essa seção com uma tag chamada <section>.
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#posts">Posts</a></li>
</ul>
</nav>
</header>
<main>
<section id="posts">
</section>
</main>
Agora, precisamos criar os posts de notícias que farão parte dessa seção. Para isso, existe a tag <article>, cada <article> irá representar uma postagem.
Essa tag <article> é usada justamente para representar um componente que será utilizado mais de uma vez em uma página. Se teremos vários elementos de post, logo faz sentido cada postagem de notícia ser um <article>.
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#posts">Posts</a></li>
</ul>
</nav>
</header>
<main>
<section id="posts">
<article class="post">
<h3>Post title 1</h3>
<p>Post content 1</p>
</article>
<article class="post">
<h3>Post title 2</h3>
<p>Post content 2</p>
</article>
</section>
</main>
A tag <main> pode ter uma seção lateral em paralelo às outras seções mais importantes, nesse caso, usamos a tag <aside>.
Para o código que estamos desenvolvendo, a tag <aside> irá ser usada para representar uma seção de melhores postagens da página.
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#posts">Posts</a></li>
</ul>
</nav>
</header>
<main>
<section id="posts">
<article class="post">
<h3>Post title 1</h3>
<p>Post content 1</p>
</article>
<article class="post">
<h3>Post title 2</h3>
<p>Post content 2</p>
</article>
</section>
<aside>
<h2>Best posts</h2>
<ul>
<li href="#">Best post 1</li>
<li href="#">Best post 2</li>
<li href="#">Best post 3</li>
</ul>
</aside>
</main>
Por fim, adicionaremos o popular <footer>, que é o rodapé da página. Um detalhe importante para a semântica é usar a tag <address>, indicada para conter informações de contato.
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#posts">Posts</a></li>
</ul>
</nav>
</header>
<main>
<section id="posts">
<article class="post">
<h3>Post title 1</h3>
<p>Post content 1</p>
</article>
<article class="post">
<h3>Post title 2</h3>
<p>Post content 2</p>
</article>
</section>
<aside>
<h2>Best posts</h2>
<ul>
<li href="#">Best post 1</li>
<li href="#">Best post 2</li>
<li href="#">Best post 3</li>
</ul>
</aside>
</main>
<footer>
<p>2024 © The Dev Journal</p>
<address>
<a href="mailto:[email protected]">[email protected]</a>
</address>
</footer>
A estrutura do HTML completo fica assim:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8" />
<title>Dev Post</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#posts">Posts</a></li>
</ul>
</nav>
</header>
<main>
<section id="posts">
<article class="post">
<h3>Post title 1</h3>
<p>Post content 1</p>
</article>
<article class="post">
<h3>Post title 2</h3>
<p>Post content 2</p>
</article>
</section>
<aside>
<h2>Best posts</h2>
<ul>
<li href="#">Best post 1</li>
<li href="#">Best post 2</li>
<li href="#">Best post 3</li>
</ul>
</aside>
</main>
<footer>
<p>2024 © Dev Post</p>
<address>
<a href="mailto:[email protected]">[email protected]</a>
</address>
</footer>
</body>
</html>
Section com articles ou Articles com sections?
Nessa nossa estrutura HTML, cada <section> pode englobar um conjunto de tags <article>. Existem estilos de desenvolvimento que preferem pensar no oposto, cada <article> englobando um conjunto de tags <section>.
Independente da sua escolha, o importante é manter uma mesma convenção em todos os seus projetos. E caso estiver em uma empresa, seguir o padrão usado nela.
Esse artigo abordou
- Uso da tag
<nav>
- Uso da tag
<main>
- Uso da tag
<aside>
- Uso da tag
<footer>
- Uso da tag
<section>
- Uso da tag
<article>
- Uso da tag
<address>
- Estrutura HTML Semântica
Autor
Daniel Nogueira
https://www.linkedin.com/in/udanielnogueira/