O Que É HTML Semântico

Você já ouviu falar sobre HTML semântico?
Ou marcação semântica?

Atualmente, com a evolução do HTML, tornou-se frequente ouvirmos falar
sobre desenvolvimento de HTML semântico.

Isto significa que passamos a usar elementos HTML pelo o que eles são
e deixamos de lado a construção das tags pensando apenas no lado visual.

HTML semântico

O HTML semântico nos leva a produzir uma página web
que tenha um real significado e que não seja feita
apenas para apresentação bonita!

Um elemento semântico ele nos diz claramente o seu significado,
seja para o navegador quanto para o desenvolvedor no qual está
fazendo o código.

Temos por exemplo a tag div.
div é uma tag não-semântica, pois ela não nos diz nada
sobre seu conteúdo! Ela sozinha, não representa nada para nós

Agora, por outro lado, temos a tag table
Table é uma tag semântica pois mesmo sem conteúdo,
nós sabemos que ela é uma tabela, e nos diz isso claramente.

Observe este exemplo, onde primeiro temos um código não-semântico:

1
2
3
4
5
6
7
8
9
10
<html>
  <head>
    <title>Exemplo de página</title>
  </head>
  <body>
    <div id="header">Cabeçalho da página</div>
    <div id="main">Conteúdo principal do site</div>
    <div id="footer">Rodapé</div>
  </body>
</html>

Agora, se formos escrever esse mesmo pedaço de código
utilizando as novas tags do HTML5:

1
2
3
4
5
6
7
8
9
10
<html>
  <head>
    <title>Exemplo de página</title>
  </head>
  <body>
    <header>Cabeçalho da página</header>
    <main>Conteúdo principal do site</main>
    <footer>Rodapé</footer>
  </body>
</html>

HTML Semântico e SEO

O desenvolvimento utilizando essas práticas de
construção de páginas pensando nas tags corretas
tem como benefício também a melhoria no seu SEO.

Isso porque os robôs de buscas conseguirão entender
melhor o que seu site está passando para eles,
com conteúdos organizados e claros!

O site html5 Doctor criou uma imagem muito legal para nos ajudar
a entender qual tag HTML podemos usar para construção:

html5 Doctor - Gráfico de Fluxo sobre qual tag utilizar

Foto de Victor Jordan

Victor Jordan

Engenheiro Front-end no Mercado Livre e pós-graduado em Engenharia de Software pela PUC-MG e formado em Banco de Dados pela Fatec, apaixonado por usabilidade, performance e UX!

LinkedIn Github