Elementos de seção
- O elemento header
- O elemento footer
- O elemento nav
- O elemento article
- O elemento section
- O elemento main
- O elemento aside
O HTML5 introduziu tags novas que permitem marcar seções de conteúdo de forma mais semântica. Com ele, se você
quiser, por exemplo, marcar um rodapé, deve usar a tag <footer>. Antes do HTML5, não havia uma
tag semântica para marcar um rodapé, então a prática mais comum era usar uma <div>. Hoje, com a
introdução dos elementos de seção semânticos do HTML5, a <div> só deve ser usada como um último
recurso.
Qual é a vantagem de ser semântico? Deixar a página web mais compreensível aos leitores de tela e aos motores de busca. Usar tags semânticas é também uma boa prática de SEO. Se os motores de busca entendem melhor a sua página, eles podem interpretar melhor o seu conteúdo, o que é muito benéfico. Se os leitores de tela entendem melhor a sua página, eles podem fornecer mais opções aos seus usuários e melhorar a experiência deles.
Vamos conhecer os elementos de seção a seguir.
Elemento header
O elemento <header> deve ser usado para marcar a introdução do conteúdo de seção ascendente
mais próximo ou para a página como um todo, se for um filho do <body>. Exemplos:
<body>
<header>
<img class="logo" src="logo.png" />
<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/quem-somos">Quem Somos</a></li>
<li><a href="/contato">Contato</a></li>
</ul>
</nav>
</header>
</body><article>
<header>
<h1>Título do artigo</h1>
<time datetime="2019-05-12">12/05/2019</time>
</header>
<p>Conteúdo do artigo.</p>
</article>O elemento footer
O elemento <footer> marca um rodapé. O caso de uso mais comum é o rodapé da página, que deve
ser um elemento filho do <body>, se for um rodapé para a página inteira. Também pode ser um
rodapé de um artigo, seção e outras coisas.
<footer>
Seu site. Todos os direitos reservados.
</footer>O elemento nav
Esse elemento deve ser usado para marcar blocos de navegação principais para o site. Ele pode conter links para
partes da própria página ou para outras páginas. A <nav> usada em um exemplo anterior pode
ser usada como exemplo aqui:
<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/quem-somos">Quem Somos</a></li>
<li><a href="/contato">Contato</a></li>
</ul>
</nav>
Perceba que a <ul> continua sendo necessária. Outro detalhe é o uso do atributo role.
Ele está aí porque é uma boa prática de acessibilidade.
O elemento article
O elemento <article> contém conteúdo independente, que faz sentido sozinho. Exemplos: artigos
ou posts de blog.
<article>
<header>
<h1>Título do post</h1>
<time datetime="2005-04-05">5 de abril de 2005</time>
</header>
<p>Conteúdo do post.</p>
</article>O elemento section
O elemento <section> representa uma seção genérica para agrupar conteúdo tematicamente. Cada
seção deve ter um tema definido, que deve ser colocado em um elemento heading, filho da seção. Uma
<section> pode estar dentro de um <article> e vice-versa.
Apesar da <section> ser mais genérica do que os outros elementos de seção, ela não deve ser
usada como um container de estilo. Para isso, deve ser usada uma <div>. Uma
<section> só deve ser usada se ela tiver um tema bem definido, e os outros elementos de
seção não forem mais adequados para marcar o conteúdo.
Um exemplo é um blog:
<section>
<h1>Blog</h1>
<article>
<header>
<h2>Post 1</h2>
</header>
<p>Conteúdo do post</p>
</article>
<article>
<header>
<h2>Post 2</h2>
</header>
<p>Conteúdo do post</p>
</article>
<article>
<header>
<h2>Post 3</h2>
</header>
<p>Conteúdo do post</p>
</article>
</section>Outro exemplo são as seções de um post:
<article>
<header>
<h1>Viagem pro Canadá</h1>
</header>
<section>
<h2>A decisão</h2>
<p>Conteúdo da seção</p>
</section>
<section>
<h2>A viagem</h2>
<p>Conteúdo da seção</p>
</section>
<section>
<h2>Como estou hoje?</h2>
<p>Conteúdo da seção</p>
</section>
</article>O elemento main
O elemento <main> contém o principal conteúdo de uma página web. Seu conteúdo deve ser único
na página. Assim, conteúdos que se repetem não devem ser colocados dentro dele. Esse elemento só deve ser usado
uma vez na página e não deve ser um descendente de um <article>, <aside>,
<footer>, <header> ou <nav>. Um exemplo é um blog ou um
post de um blog.
Se você está lendo esse tutorial desde o início de forma linear pode estar se perguntando: "Ué, mas você não
disse que um blog não deve ser marcado por uma <section>"? Uma das formas de marcar um blog
é essa, mas não é a única. Se o blog for o conteúdo principal da página, ele deve ser marcado com a tag
<main>.
<main>
<h1>Blog</h1>
<article>
<header>
<h2>Post 1</h2>
</header>
<p>Conteúdo do post</p>
</article>
<article>
<header>
<h2>Post 2</h2>
</header>
<p>Conteúdo do post</p>
</article>
<article>
<header>
<h2>Post 3</h2>
</header>
<p>Conteúdo do post</p>
</article>
</main>O elemento aside
O elemento <aside> contém conteúdo que não está diretamente relacionado ao conteúdo
principal. Muitas pessoas sempre associam esse elemento a uma sidebar. Embora muitas vezes ele acabe sendo
corretamente usado para marcar uma sidebar, ele pode ser usado para marcar qualquer coisa que não esteja
diretamente relacionada ao conteúdo principal.
Imagine uma página de um post. O post em si logicamente é o conteúdo principal da página marcado com
<main>, como você já deve ter imaginado. A página contém uma sidebar com uma caixa de busca e
categorias do blog. Esse conteúdo não tem relação direta com o conteúdo principal da página, que é o post do
blog. Por isso a sidebar deve ser marcada com o <aside>:
<aside>
<form name="search">
<input type="search" name="term" />
</form>
<nav>
<ul>
<li><a href="/blog/esportes/">Esporte</a></li>
<li><a href="/blog/jogos/">Jogos</a></li>
<li><a href="/blog/viagens/">Viagens</a></li>
</ul>
</nav>
</aside>