A IMPORTANCIA DAS TAGS SEMÂNTICAS NA SUA APLICAÇÃO WEB!

Se você iniciou agora no mundo da tecnologia certamente já ouviu que um dos caminhos mais fáceis de se inserir neste mundo é por meio da programação Web e logo conhece o famoso HTML5.

ENTENDENDO SÓ UM POUQUINHO DE HTML5

HTML5 é uma linguagem amplamente utilizada para criar páginas web. É responsável por estruturar o conteúdo do site, incluindo textos, imagens, links e outros elementos visíveis para os usuários.

As marcações HTML5, também conhecidas como tags, permitem definir a estrutura e o significado dos elementos presentes em uma página. Cada tag possui uma finalidade específica e é usada para representar diferentes tipos de conteúdo. Por exemplo, a tag <h1> é usada para definir um título principal, a tag <p> é usada para parágrafos de texto e a tag <img> é usada para inserir imagens.

Ao usar o HTML5 de forma correta, você pode criar páginas web bem estruturadas e de fácil compreensão. Isso não apenas facilita a manutenção do código, mas também melhora a experiência dos usuários ao navegar pelo site.

Lembre-se de que o HTML5 é apenas uma parte do desenvolvimento web. Para estilizar as páginas e adicionar interatividade, você também pode utilizar CSS e JavaScript.

O QUE SÃO AS TAGS SEMÂNTICAS?

Antes de responder essa pergunta devemos entender o que essa palavra significa.
Semântica: Relativo a significado, ao significativo, "igual ao significado de algo".

Para ficar mais fácil de entender vou dar um exemplo simples:
Se você quisesse descrever alguém que colocou uma fotografia dentro de algum lugar, provavelmente, diria que o tipo de recipiente onde ela se encontra é um porta-retrato.

A tag semântica é um recipiente para um tipo de conteúdo específico. Por exemplo, a tag é uma marcação para o cabeçalho de uma página, então seria errado colocar um conteúdo de rodapé nele.

MAS POR QUE É TÃO IMPORTANTE?

Existem quatro motivos que, para mim, são muito importantes para estudar e seguir as regras semânticas do HTML5.

Legibilidade do seu código:

Provavelmente, se você escreveu seu código, vai ser mais fácil para você entender depois a estrutura que criou. Mas é bom ter em mente que outras pessoas vão ler ou até mesmo dar manutenção nesse código e precisam entender da forma mais fácil possível como esse código foi criado e suas propriedades.

Mecanismo de busca:

A semântica é importante para a indexação por mecanismos de busca, pois ajuda os robôs do mecanismo a entender melhor o conteúdo do seu site. Isso é uma técnica utilizada para o SEO (Search Engine Optimization).
Programas de leitura de sites: É sempre bom ter em mente que hoje a internet quebrou a barreira que tinha com as pessoas com deficiência e isso é um ponto que sempre deve ser levado em consideração na hora de "codar" o seu site. As tags semânticas auxiliam os programas de leitura de sites utilizados por pessoas com deficiências visuais. Assim, você consegue atender a todos os públicos que têm interesse na sua página web.

Demonstração de domínio:

Saber utilizar corretamente as Marcações Semânticas também é uma prova de que você possui um bom domínio das tags e sabe usá-las e aplicá-las corretamente, o que será bem visto por seus colegas de equipe.

CONCLUSÃO FINAL

Deixar de utilizar a influência semântica das tags na busca na internet pela sua página web, na manutenção do código por outros programadores e na acessibilidade para pessoas com deficiências visuais é um erro. Por isso, é importante seguir esses bons costumes desde cedo no mundo da programação web. Esse conhecimento em tags dará muita maturidade ao seu projeto, deixando-o muito bem estruturado para todos que tiverem acesso a ele.

EXTRA!

Para demonstrar minha gratidão por você ter chegado até aqui, vou te poupar um pouco do trabalho de ter que pesquisar e deixei um bônus com algumas tags principais para você!

1. <header> - Representa o conteúdo introdutório ou cabeçalho de uma tag de seção.
2. <nav> - Representa um agrupamento de links utilizados para navegar para páginas ou partes da mesma página.
3. <main> - Representa o conteúdo relacionado ao tema principal da página ou a parte principal da aplicação.
4. <aside> - Representa um conteúdo que tem relação com os conteúdos ao seu lado.
5. <section> - Representa um agrupamento temático de um conteúdo, normalmente com um título usando as tags <h1> até <h6>.
6. <article> - Representa um conteúdo completo que pode ser utilizado sem dependências.
7. <footer> - Representa o conteúdo final/rodapé de uma tag de seção.

Por favor, deixe seu feedback sobre o conteúdo para que eu saiba que estou indo pelo caminho certo!

Obrigado por ter chegado até aqui. Continue seus estudos! Até a próxima!