A IMPORTANCIA DAS TAGS SEMÂNTICAS NA SUA APLICAÇÃO WEB!
Tags: web, html, webdev, beginners
Published: 2023-06-27 01:12:16


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.


<h3>ENTENDENDO SÓ UM POUQUINHO DE HTML5</h3>

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.


<h3>O QUE SÃO AS TAGS SEMÂNTICAS?</h3>

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 <header> é uma marcação para o cabeçalho de uma página, então seria errado colocar um conteúdo de rodapé nele.


<h3>MAS POR QUE É TÃO IMPORTANTE?</h3>

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

<h4>Legibilidade do seu código:</h4>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.
<h4>Mecanismo de busca:</h4>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.
<h4>Demonstração de domínio:</h4> 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.


<h3>CONCLUSÃO FINAL</h3>

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.


<h3>EXTRA!</h3>

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!_


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