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.

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