Guia completo para HTML semântico
Neste artigo para programadores, aprenda a usar HTML semântico para otimizar o seu site para o SEO. Descubra como o HTML semântico pode melhorar a estruturação do seu conteúdo, torná-lo mais acessível e aumentar sua classificação nos mecanismos de busca.
É possível dividir as tags
em html
em dois tipos: semânticas e não-semânticas.
Tags semânticas
Uma tag
semântica é aquela que tem um propósito bem definido, ou que descreve o tipo do seu conteúdo, um exemplo é apresentado abaixo:
<h1>Título da página</h1>
A tag
<h>
representa um heading
(um título), e o número representa a hierarquia desse título, ou seja, podemos afirmar que o conteúdo dessa tag <h1>
é o título principal da página.
Tags não semânticas
As tags
não semânticas são aquelas que não tem um propósito bem definido, podendo ser utilizadas como uma caixa para posicionar o conteúdo sem adicionar um contexto adicional, pode ser utilizadas para a estilização ou apenas para a organização do código.
Um exemplo de tag
não semântica muito utilizada é a tag <span>
, como visto no exemplo abaixo:
<p>
Exemplo de texto normal, mais <span class="texto-azul">aqui</span> estará estilizado com a classe css "texto-azul".
</p>
No exemplo acima, a tag
<p>
é semântica e delimita um parágrafo, porém a tag
span
serve apenas para poder aplicar a classe texto-azul
na palavra “aqui”, sem modificar o restante do texto.
Quais são as tags semânticas?
Existem muitas tags
semânticas em HTML
, as principais e mais importantes de serem utilizadas são:
<article>
: destaca um conteúdo independente do restante da página.<aside>
: destaca um conteúdo lateral ao conteúdo principal, normalmente um menu ou uma lista de recomendações.<details>
: detalhes extras sobre algum outro elemento contido na página.<footer>
: rodapé da página, mas também pode ser o rodapé de outro conteúdo caso esteja dentro datag
<article>
.<h>
: título da página, podendo ser<h1>
para o título principal e<h2>-<h6>
para subtítulos.<header>
: cabeçalho da página, mas também pode ser o cabeçalho de outro conteúdo caso esteja dentro datag
<article>
.<main>
: o conteúdo principal da página.<nav>
: seção utilizada para navegação, seja na própria página, como um sumário, ou ligando a outras páginas do site, ou até para conteúdos externos;<p>
: delimita um parágrafo.<section>
: marca uma seção específica na página.
Qual a vantagem de utilizar tags semânticas?
Em síntese, utilizar tags
semânticas trazem as vantagens:
- O código fica mais organizado, descritivo e fácil de ser entendido e modificado:
- Ferramentas de acessibilidade podem utilizar essas
tags
para “lerem” seu conteúdo de forma mais compreensiva. - Melhora consideravelmente o desempenho da página nas pesquisas do
Google
, sendo uma importante ferramente deSEO
.
Nas seções abaixo será analisado melhor cada um dos pontos:
O código fica mais organizado, descritivo e fácil de ser entendido e modificado:
Existem tags
semânticas, como por exemplo <main>
, <aside>
, <header>
e <footer>
que funcionam exatamente igual uma tag <div>
, então por que utilizar?
Essas tags
tornam o código mais legível, pois fica fácil ver que o conteúdo dentro da tag
<header>
se trata do cabeçalho da página, por exemplo.
Abaixo temos um simples trecho do código de uma página de um artigo feito sem utilizar tags
semânticas:
<div>
<h1>Título</h1>
</div>
<div>
<div>
<div>
Conteúdo do artigo.
</div>
</div>
<div>Escrito por fulando em 2023.</div>
</div>
<div>Copyright 2023</div>
Agora o mesmo código, porém utilizando tags
semânticas:
<header>
<h1>Título</h1>
</header>
<section>
<main>
<article>
Conteúdo do artigo.
</article>
</main>
<footer>Escrito por fulando em 2023.</footer>
</section>
<footer>Copyright 2023</footer>
Visualmente ambos os códigos produzirão a mesma interface.
Porém, é muito mais simples de se identificar oque é cada parte da interface no código no segundo exemplo, justamente pela utilização das tags
semânticas.
Logicamente nesse exemplo, como são apenas poucas linhas de código, a diferença de tempo para se encontrar não será tão grande, agora em um site real, com centenas de linhas em cada página, é muito fácil de se perder em dezenas de divs
aninhadas.
O HTML semântico torna o site mais acessível
HTML
semântico ajuda na acessibilidade de pessoas que necessitam utilizar alguma ferramente de acessibilidade, como por exemplo leitores de telas.
Essas ferramentas podem utilizas as tags
semânticas para lerem a tela em uma ordem mais compreensiva, lendo o título antes do conteúdo, ou identificando que existe um conteúdo principal destinto de um conteúdo lateral, por exemplo.
Mesmo que visualmente podemos fazer um texto simples ser mais impactante que uma tag <h1>
, é importante utilizar essa tag
para realmente destacar o título da página para tornar o site um pouco mais acessível.
Melhora o desempenho da página nas pesquisas do Google
As tags
semânticas ajudam as ferramentas de pesquisa a entenderem melhor o seu conteúdo.
Entendendo melhor o conteúdo, isso permite que as páginas seja, ranqueadas, melhores do que outras que tenham um conteúdo semelhante, porém confuso aos olhos do robô do Google, por exemplo.
Utilizar as tags
semânticas a jugam os robôs que indexam a internet, pois deixa o conteúdo da página mais estruturado e hierarquizado.
Conclusão
Utilizar tags
semânticas é uma ótima prática que deve ser seguida em todas as situações, pois só trazem vantagens.
Vantagens essas que vão desde agilizar o desenvolvimento, pois torna o código mais fácil de ser lidas até tornar as páginas mais amigáveis a robôs, sejam de indexação de conteúdo até de acessibilidade.