DEV Community 👩‍💻👨‍💻

giselylucas
giselylucas

Posted on

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

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

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>
Enter fullscreen mode Exit fullscreen mode

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

Desenho de uma janela de um navegador com o símbolo de acessibilidade ao centro
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>
Enter fullscreen mode Exit fullscreen mode

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

Desenho de uma janela de um navegador com as os símbolos "</>" 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.

Top comments (0)

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