7 alternativas à <div> para uma Web mais semântica
Web Semântica (ou Semantic Web) é um assunto muito importante, embora ainda bastante desconhecido (e até negligenciado) pela maioria dos devs.
O conteúdo relacionado à semântica na Web é bastante amplo. Neste artigo, não serão vistos tópicos como o que é web semântica, qual sua importância, como funciona a web semântica, ontologias, Web Semântica e Inteligência Artificial e coisas do tipo.
A abordagem aqui é mais prática e muito mais simples: como aprimorar a semântica de sites simplesmente substituindo determinadas tags sem significado por tags mais condizentes e melhores, que realmente informam/significam alguma coisa.
O uso correto de tags mais semânticas traz benefícios de SEO, acessibilidade, usabilidade e mais. Então, conheça essas 7 alternativas à <div> para uma Web mais semântica.
<header>
A tag <header> representa um cabeçalho que pode conter informações introdutórias contextualizadas.
“Contextualizadas” no sentido de que o significado desse cabeçalho depende do contexto em que ele se encontra: se é filho imediato de <body>, por exemplo, trata-se do cabeçalho geral da página; se está em uma <section> (que será vista mais abaixo), é o cabeçalho dela e; assim por diante.
Exemplificando, se se trata do header da página toda, então pode conter informações mais abrangentes, como logo, seções de cabeçalho, formulário de pesquisa etc.; se estiver dentro de um , por exemplo, é o cabeçalho daquela tag específica.
Exemplo de um cabeçalho geral (de um site fictício):
<header> <h1>Tudo sobre os Pé-Grande</h1> <img src="/images/blog/web-semantica-7-alternativas-div/pe-grande.webp" alt="Foto real de um Pé-grande" /></header><main>
A tag <main> indica qual parte do documento contém o conteúdo principal.
Entende-se como conteúdo principal aquele relacionado diretamente com o tópico central da página ou com a funcionalidade central da aplicação.
Algo importa é que só pode haver 1 tag <main> por documento. A porção do conteúdo principal deve ser única e individual.
Não deverão ser incluídas informações/interações que sejam comuns ao restante do site, como logo principal, informações de copyright, busca etc.
<main> <section> <h2>Características</h2> <p>...</p> </section>
<section> <h2>Teoria evolutiva</h2> <p>...</p> </section>
<section> <h2>Últimas notícias</h2> <p>...</p> </section></main><footer>
<footer> indica qual é o rodapé daquele contexto em que a tag se encontra.
Por exemplo, se for geral da página, pode conter informações de contato, copyright, navegação etc; se estiver dentro de uma <article>, é um rodapé daquele elemento, então, semanticamente, está vinculada a esta seção.
<footer>Tudo sobre os Pé-Grande © | 2020</footer><nav>
A tag <nav>, como indica o próprio nome, representa uma navegação do site.
“Ahh, mas se eu colocar uma lista não-ordenada com links, isso já não é uma navegação?”
Sim, mas, semanticamente, ela pode não ser uma navegação principal ou muito importante da página em questão.
Nem todos os links de um documento devem estar dentro de um elemento <nav>, que é destinado apenas para grupos importantes de links de navegação.
Comumente, existe uma <nav> por documento, mas, dependendo da página, não é errado haver mais (desde que seguindo o conteúdo e sua semântica).
<nav> <ul> <li><a href="#">Inicial</a></li> <li><a href="#">Imagens e vídeos</a></li> <li><a href="#">Notícias</a></li> <li><a href="#">Relate seu avistamento</a></li> </ul></nav>Às vezes, tornar um site mais semântico é questão de envolver conteúdos já existentes com uma nova tag.