Mã hóa kí tự trong HTML (Charset)

Để hiển thị một trang HTML đúng quy cách, trình duyệt web cần phải biết sử dụng bộ kí tự nào (mã hóa kí tự).

Mã hóa kí tự là gì?

ASCII là chuẩn mã hóa kí tự (character encoding) đầu tiên (còn được gọi là bộ kí tự - character set). ASCII định nghĩa 128 kí tự kiểu chữ số: các số từ 0 đến 9, các chữ cái tiếng Anh từ A tới Z và một số kí tự đặc biệt như ! $ + - ( ) @ < >.

ANSI (Windows-1252) là bộ kí tự Windows đầu tiên hỗ trợ 256 kí tự khác nhau. ISO-8859-1 là bộ kí tự mặc định cho HTML 4, cũng hỗ trợ 256 kí tự.

Do ANSI và ISO-8859-1 rất giới hạn, nên HTML 4 còn hỗ trợ cả UTF-8. UTF-8 (Unicode) gồm hầu hết tất cả các kí tự và biểu tượng trên thế giới. HTML5 mặc định dùng bộ kí tự UTF-8.

Thuộc tính charset trong HTML

Việc trình duyệt hiển thị trang HTML bằng bộ kí tự nào được xác định trong thẻ <meta>.

Với HTML 4

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

Với HTML 5

<meta charset="UTF-8">

Nếu trình duyệt phát hiện ISO-8859-1 trên trang web, nó sẽ mặc định chuyển sang ANSI vì ANSI cũng giống ISO-8859-1, ngoại trừ việc có thêm 32 kí tự khác.

Sự khác biệt giữa các bộ kí tự

Bảng dưới đây cho thấy sự khác biệt giữa các bộ kí tự nói trên.

