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.
| ||
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: | ||
| ||
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: | ||
| ||
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: | ||
| ||
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. | ||
| ||
+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: | ||
