O poder da semântica em aplicações Web - parte 1
Tags: html, webdev, codequality, frontend
Published: 2020-10-21 21:09:45

![Uma representação do poder da semântica, simulando uma tag HTML. Abre com o símbolo "<", logo após é o desenho de um punho negro cerrado com estrelas - demonstrando a ideia de poder, e por último utilização dos símbolos "/" e ">" simulando o fechamento de uma tag HTML](https://dev-to-uploads.s3.amazonaws.com/i/lz0f89gm3y0zimbjmifd.png)
## Um olhar sobre o HTML

Esse é um artigo baseado em uma [palestra](https://www.slideshare.net/GiselyLucas/o-poder-da-semntica-em-aplicaes-web-um-olhar-para-o-html) que eu fiz para o TDC de São Paulo - 2020, na Trilha Web/Front-end. O foco principal, é trazer um olhar para entender melhor o HTML e o motivo de se olhar para a semântica em aplicações Web.
Convido você a continuar a leitura e entender melhor sobre o HTML e como podemos melhor a semântica e as nossas aplicações, em diferentes aspectos.

## O que é o HTML?

HTML, ou HyperText Markup Language, é uma linguagem de marcação para hiperTexto que define um significado e cria uma estrutura para conteúdos na Web. Os conteúdos criados utilizando o HTML são usados pelos navegadores para renderizar as páginas web, baseando a criação do DOM conforme as marcações definidas dentro desse conteúdo.

O HTML cria marcações no conteúdo, permitindo a definição e formatação de texto, imagens, links, dentre outros. Essas marcações são conhecidas como "elementos" ou "tags"

```
<html> <head> <body> <p> <a> <img> <footer> <title> <video>
```
#### Revisão rápida :bulb:
> Uma marcação possui uma palavra chave que está entre os símbolos "<" e ">" e pode ter atributos que são características que podem modificar ou personalizar esse elemento. Podemos ter tags de abertura, fechamento e tags sem retorno (ou fechamento automático). 
> A diferença entre elementos de abertura/fechamento e sem retorno é que elementos _sem retorno_ não permitem que outros elementos sejam adicionados como elementos filhos dele, mas os elementos de abertura iniciam um bloco de hierarquia e os de fechamento, finalizam o bloco aberto.
> ```
<body> abertura
   <img src="image1.jpg" /> sem retorno
</body> fechamento
```

A utilização correta dos elementos e estruturação dos mesmos influência diretamente na construção do DOM por parte dos navegadores. Os conteúdos gerados com HTML puramente são páginas estáticas sem estilo, para modificar o estilo e criar comportamentos utilizamos modificadores como JS e CSS.

## Qual o motivo de se falar de semântica do HTML?
Poderia colocar vários motivos, mas pra mim os principais são:
### Acessibilidade
![Desenho de uma janela de um navegador com o símbolo de acessibilidade ao centro](https://dev-to-uploads.s3.amazonaws.com/i/3lammb112m0fg61bc7am.png)
Sim, isso mesmo, acessibilidade digital está muito ligada a semântica do HTML, mas por quê?

As marcações do HTML são conhecidas pelos navegadores e elas possuem um significado e comportamento pré-estabelecido, ou seja, quando utilizamos uma tag, o navegador entende qual é o significado da mesma e cria comportamentos e estilos de forma automática, para o conteúdo dessa tag, reduzindo a manipulação e modificação do DOM, que é algo muito custoso.

Acessibilidade Digital está muito ligada a desenvolver aplicações utilizando as boas práticas. Sabendo disso, muitos comportamentos e informações necessárias podem ser simplificadas utilizando apenas as tags corretas do HTML para cada tipo de conteúdo.
Por exemplo:
* Podemos ampliar a área de toque de campos em formulário:
```
<input type="checkbox">
<label for="text-id">
  Aceito os textos e condições
</label>
```
Associando um elemento label a um input, os navegadores automaticamente permitem que ao usuário clicar na label, o input receba o foco/seja selecionado.

### SEO
![Desenho de uma janela de um navegador com a escrita SEO ao centro, e um ícone de lupa ao final da janela](https://dev-to-uploads.s3.amazonaws.com/i/3flcb7hhegx83fyzfotn.png)
O SEO, Search Engine Optimization, é uma otimização para mecanismos de busca. O SEO possui uma série de técnicas para otimização, permitindo que os sistemas de busca consigam indexar e definir um ranking das páginas publicadas na web.
Está bem, mas o que a semântica do HTML tem a ver com o SEO?
Uma das técnicas que são utilizadas busca informações baseadas em tags, por exemplo: 
* Título e Meta descrição;
* Heading tags;
* Imagens;
* URLs;
Lembre-se os motores de busca não visualizam o estilo e o comportamento da sua página, ou seja, se você definiu um título apenas de forma visual, sem utilizar as tags corretas para isso, o seu título não é um título para o motor de busca, o mesmo acontece para links, imagens, dentre outros.

Você pode estar perdendo visualizações, simplemente por não possuir uma boa semântica do HTML.

Para saber mais sobre SEO, recomento o post [O que é SEO?](https://rockcontent.com/br/blog/o-que-e-seo/) do blog da RockContent.

### Código limpo
![Desenho de uma janela de um navegador com as os símbolos "</>" com estrelas](https://dev-to-uploads.s3.amazonaws.com/i/lpkhd2td5dvp4ilpz53g.png)
* *Narrativa*
* *Simplificação*
* *Fácil Manutenção*
* *Redução de Bugs*

Sim, isso mesmo, esses quatro itens podem ajudar a entender a relação entre a semântica e a codificação limpa.
Mas Gisely, HTML não é uma linguagem de programação. De fato, isso é verdade, mas podemos aproveitar algumas das definições utilizadas em programação para melhorar o desenvolvimento das nossas estruturas em HTML.

Uma delas é a narrativa da nossa página. Sim, utilizando os elementos corretos, é fácil identificar o que faz parte do cabeçalho, do rodapé, de alguma sessão específica do seu documento, e entender a estrutura e ordem que esses elementos vão aparecer na tela.

Outro item é a simplificação, eu não vou precisar utilizar muitos elementos HTML ou criar muitos comportamentos adicionais em modificadores para que o conteúdo aparece em uma determinada área da tela ou tenha um comportamento/estilo específico, aumentando a complexidade do meu código.

Um outro item importante é a manutenção, conhecendo a narrativa e a estrutura da nossa página, fica fácil fazer ajustes em pontos específicos, sem precisar daquele entendimento inicial sobre: "Onde que está aquele botão de logar?", Se eu sei que existe um bloco para o Login, eu preciso apenas ir até o bloco e fazer as modificações necessárias.

E para finalizar, a tão sonhada "Redução de Bugs" ligados a estrutura do HTML, juntando todos os itens acima é possível perceber que bugs serão reduzidos, pois alterações e até a identificação de possíveis problemas na estrutura HTML se torna mais assertiva e direta.

***

Não quero extender muito esse artigo, por isso vou quebrá-lo em duas partes. Na parte 2, vamos entender melhor sobre os elementos, principais utilizações e como aproveitar o máximo dos recursos do HTML em aplicações web.

Comenta o que você achou, se concorda, discorda, o que você complementaria. 
Ahh e não deixe de compartilhar e curtir ;)

Um grande abraço.