<div>
<div>
<div>
Eu não possuo valor semântico!
</div>
</div>
</div>
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:
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 –>
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.
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)