Escrevendo HTML Semântico

Agora que já sabemos que o HTML é a espinha dorsal de qualquer website, é através dele que conseguimos estruturar nossas páginas e tornar nosso site mais visível, para que os navegadores possam indexá-lo de forma favorável e apresentá-lo em mais buscas relacionadas. E para isso, existem as boas práticas em HTML, que ajudam a evitar que o usuário tenha uma experiência ruim com seu site e a garantir que ele seja localizado nos resultados de busca dos motores de busca.

As boas práticas em HTML são regras que ajudam seu código a ser escrito de forma mais fácil de ler, entender e manter. O HTML semântico oferece diversos benefícios. Além de ajudar nos resultados de busca dos motores de busca, que priorizam páginas bem estruturadas e em conformidade com os padrões de SEO, o conteúdo se torna mais acessível para pessoas que utilizam tecnologias assistivas para navegar na internet. Por último, mas não menos importante, isso facilita a compreensão e a manutenção do código, uma vez que todos os elementos estão claramente definidos.

Principais dicas para melhorar a eficiência

1. Header: A tag <header> é responsável por demarcar a área inicial, ou seja, o cabeçalho do seu site. É onde podemos alocar um título ou logo e até mesmo uma navbar, que serve para os links de navegação da sua página.

2. Nav: Como mencionado acima, a tag <nav> é usada para demarcar uma seção específica para os links de navegação do seu site. É importante ressaltar que também ajuda os motores de busca a entender como seu site está dividido.

3. Main: Essa tag é bastante importante, pois é responsável por comportar o conteúdo principal da sua página. Utilizar a tag <main> pode deixar mais claro para os motores de busca qual é o tema e conteúdo do seu site.

4. Article: A tag <article> é usada geralmente para delimitar o conteúdo de uma página de artigo, uma postagem de blog ou uma documentação breve. Dentro dela, devem ser inseridos conteúdos significativos e independentes, podendo abrigar outras tags como cabeçalhos, parágrafos, imagens e outros.

5. Aside: <aside> é uma tag usada geralmente para marcar conteúdo relacionado ao conteúdo principal da página, mas que não faz parte integral dela. Pode conter informações complementares, artigos relacionados e até propagandas.

6. Section: A tag <section> é muito utilizada para delimitar seções dentro da página, que são geralmente agrupadas por temas. Podemos pensar nela como o capítulo de um livro, composto por diversas informações que se correlacionam e se complementam em um artigo maior.

7. Footer: Essa tag é bastante conhecida e seu valor semântico continua sendo imprescindível. O <footer> é essencial para abrigar informações necessárias para a página, como informações de contato, links para redes sociais e informações de direitos autorais, que são essenciais para qualquer empresa ou produto que funcione no meio digital.

É claro que existem diversas outras formas de desenvolver sem utilizar essas tags, mas elas estão aqui para ajudar a melhorar nossa forma de desenvolvimento. Sempre que você estiver criando um documento em HTML, tente pensar em como pode tornar o código o mais semântico possível. Tenho certeza de que isso vai ajudar bastante.