" 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.
Top comments (0)