Por que validar o HTML?
Algumas vezes o que é fundamental acaba passando despercebido e, falando sobre o HTML, esquecer de dar uma última conferida antes de publicá-lo no servidor pode acarretar em um completo desastre. Lembre-se, por exemplo, que é a partir dele que iniciamos o carregamento do JavaScript e CSS da página, indicando para o navegador a localização desses arquivos.
Felizmente, podemos evitar problemas comuns em páginas web, aplicando pequenas rotinas de verificação a esta que é a linguagem base de todo conteúdo publicado na internet. Vejamos aqui algumas sugestões de passos a serem seguidos durante essa última análise.
Declaração do DOCTYPE
O DOCTYPE deve ser a primeira informação contida em um documento HTML e informa para o navegador a versão do HTML que usamos, bem como em quais definições de linguagem aquele documento deve ser interpretado.
No caso do HTML5, o DOCTYPE se resume a uma linha apenas:
<!DOCTYPE html>Para versões mais antigas da linguagem HTML, cuja definição é baseada em DTD, a presença do DOCTYPE permite ao navegador saber qual é o conjunto de elementos válidos que podem ser utilizados no documento. Sendo assim, a ausência dessa declaração pode fazer com que o navegador tente deduzir, baseado na estrutura do documento, qual seria o DOCTYPE ideal, um processo que muitas vezes está sujeito a falhas.
Quando o navegador, principalmente em versões mais antigas, atribui um DOCTYPE errado a página, uma série de erros podem ser desencadeados, afetando até mesmo o comportamento dos scripts nela inseridos.
Utilização de meta tags
A meta tag charset deve ser a primeira adicionada após a abertura da tag HTML. Ela diz para o navegador qual conjunto de caracteres será utilizado pela página.
<meta charset="UTF-8">Já a meta tag responsiva, a viewport, garante que a página será corretamente ajustada às diferentes resoluções de dispositivos como smartphones, tablets, desktops, etc.
<meta name="viewport" content="width=device-width, user-scalable=no">No atributo content indicamos qual o tamanho do dispositivo, usando o atributo width=device-width. Isso impactará diretamente no comportamento da propriedade width, principalmente quando utilizamos porcentagens. Logo após, no atributo user-scalable=no, cancelamos o zoom permitido pelo navegador.
Ao olharmos para a Figura 1, a importância dessa meta tag fica ainda mais clara.
Note na Figura 1 que o mesmo CSS pode gerar diferentes apresentações da mesma página, quando interpretado pelo navegador na presença ou ausência da meta tag viewport.
Estrutura da página
Pode ser que tenhamos contato com documentos HTML que requerem estruturas mais complexas, mas, no geral, todo documento HTML se divide entre um header, main e footer.
header adicionamos as informações iniciais do documento, sendo aqui a área normalmente destinada ao título, navegação, banner, etc. Dentro da tag main incluímos o conteúdo principal, que pode variar de acordo com o propósito da página. Já no footer podemos adicionar informações menos importantes, como sugestões de navegação, copyright da página, etc.
Na Figura 2 vemos a página da hamburgueria dividida nestas seções.
Nesta página o conteúdo principal é o formulário de contato, sendo assim colocamos essa área na tag main. As demais áreas ocupam o header e o footer, conforme dividido geograficamente na Figura 2
Ferramentas de verificação
Existem muitos outros pontos que podemos checar antes de enviar o documento HTML para produção. Alguns deles são difíceis de serem vistos a olho nu. Para isso contamos com ferramentas especializadas.
O validador da W3C garante que a página está com uma estrutura correta, que as tags abertas foram fechadas, etc.
Por fim, o Google Pagespeed, a partir da ferramenta PageSpeed Insights, dá dicas sobre como melhorar a performance da página.
Sugestão de Conteúdo
- DevCast HTML Semântico
- Curso Como otimizar suas páginas web com PageSpeed
- Curso Lazy Load: Carregue páginas rapidamente
- Guia de Carreira Programador Front-End
