DEV Community

Matheus Oliveira
Matheus Oliveira

Posted on

HTML Semântico: DIV nunca mais.

<div>
  <div>
    <div>
        Eu não possuo valor semântico!
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Essa postagem tem o intuito de discorrer sobre a reflexão do que é HTML semântico e o motivo por qual você deveria começar adotá-lo. O título dá uma sugestão radical de que você não deve nunca mais usar DIVs no seu documento HTML, mas irei me contradizer: a missão é usar cada vez menos e de maneira consciente.

Em primeira instância, é importante sabermos o significado de semântica. Na linguística ela possui o seguinte significado:
Significado da palavra semântica
Entretanto, quando falamos de semântica em HTML estamos interessados em saber que finalidade ou função um elemento HTML possui. Por exemplo, o <h1> é um elemento semântico, que fornece um título, ou se preferir "um cabeçalho de nível superior". Essa é sua finalidade, sua função. Você poderia fazer qualquer outro elemento se parecer com um título, como por exemplo:

<span style="font-size: 32px; margin: 21px 0;">Título</span> <!  Não Semântico >
Enter fullscreen mode Exit fullscreen mode

Porém, o elemento <span> é considerado semânticamente neutro, ele não possui um significado, logo não expressa nenhum valor para o navegador. Assim como o <span>, o elemento <div> que costuma ser intensamente usado, também não possui um valor semântico.

É importante que você se acostume a utilizar elementos semânticos, pois o bom desempenho de sua página depende desse fator também. Além do mais que a falta de elementos semânticos causa problemas de acessibilidade. Tornar sua página adaptativa e informativa é crucial para que pessoas com deficiência consigam navegar por ele.

O poder da WEB está em sua universalidade — Tim Berners-Lee

Ademais, um documento HTML com valor semântico forte possui um desempenho melhor em otimização para mecanismos de busca (SEO) e se tornam mais fáceis de manter!

Na minha postagem anterior você consegue achar elementos para substituir o acúmulo de divs que você possuir em seu documento HTML.

Estrutura Básica do HTML

Uma dica para compreender HTML semântico: As tags são responsáveis para dizer ao seu navegador o que ele está renderizando. É um texto? Um título? Um parágrafo? Pergunte a si mesmo "quais elementos melhor descrevem/representam os dados que vou preencher".

Referência
https://developer.mozilla.org/pt-BR/docs/Glossary/Semantics
https://medium.com/adalab/the-importance-of-semantic-html-78e74fb75ff0

Top comments (0)