Tableless

Busca Menu

HTML: Encode UTF-8

Seja o primeiro a comentar por

Há uns 7 anos atrás o Diego Eis publicou aqui um artigo sobre o assunto. Vou fazer uma nova abordagem.

Sabe quando sua página troca acentuações por caracteres bem loucos? Este é um problema simples de explicar e vou tentar mostrar as regras que se aplicam quando o browser faz o download de um HTML, como escolher um encode e como usá-lo.

Existem três formas de declararmos o encode do arquivo:

1 – Via cabeçalho HTTP

Content-Type: text/html; charset=utf-8

Esse aí é o cara que manda. Se declararmos o encode no parâmetro charset do Content-Type, as outras duas opções serão ignoradas. Hoje em dia a customização no servidor é praticamente zero por parte do desenvolvedor, pois a maioria dos servers e banco de dados já vem com essa configuração.

2 – Via Meta Tag

<!-- HTML 4 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- HTML5 -->
<meta charset="utf-8"/>

Acredito que a maioria dos desenvolvedores utilizam essa técnica. Muitas vezes já vem nos snnipets que encontramos em nosso editores e ou até mesmo naqueles templates gerados via scaffolding (ex.: yoeman).

É uma boa prática colocar ele logo após a abertura da tag html. Pois se o encode não estiver disponível no cabeçalho da requisição, o browser irá procurar por essa informação nos primeiros 1024 bytes do arquivo. Se ele não encontrar, será utilizado o UTF-8.

Segundo a w3techs.com que é especialista em um monte de pesquisas sobre a web, o formato UTF-8 é utilizado em cerca de 80% das páginas web. Mas vamos falar um pouco mais do UTF-8 depois.

3 – Via XML

<?xml version="1.0" encoding="utf-8"?>

Esse cara só serve para páginas XHTML e deve ser colocado antes do DOCTYPE.

Por que tanto UTF-8?

Em 2014 foi constatado que cerca de 83,6% das páginas web estavam utilizando esse encode. Sua popularização se deu pelo fato dele reconhecer bastante caracteres (tipo uns 65.536).

Tem uma galera por aí usando o ISO-8859-1 por que ele é mais performático chegando á cada caractere pesar metade do seu correspondente no UTF-8. Mas aí você fica com algumas opções de caracteres á menos (você se limita á usar 256 caracteres diferentes. Pouco né?).

Esse segundo encode apareceu nesse mesmo relatório em segundo lugar com 8.3% das páginas. Ele não é uma péssima opção, uma vez que ele cobre todos os caracteres do nosso idioma. Mas se você for trabalhar em uma aplicação com chances de rolar internacionalização, aconselho á usar o UTF-8 pra ter uma transição natural sem maiores problemas.

Bala de Prata?

Tudo isso é muito chato ou demais pra minha cabeça. Quero algo mais simples.

Então tá. Vamos ver…

Você pode ignorar qualquer encode e utilizar entidades HTML.

Escrever Sab&atilde;o garante que o usuário vai ler Sabão e evita que algum navegador por aí mostre na tela Sabão ou Sab�o.

Legal! Quero ver dar errado agora depois dessa!

Mas calma jovem, tudo tem um preço. Dá uma olhada na lista de pontos negativos:

  1. Além de escrever mais caracteres você terá que aprender todas essas entidades (ou a maioria).
  2. Uma “alteraçãozinha de 2 minutos” pra um desenvolvedor que não está muito familiarizado se torna algo com uma certa complexidade desnecessária.
  3. Sua semântica diminui, uma vez que o conteúdo do seu código deixa de ter uma alta facilidade de entendimento.
  4. Isso vai exigir mais caracteres, o que aumenta nem que seja só um pouquinho o tráfego na rede.
  5. Não é uma técnica muito popular devido aos pontos negativos anteriores á esse.
  6. Você corre risco de sofrer bullying no trampo depois de seus colegas lerem teu código.

Eu até sei um ou outro de cabeça, tipo o &ccedil; e o &amp;, mas prefiro mil vezes digitar ç e o &. Mais fácil né não?

Referências:

Publicado no dia