Já faz um bom tempo desde o lançamento do HTML 5, e uma das mudanças mais evidentes nele foi a ênfase no princípio da separação de interesses, agora o HTML apenas representa a estrutura da página e não tem mais nada a ver sobre como ela é estilizada, afinal isso é algo que deveria ser feito pelo CSS e não por ele. Sendo assim, o grande glamour do HTML a semântica.

E infelizmente ainda existem muitos desenvolvedores que não se preocupam se o seu HTML está escrito de forma semântica ou não.

Seus motivos variam desde iniciantes que não enxergam uma mudança na tela e portanto não entendem a diferença entre uma tag e outro, até desenvolvedores mais experientes que não o fazem por preguiça.

Por isso hoje vamos falar sobre 3 motivos para você começar a escrever HTML semântico.

1. Legibilidade

O primeiro motivo é que o seu código se torna bem mais legível o que torna a manutenção futura dele mais fácil tanto para você que o escreveu quanto para outras pessoas que eventualmente possam mexer com ele. Semântica é o significado que algo tem, logo um código que escrevemos utilizando o HTML semântico, consegue passar muito mais fácil a intenção que nós temos ao escrever ele. Tome como exemplo o seguinte HTML:

<div class="header">
  <div class="brand"></div>
  <div class="navigation"></div>
</div>
<div class="main-content">
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
</div>
<div class="footer">
  <div class="copyright"></div>
</div>

E então compare com o mesmo código em sua versão semântica:

<header>
  <h1></h1>
  <nav></nav>
</header>
<main>
  <section></section>
  <section></section>
  <section></section>
</main>
<footer>
  <p></p>
</footer>

Mesmo sem as classes, é muito mais fácil identificar as diferenças entre as áreas do site apenas lendo o nome das tags utilizadas.

Um dos melhores exemplos de como isso pode ser utilizado ao seu favor como desenvolvedor é o framework PicoCSS que se baseia praticamente só nas tags para a estilização, não tendo quase nenhuma classe.

2. Acessibilidade

O principal benefício de se utilizar HTML semântico é a acessibilidade que nós ganhamos por padrão só de escrever o código dessa forma, assim pessoas que tem deficiências visuais por exemplo podem navegar e acessar o conteúdo de nossos sites de forma muito mais amigável através de programas de leitores de tela.

Alguns exemplos de como isso pode ajudar essas pessoas são:

• Navegar diretamente pelas tags hn (h1, h2, h3…) do site e pela hierarquia delas;
• Em imagens que possuem o atributo alt, elas podem receber uma descrição textual do que teria naquela imagem;
• Ser capaz de navegar pelo site pulando de link em link;
• Saber quantos itens tem em uma lista;
• Facilita a navegação em data-tables;
• Saber que algo é clicável ao se utilizar a tag button ou a tag a;

3. SEO

Por fim mas não menos importante temos a melhora no SEO, afinal o HTML semântico ajuda a melhorar a acessibilidade do site pois com estruturas (tags) diferentes para cada coisa, facilita a análise que programas de tecnologias assistivas podem fazer do código do site e assim informar com mais precisão ao usuário final o que está na frente dele. E o mesmo vale para as search engines como o Google por exemplo, que se utilizam desses mesmos mecanismos para indexar um site nos rankings de busca, logo um site semântico tem mais chances de ser indexado nas primeiras páginas por esses mecanismos de busca.

Obrigado a você que leu até aqui, e não esqueça de comentar ai em baixo, já conhecia esses argumentos? Vai começar a escrever o HTML de forma mais semântica? Ou já escrevia ele antes de ler este artigo? Conta para gente aqui na seção de comentários e até a próxima.