Guia completo para HTML semântico

É 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 da tag <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 da tag <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 de SEO.

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.