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>
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>
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
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)