Desenvolvimento - HTML
Como declarar charset em HTML e outras linguagens
No artigo de hoje vou explicar um pouco como funcionam as tabelas de charset em HTML, também vou mostrar como declarar em diferentes linguagens.
por Ricardo ArrigoniSempre que criamos um código HTML é necessário dizer ao browser o charset específico daquele documento. Mas afinal, o que é esse tal de charset?
Nota: O Charset é o conjunto de caracteres utilizados para escrever o documento.
Abaixo algumas curiosidades sobre o tema:
- Como sabemos, os computadores são um conjunto de números binários(0 e 1).
- A primeira tabela a ser mais utilizada foi a ASCII.
- Nos Estados Unidos eram utilizadas uma tabela com 7 bits ao invés de 8 bits, pois nos EUA não se usam acentos, então ao invés de 256 posições, a tabela possui apenas 128 posições.
Abaixo vamos ver um exemplo da tabela ASCII, com 128 posições:
00 - (NUL) | 28 - (FS) | 56 - 8 | 84 - T | 112 - p |
01 - (SOH) | 29 - (GS) | 57 - 9 | 85 - U | 113 - q |
02 - (STX) | 30 - (RS) | 58 - : | 86 - V | 114 - r |
03 - (ETX) | 31 - (US) | 59 - ; | 87 - W | 115 - s |
04 - (EOT) | 32 -(Espaço) | 60 - | 88 - X | 116 - t |
05 - (ENQ) | 33 - ! | 61 - = | 89 - Y | 117 - u |
06 - (ACK) | 34 - “ | 62 ->/ | 90 - Z | 118 - v |
07 - (BEL) | 35 - # | 63 - ? | 91 - [ | 119 - w |
08 - (BS) | 36 - $ | 64 - @ | 92 - \ | 120 - x |
09 - (HT) | 37 - % | 65 - A | 93 - ] | 121 - y |
10 - (LF) | 38 - & | 66 - B | 94 - ^ | 122 - z |
11 - (VT) | 39 - ‘ | 67 - C | 95 - _ | 123 - { |
12 - (FF) | 40 - ( | 68 - D | 96 - ` | 124 - | |
13 - (CR) | 41 - ) | 69 - E | 97 - a | 125 - } |
14 - (SO) | 42 - * | 70 - F | 98- b | 126 - ~ |
15 - (SI) | 43 - + | 71 - G | 99 - c | 127 -(DELETE) |
16 - (DLE) | 44 - , | 72 - H | 100 - d | |
17 - (D1) | 45 - - | 73 - I | 101 - e | |
18 - (D2) | 46 - . | 74 - J | 102 - f | |
19 - (D3) | 47 - / | 75 - K | 103 - g | |
20 - (D4) | 48 - 0 | 76 - L | 104 - h | |
21 - (NAK) | 49 - 1 | 77 -M | 105 - i | |
22 - (SYN) | 50 - 2 | 78 -N | 106 - j | |
23 - (ETB) | 51 - 3 | 79 -O | 107 - k | |
24 - (CAN) | 52 - 4 | 80 -P | 108 - l | |
25 - (EM) | 53 - 5 | 81 -Q | 109 - m | |
26 - (SUB) | 54 - 6 | 82 - R | 110 - n | |
27 - (ESC) | 55 - 7 | 83 - S | 111 - o |
Outras tabelas
Como sabemos, a web é mundial, com pessoas do mundo inteiro acessando milhões de sites ao mesmo tempo. Quando a bolha da internet explodiu, os profissionais da época pensaram na seguinte coisa: “Será que limitar o acesso ao meu site para um determinado público não é ruim para mim?” EXATO! Justamente por isso foram criadas outras tabelas, tabelas para que diferentes pessoas de diferentes países possam ter acesso ao conteúdo do site. Uma dessas tabelas novas foi a Unicode - UTF-8.
A tabela Unicode suporta mais ou menos 1 milhão de caracteres(muito mais do que as 128 posições da ASCII não é mesmo?). Essa tabela foi criada justamente para ser meio que uma tabela padrão mundial, por isso o número elevado de caracteres, para que pessoas do mundo todo possam identificar todos os caracteres. Por isso hoje em dia a maioria dos sites são feitos em Unicode utf-8.
Como indicar qual tabela usar?
Existem diferentes maneiras em diferentes linguagens de como avisar ao browser qual padrão e tabela ele deve seguir, a mais comum e mais simples é pois meio da metatag Content-type do HTML, basta colocar o código da listagem 1 no HEAD do documento HTML que o trabalho estará feito.
Listagem 1: Metatag Content Type em html 4.1
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>Caso esteja usando o html 5, é possível declarar de uma forma bem parecida com a versão 4.1, mas assim como quase toda nova tag do html 5, podemos declarar escrevendo bem menos :) Listagem 2: Declarando no HTML 5
<meta charset="UTF-8"/>
Se você prefirir, pode declarer o charset via linguagem de programação, abaixo vou mostrar exemplos de como fazer isso em php, asp, python, Perl, Java servlets, jsp.
Listagem 3: Declarando em PHP
header('Content-type: text/html; charset=utf-8');
Listagem 4: Declarando em asp
<%Response.charset="utf-8"%>
Listagem 5: Declarando em Python
print "Content-Type: text/html; charset=utf-8\n\n"
No caso do Perl, podemos usar a mesma solução do Python, inserindo apenas um ponto e vírgula(;) no final da linha;
Listagem 6: Declarando em Perl
print "Content-Type: text/html; charset=utf-8\n\n" ;
Listagem 7: Declarando em Java Servlets
resource.setContentType ("text/html;charset=utf-8");
Listagem 8: Declarando em JSP
<%@ page contentType="text/html; charset=UTF-8" %>
Conclusão
É muito importante lembrar de salvar o seu documento no mesmo formato que você indicou no charset. É extremamente importante que seu site seja visto de maneira correta independentemente do lugar do planeta que ele esteja sendo visualizado.
Espero que tenham gostado e até o próximo artigo. Ricardo Arrigoni - Desenvolvedor Front-end.