O poder da semântica em aplicações Web - parte 1

" simulando o fechamento de uma tag HTML"/>

Um olhar sobre o HTML

Esse é um artigo baseado em uma palestra 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 💡

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

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

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? do blog da RockContent.

Código limpo

" com estrelas"/>

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.

Blog