Deixando o HTML semântico. Saiba a importância e como deixa-lo melhor.
39
1

Deixando o HTML semântico. Saiba a importância e como deixa-lo melhor.

Neste artigo vamos falar sobre a importância de um HTML semântico e como tornar suas aplicações melhores.

David Barbosa
0 min
39
1
Email image

Por quê é tão importante?

Todo mundo quer que seu site seja o primeiro em buscas , né ? Então para deixar o seu SEO(otimização para mecanismos de busca) é muito interessante deixar seu HTML o mais limpo possível para facilitar os "robôs" encontrarem seu conteúdo, além de ajudar a tornar seu conteúdo mais acessível para deficientes.

Divs não são semânticas

Todos adoramos utilizar as famosas divs durante o desenvolvimento. porém elas não irão te ajudar no SEO de sua página, pois elas não significam nada e consequentemente os motores de buscam não irão reportar seu conteúdo e dificulta aos apps que auxiliam deficientes a entender os conteúdos e interagir diretamente em seu conteúdo.

"Oh my god. Como substituir essas divs?" A seguir irei mostrar exemplos práticos para deixar o site semântico.

1. Sempre use meta tags

Meta Tags são tags criadas para mostrar informações sobre a página web: Criador , descrição/objetivos, e palavras-chave sobre o conteúdo que ali será exibido. Exemplo:

Imagem de um bloco de código exemplificando o uso das meta tags em uma página HTML.
Imagem de um bloco de código exemplificando o uso das meta tags em uma página HTML.

Quais vantagens das meta tags?

Além de deixar seu conteúdo no ranking de pesquisas , a criação de uma comunidade de acordo com seu nicho de acordo com seu público-alvo.

PS: Evite criar um "description" maior que 160 caracteres e usar "keywords" que realmente façam sentido afim de não ser prejudicado.

2. Para menu , usamos <nav>

O Elemento nav representa uma seção que aponta para outras páginas ou para outras áreas da página, ou seja, uma seção de navegação. Exemplo:

Dois exemplos do uso da tag Nav: No primeiro exemplo , trata-se de um menu criado por divs e outro exemplo criando um menu via nav, utilizando uma lista não-ordenada(ul).
Dois exemplos do uso da tag Nav: No primeiro exemplo , trata-se de um menu criado por divs e outro exemplo criando um menu via nav, utilizando uma lista não-ordenada(ul).

3. Para cabeçalho, usamos <header>

O elemento header representa um grupo de suporte introdutório onde pode conter alguns elementos de cabeçalho mas também outros elementos como um logo, seções de cabeçalho entre outros. Exemplos:

Email image

4.Para o meio, usamos <main>

Define o conteúdo principal dentro do <body> em sua aplicação. Entende-se como conteúdo principal aquele relacionado diretamente com o tópico central da página ou com a funcionalidade central da aplicação.  

Email image

+Tags que agregam(Bônus)

Article: Desenvolvimento de um bloco de informações.

Aside: Porção de bloco representada para partes laterais.

Footer: Tag que representa o rodapé da aplicação.

Fieldset: Tag usada para agrupar elementos.

Section: Representa uma seção genérica contida em uma aplicação

Sobre a tag <img>(bônus)

Ao usar a tag <img> sempre utilize o atributo Alt(que vem de texto alternativo) contribui significativamente para descrição das imagens apresentas e facilita os aplicativos para deficientes a absorverem esse dado e apresentar ao usuário.

Curtiu? Compartilhe com seus amigos. Aproveita e me segue nas redes sociais:

Instagram | GitHub | Linkedin