SốASCIIANSI8859UTF-8Mô tả
32khoảng trắng
33!!!!dấu chấm than
34""""dấu nháy kép
35####dấu thăng
36$$$$dấu đô-la
37%%%%dấu phần trăm
38&&&&dấu và
39''''dấu nháy đơn
40((((mở ngoặc kép
41))))đóng ngoặc kép
42****dấu sao
43++++dấu cộng
44,,,,dấu phẩy
45----dấu gạch ngang
46....dấu chấm
47////dấu xổ chéo
480000số 0
491111số 1
502222số 2
513333số 3
524444số 4
535555số 5
546666số 6
557777số 7
568888số 8
579999số 9
58::::dấu phẩy
59;;;;dấu chấm phẩy
60<<<<dấu nhỏ hơn
61====dấu bằng
62>>>>dấu lớn hơn
63????dấu hỏi
64@@@@dấu a còng
65AAAAChữ A viết hoa
66BBBBChữ B viết hoa
67CCCCChữ C viết hoa
68DDDDChữ D viết hoa
69EEEEChữ E viết hoa
70FFFFChữ F viết hoa
71GGGGChữ G viết hoa
72HHHHChữ H viết hoa
73IIIIChữ I viết hoa
74JJJJChữ J viết hoa
75KKKKChữ K viết hoa
76LLLLChữ L viết hoa
77MMMMChữ M viết hoa
78NNNNChữ N viết hoa
79OOOOChữ O viết hoa
80PPPPChữ P viết hoa
81QQQQChữ Q viết hoa
82RRRRChữ R viết hoa
83SSSSChữ S viết hoa
84TTTTChữ T viết hoa
85UUUUChữ U viết hoa
86VVVVChữ V viết hoa
87WWWWChữ W viết hoa
88XXXXChữ X viết hoa
89YYYYChữ Y viết hoa
90ZZZZChữ Z viết hoa
91[[[[mở ngoặc vuông
92\\\\dấu xổ chéo ngược
93]]]]đóng ngoặc vuông
94^^^^dấu mũ
95____dấu gạch dưới
96````dấu huyền
97aaaaChữ a viết thường
98bbbbChữ b viết thường
99ccccChữ c viết thường
100ddddChữ d viết thường
101eeeeChữ e viết thường
102ffffChữ f viết thường
103ggggChữ g viết thường
104hhhhChữ h viết thường
105iiiiChữ i viết thường
106jjjjChữ j viết thường
107kkkkChữ k viết thường
108llllChữ l viết thường
109mmmmChữ m viết thường
110nnnnChữ n viết thường
111ooooChữ o viết thường
112ppppChữ p viết thường
113qqqqChữ q viết thường
114rrrrChữ r viết thường
115ssssChữ s viết thường
116ttttChữ t viết thường
117uuuuChữ u viết thường
118vvvvChữ v viết thường
119wwwwChữ w viết thường
120xxxxChữ x viết thường
121yyyyChữ y viết thường
122zzzzChữ z viết thường
123{{{{mở ngoặc kép
124||||dấu gạch thẳng
125}}}}đóng ngoặc kép
126~~~~dấu ngã
127DEL
128đồng euro
129Không sử dụng
130single low-9 quotation mark
131ƒChữ f thường với dấu móc
132double low-9 quotation mark
133horizontal ellipsis
134dagger
135double dagger
136ˆmodifier letter circumflex accent
137per mille sign
138ŠLatin capital letter S with caron
139single left-pointing angle quotation mark
140ŒLatin capital ligature OE
141Không sử dụng
142ŽLatin capital letter Z with caron
143Không sử dụng
144Không sử dụng
145left single quotation mark
146right single quotation mark
147left double quotation mark
148right double quotation mark
149bullet
150en dash
151em dash
152˜small tilde
153trade mark sign
154šLatin small letter s with caron
155single right-pointing angle quotation mark
156œLatin small ligature oe
157không sử dụng
158žLatin small letter z with caron
159ŸLatin capital letter Y with diaeresis
160no-break space
161¡¡¡inverted exclamation mark
162¢¢¢cent sign
163£££pound sign
164¤¤¤currency sign
165¥¥¥yen sign
166¦¦¦broken bar
167§§§section sign
168¨¨¨diaeresis
169©©©copyright sign
170ªªªfeminine ordinal indicator
171«««left-pointing double angle quotation mark
172¬¬¬not sign
173soft hyphen
174®®®registered sign
175¯¯¯macron
176°°°degree sign
177±±±plus-minus sign
178²²²superscript two
179³³³superscript three
180´´´acute accent
181µµµmicro sign
182pilcrow sign
183···middle dot
184¸¸¸cedilla
185¹¹¹superscript one
186ºººmasculine ordinal indicator
187»»»right-pointing double angle quotation mark
188¼¼¼vulgar fraction one quarter
189½½½vulgar fraction one half
190¾¾¾vulgar fraction three quarters
191¿¿¿inverted question mark
192ÀÀÀLatin capital letter A with grave
193ÁÁÁLatin capital letter A with acute
194ÂÂÂLatin capital letter A with circumflex
195ÃÃÃLatin capital letter A with tilde
196ÄÄÄLatin capital letter A with diaeresis
197ÅÅÅLatin capital letter A with ring above
198ÆÆÆLatin capital letter AE
199ÇÇÇLatin capital letter C with cedilla
200ÈÈÈLatin capital letter E with grave
201ÉÉÉLatin capital letter E with acute
202ÊÊÊLatin capital letter E with circumflex
203ËËËLatin capital letter E with diaeresis
204ÌÌÌLatin capital letter I with grave
205ÍÍÍLatin capital letter I with acute
206ÎÎÎLatin capital letter I with circumflex
207ÏÏÏLatin capital letter I with diaeresis
208ÐÐÐLatin capital letter Eth
209ÑÑÑLatin capital letter N with tilde
210ÒÒÒLatin capital letter O with grave
211ÓÓÓLatin capital letter O with acute
212ÔÔÔLatin capital letter O with circumflex
213ÕÕÕLatin capital letter O with tilde
214ÖÖÖLatin capital letter O with diaeresis
215×××multiplication sign
216ØØØLatin capital letter O with stroke
217ÙÙÙLatin capital letter U with grave
218ÚÚÚLatin capital letter U with acute
219ÛÛÛLatin capital letter U with circumflex
220ÜÜÜLatin capital letter U with diaeresis
221ÝÝÝLatin capital letter Y with acute
222ÞÞÞLatin capital letter Thorn
223ßßßLatin small letter sharp s
224àààLatin small letter a with grave
225áááLatin small letter a with acute
226âââLatin small letter a with circumflex
227ãããLatin small letter a with tilde
228äääLatin small letter a with diaeresis
229åååLatin small letter a with ring above
230æææLatin small letter ae
231çççLatin small letter c with cedilla
232èèèLatin small letter e with grave
233éééLatin small letter e with acute
234êêêLatin small letter e with circumflex
235ëëëLatin small letter e with diaeresis
236ìììLatin small letter i with grave
237íííLatin small letter i with acute
238îîîLatin small letter i with circumflex
239ïïïLatin small letter i with diaeresis
240ðððLatin small letter eth
241ñññLatin small letter n with tilde
242òòòLatin small letter o with grave
243óóóLatin small letter o with acute
244ôôôLatin small letter o with circumflex
245õõõLatin small letter o with tilde
246öööLatin small letter o with diaeresis
247÷÷÷division sign
248øøøLatin small letter o with stroke
249ùùùLatin small letter u with grave
250úúúLatin small letter u with acute
251ûûûLatin small letter with circumflex
252üüüLatin small letter u with diaeresis
253ýýýLatin small letter y with acute
254þþþLatin small letter thorn
255ÿÿÿLatin small letter y with diaeresis

Bộ kí tự ASCII

ASCII dùng giá trị từ 0 tới 31 (và 127) để kiểm soát các kí tự, từ 32 tới 126 cho các chữ cái, chữ số và biểu tượng. ASCII không dùng các giá trị và 128 tới 255.

Bộ kí tự ANSI (Windows-1252)

ANSI giống ASCII với các giá trị từ 0 tới 127, có thêm các kí tự giá trị từ 128 tới 159, giống với UTF-8 ở các giá trị từ 160 tới 255.

Bộ kí tự ISO-8859-1

8859-1 giống với ASCII ở các giá trị từ 0 tới 127, không dùng các giá trị từ 128 tới 159, giống UTF-8 ở các giá trị từ 160 tới 255.

Bộ kí tự UTF-8

UTF-8 giống ASCII ở các giá trị từ 0 tới 127, không dùng các giá trị từ 128 tới 159, giống cả ANSI và 8859-1 ở các giá trị từ 160 tới 255, tiếp nối các giá trị từ 256 với hơn 10.000 kí tự khác.

Quy tắc @charset trong CSS

Có thể dùng quy tắc @charset trong CSS để xác định cách mã hóa kí tự dùng trong tập tin style sheet. Ví dụ dưới đây chọn kiểu Unicode UTF-8 cho trang.

@charset "UTF-8";

Bài trước: Biểu tượng trong HTML

Bài sau: Uniform Resource Locators trong HTML

Thứ Năm, 16/04/2020 14:56
51 👨 6.362
0 Bình luận
Sắp xếp theo