DEV Community

Cover image for Vem aprender sobre HTML semântico 💜
luysla
luysla

Posted on

Vem aprender sobre HTML semântico 💜

Antes de falar de semântica, vamos conceituar o HTML (Hypertext Markup Language). O HTML é basicamente um arquivo que pode ser lido pelos navegadores, nele podemos definir toda a estrutura de um site e seu conteúdo, seja ele texto, vídeo, imagem etc.
Entāo basicamente usamos o HTML para construçāo de páginas na web 👩‍💻

Entāo o que seria o HTML semântico?
Bem, antes do HTML5 (versāo atual) a estrutura de um HTML era dividida em divs e cada div tinha sua classe.
Entāo se eu quisesse fazer um header (cabeçalho) no meu site seria dessa forma:

<div class="header"> 
...
</div>
Enter fullscreen mode Exit fullscreen mode

Mas essa estrutura dificultava os navegadores na hora da leitura e compreensāo, bem como os leitores de acessibilidade.

Entāo a partir do HTML5 foram criadas as tags semânticas para facilitar na leitura e no processamento das informaçōes contidas na página.
Com o HTML semântico, nosso header (cabeçalho) pode ser descrito com a tag semântica header:

<header>
...
</header>
Enter fullscreen mode Exit fullscreen mode

O header é somente um exemplo de tag semântica, existem aproximadamente umas 100 tags semânticas que podemos usar para ajudar os navegadores a interpretar melhor nosso site.

Confira uma lista dessas tags aqui

Diferença entre o HTML4 e o HTM5 semântico

Lembrando que semântica também pode ser aplicada ao JavaScript e CSS! Veja um pouco aqui

Referências

Meu instagram:
💬 @_dyanadev

Top comments (0)