Yoná, por que devo usar HTML semântico?
Depois de algumas pesquisas e estudos, pude analisar que a semântica do HTML influencia diretamente o SEO (Search Engine Optimization) e também colabora para a acessibilidade.
O que é HTML semântico?
HTML significa Hypertext Markup Language, que nada mais é que o “esqueleto” de uma página.
É onde organizamos e formatamos a página, ou seja é a forma como a estruturamos.
O HTML semântico é a forma de deixar o site com suas informações bem explicadas e compreensíveis para o computador, ajudando até mesmo em sua busca no Google e facilitando o entendimento de leitores de acessibilidade.
Com o HTML semântico, ficou muito mais fácil de interpretar páginas.
>>Leitura Recomendada:
Tudo sobre HTML para Front-ends
Mas o que é significa semântico?
Semântica é o estudo do significado e interpretação de palavras. Aplicando isso ao HTML, significa a melhor compreensão do HTML para o computador.
Antes do HTML5, utilizava-se somente divs para dividir conteúdos e classes para estilizar, sem contar com a compreensão do próprio computador para “entender” o HTML.
Isso dificultava que suas respostas fossem passadas para buscas e leitores acessibilidade.
As Tags do HTML Semântico
Hoje, com o HTML5, temos a opção de dividir melhor as tags. E, utilizando o próprio HTML5 semântico, ficou ainda mais simples a compreensão para o computador.
A tag
Por exemplo, temos uma tag específica para o cabeçalho da página, a tag
Não podemos confundir, é claro, com a tag , que é a tag onde inserimos as características da página.
A tag
Temos também a tag , essa tag indica conteúdos laterais, geralmente utilizada para menus laterais.
Essa tag nos ajuda a definir, até mesmo para a própria compreensão do código, os conteúdos tratados nas laterais da página.
Eu, particularmente, acho essa tag excelente, pois os menus laterais costumavam ficar misturados aos principais.
>>Leitura Recomendada:
Meus desafios e evolução como fullstack
A tag
Com a tag , que define seções de conteúdos — seja dentro de um texto ou conteúdo principal, conseguimos dividir melhor esse conteúdo, deixando-o melhor organizado.
Geralmente trabalhamos com um título dentro dessa section, dando ênfase ao conteúdo dela.
Daí você pode me perguntar: “Qual seria a diferença de uma Pois bem, as <section> conseguem separar os conteúdos de forma diferente das Isso ocorre por que, ao passar pela pesquisa do google, algumas informações da página na busca poderiam se perder. Já com a podemos utilizar o mesmo título, pois as A tag , como o próprio nome diz, é um artigo dentro do conteúdo. Pode ser uma citação de textos externos, ou referências, geralmente também usamos um título para essa tag. A tag usamos para menus interativos, como por exemplo menus que encaminham a página de “sobre” ou “produtos”. O >>Leitura Recomendada: A tag é a tag onde colocamos o conteúdo principal da página. Para melhor uso, só devemos ter um por página, onde iremos apontar o conteúdo de maior relevância, sendo textos, imagens, links, etc. Essa tag facilitou muito a compreensão para leitores de tela, já que enfatiza o texto dentro da tag, deixando clara sua importância. A tag Além disso, se por algum motivo a imagem não abrir, haverá uma descrição dela para quem estiver acessando saber sobre o que se trata. Temos também a tag que, como o próprio nome diz, é a tag utilizada para o rodapé da página ou até de rodapé para artigos. Normalmente utilizada para inserir a autoria da página, assim como contatos e data de criação de conteúdos. >>Leitura Recomendada: Além de facilitar a busca de forma orgânica e rankear sua página em mecanismos de busca, o HTML semântico ajuda os leitores de tela para deficientes visuais, facilitando seu compreendimento. Ele, também, deixa seu código mais limpo e mais compreensível, tanto em organização como em facilidade de visualizar uma tag específica só de passar o olho pela tela. Lembrando que, apesar de utilizar o HTML Semântico ser uma boa prática, ainda possuem alguns navegadores que não possuem suporte para o HTML5 e acabam não identificando as tags acima citadas. Para isso, porém, existem algumas soluções como o html5shiv, que é um script responsável por fazer com que os navegadores — que antes não reconheceriam as tags novas do HTML5 — passem a reconhecê-las. O HTML Semântico possui muito mais tags. As que mencionei são as principais e acredito que elas podem nos mostrar como a semântica é importante para uma página, tanto para facilitar a manutenção do código, quanto para a acessibilidade e para pesquisas orgânicas. Espero ter ajudado, até a próxima! >>Leitura Recomendada: Crie um perfil na GeekHunter e receba propostas alinhadas ao seu perfil. São mais de 1000 vagas abertas, inclusive Vagas para Desenvolvedor Front-end. em uma
A tag
A tag
Melhores linguagens de programação para devs iniciantesA tag
A tag
A tag
Sua API não é RESTful: Entenda por quê.Então, por que utilizar o HTML Semântico?
Front-end: a origem e o futuro da área
Geekhunter
Gosta do conteúdo? Assine nossa Newsletter!
