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):
|
1 2 3 4 |
<header> <h1>Tudo sobre os Pé-Grande</h1> <img src="pe-grande.jpg" 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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.
|
1 2 3 |
<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).
|
1 2 3 4 5 6 7 8 |
<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. 😄
<section>
A tag <section> existe para agrupar conteúdos por temas ou assuntos, representando uma seção daquela página do site ou tela do aplicativo.
Pode haver múltiplos elementos <section> por página (afinal, é possível ter várias seções) e eles podem ter seus próprios <header>, <footer> e <aside>.
O interessante é que, por atribuir significado de seção dentro de uma página, o elemento pode conter títulos e subtítulos sem ferir a semântica.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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> |
A polêmica sobre múltiplos <h1> na semântica Web
Existe uma certa polêmica em relação ao uso de múltiplos <h1> em um documento HTML.
Alguns advogam que, se estiver tudo bem contextualizado e semanticamente bem feito, elementos <section> (e <article>, que será visto a seguir) podem conter seus próprios <h1>.
Outros, por sua vez, provavelmente devs da velha-guarda, preferimos usar somente um <h1> e subtitularizar nas demais tags semânticas (como no exemplo mostrado).
Segundo um experimento recente realizado por Neil Patel, pelo menos, a nível de SEO, parece que não faz tanta diferença:
Pelo que os dados mostram, os headings não parecem ter um grande impacto nos rankings.
Pelo que os dados mostram, o Google se preocupa com a usabilidade. Ter tamanhos de fonte diferentes em uma página, ajuda a informar ao leitor quais elementos são mais importantes.
Entretanto, devemos ter em mente que usar tags corretamente (e semanticamente) não é uma prática que traz benefícios somente à SEO, mas aprimora a acessibilidade, usabilidade, e outros — fora o fato de que existem outros mecanismos de busca fora Google que, não necessariamente, encaram os dados da mesma forma.
<article>
O elemento <article> serve para porções do conteúdo que têm seu sentido próprio; é auto-contido.
Em outras palavras, conteúdos que poderiam ser considerados isoladamente da página: se você retirá-los do contexto da página, ainda assim, de alguma forma, eles fazem sentido.
Apesar do que pode sugerir nome, a tag não se destina a ser usada somente em artigos, mas a qualquer conteúdo que possa ser considerado de maneira independente, como um comentário, artigo, widget interativo etc.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<section> <h2>Últimas notícias</h2> <p>...</p> <article> <h3>Cientistas russos vão em busca do pé-grande</h3> <p>A expedição terá início no final de 2020.</p> <a href="#">Saiba mais</a> </article> <article> <h3>O que fazer ao avistar um Pé-grande?</h3> <p>Saiba o que é recomendado fazer ao dar de cada com o dito cujo.</p> <a href="#">Saiba mais</a> </article> <article> <h3>NASA estaria ocultando evidências?</h3> <p>Uma origem improvável, mas possível...</p> <a href="#">Saiba mais</a> </article> </section> |
Web Semântica: <section> x <article>
Muitos ficam em dúvida sobre quando usar <section> e <article> e se é permitido o aninhamento de um dentro do outro.
Depois de conhecer melhor a razão de existir e sentido de ambas, fica mais fácil deduzir que:
- Usa-se uma ou outra tag a depender do sentido/semântica que se quer atribuir
- Não há problema algum em aninhar
<article>em<section>ou vice-versa, desde que faça sentido dentro de uma abordagem semântica
<aside>
<aside> se destina a receber conteúdo relacionado ao contexto em que a tag se encontra. O importante a notar é que se trata de um conteúdo secundário: uma espécie de observação ou complemento; algo tangencialmente relacionado.
Se estiver dentro de uma <section> ou <article>, é relacionado a ela; se for filho imediato de <body>, é um conteúdo relacionado geral e; assim por diante.
Evidentemente, pode haver vários <aside> por página, já que é o conteúdo que vai ditar o uso semântico correto do elemento e, a depender do tópico, vários podem ser necessários.
Dica para saber se é ou não <aside>: pergunte-se “Isso é necessário ou obrigatório para o entendimento do assunto que está sendo tratado?”.
|
1 2 3 4 |
<aside> <p>Assine nossa newsletter para receber notícias sobre o Pé-grande:</p> <form>...</form> </aside> |
Conclusão
No que muitos usam <div> para a divisão de áreas de site e apps, a semântica Web pode ser aprimorada com a simples substituição para tags com mais significado.
Usar tags apropriadas no HTML não é “escovar bits” ou uma questão meramente acadêmica. Desenvolver sites observando diretrizes de uma Web Semântica proporciona melhorias práticas e objetivas.
Esse é somente a pontinha do aicebergue quando o assunto é Web Semântica (Semantic Web), mas se você ainda não usa essas tags (ou as usa de maneira equivocada, comece a atribuí-las a seus sites agora mesmo para ver um ganho considerável em usabilidade, acessibilidade, SEO e muito mais.