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 <header>
Por exemplo, temos uma tag específica para o cabeçalho da página, a tag <header>, auxiliando para casos em que você possui uma logo ou nome da página em destaque, ou até mesmo título de artigo.
Não podemos confundir, é claro, com a tag <head>, que é a tag onde inserimos as características da página.
A tag <aside>
Temos também a tag <aside>, 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 <section>
Com a tag <section>, 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 <section> para uma <div>?“
Pois bem, as <section> conseguem separar os conteúdos de forma diferente das <div>, já que para utilizar um título <h1 a h6> em uma <div> não podemos usar o mesmo titulo para varias <div>.
Isso ocorre por que, ao passar pela pesquisa do google, algumas informações da página na busca poderiam se perder.
Já com a <section> podemos utilizar o mesmo título, pois as <section> separam seus conteúdos por seções. Portanto, quando pesquisado em mecanismos de busca, não se perdem informações.
A tag <article>
A tag <article>, 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 <nav>
A tag <nav> usamos para menus interativos, como por exemplo menus que encaminham a página de “sobre” ou “produtos”. O <nav> pode ser usado em qualquer momento na página, onde tenhamos agrupamento de links.
>>Leitura Recomendada:
Melhores linguagens de programação para devs iniciantes
A tag <main>
A tag <main> é a tag onde colocamos o conteúdo principal da página. Para melhor uso, só devemos ter um <main> 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 <figure>
A tag <figure> é utilizada para a inserção de figuras na página. Juntamente com essa tag trabalhamos com o alt, onde descrevemos o que há na imagem, facilitando então a acessibilidade da página, para os leitores de tela.
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.
A tag <footer>
Temos também a tag <footer> 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:
Sua API não é RESTful: Entenda por quê.
Então, por que utilizar o HTML Semântico?
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:
Front-end: a origem e o futuro da área
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.
