Tiếng Việt

Hướng dẫn HTML

Bảng HTML

Danh sách HTML

Liens HTML

Tham chiếu HTML

Tên và giá trị màu HTML

Forms HTML

Phương tiện HTML

Tiêu đề HTML

Bố cục HTML

Đồ họa HTML

API HTML

Linh tinh HTML

Demo HTML

Công cụ HTML

Tài nguyên HTML

HTML - Mã hóa ký tự

Chào mừng các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới thú vị của mã hóa ký tự trong HTML. Là người giáo viên máy tính gần gũi của bạn, tôi sẽ hướng dẫn bạn hành trình này với những giải thích rõ ràng, nhiều ví dụ và một chút hài hước. Hãy chuẩn bị sẵn sàng笔记本 ảo của bạn, và chúng ta cùng bắt đầu nhé!

HTML - Character Encodings

Thuộc tính Charset trong HTML

Trước khi chúng ta đi sâu vào các bộ ký tự khác nhau, hãy cùng thảo luận về cách chúng ta thông báo cho trang web của mình sử dụng哪种编码. Đây là nơi thuộc tính charset của HTML phát huy tác dụng.

Thuộc tính charset thường được đặt trong thẻ <meta> trong phần <head> của tài liệu HTML của bạn. Dưới đây là một ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Trang web tuyệt vời của tôi</title>
</head>
<body>
<h1>Chào mừng đến với trang web của tôi!</h1>
</body>
</html>

Trong ví dụ này, chúng ta đang thông báo cho trình duyệt sử dụng mã hóa UTF-8 (sẽ nói chi tiết hơn sau). Hãy tưởng tượng rằng bạn đang tặng trang web của mình một cặp kính đặc biệt để đọc văn bản chính xác.

Bộ ký tự ASCII

Bây giờ, hãy bắt đầu hành trình của chúng ta qua các bộ ký tự với ASCII, tổ tiên của chúng. ASCII có nghĩa là American Standard Code for Information Interchange. Nó giống như chiếc xe Model T của mã hóa ký tự - cũ nhưng cơ bản.

ASCII sử dụng 7 bit để đại diện cho 128 ký tự, bao gồm:

  • Chữ cái in hoa (A-Z)
  • Chữ cái in thường (a-z)
  • Số (0-9)
  • Dấu câu cơ bản

Dưới đây là một ví dụ đơn giản sử dụng chỉ các ký tự ASCII:

<p>Hello, World! 123</p>

Dòng này sẽ hiển thị hoàn hảo bằng mã hóa ASCII vì nó chỉ chứa các ký tự Latin cơ bản và số.

Bộ ký tự ANSI

Bộ ký tự ANSI (American National Standards Institute) giống như người cousin cool hơn, đa dạng hơn của ASCII. Nó mở rộng ASCII để sử dụng 8 bit, cho phép 256 ký tự. Không gian thêm này được sử dụng cho các ký tự cụ thể của các ngôn ngữ khác nhau.

Tuy nhiên, ANSI không phải là một tiêu chuẩn duy nhất - nó thay đổi tùy thuộc vào cài đặt ngôn ngữ của máy tính. Điều này có thể dẫn đến những tình huống hài hước. Hãy tưởng tượng gửi một lá thư tình bằng ANSI, và máy tính của người yêu của bạn hiển thị nó là hỗn độn vì nó đang sử dụng một bảng mã ANSI khác!

Bộ ký tự ISO-8859-1

ISO-8859-1, còn được gọi là Latin-1, giống như hướng dẫn viên du lịch châu Âu của các bộ ký tự. Nó là một mã hóa 8 bit bao gồm các ký tự được sử dụng trong các ngôn ngữ Tây Âu.

Dưới đây là một ví dụ sử dụng các ký tự ngoài ASCII:

<p>Café Français</p>

Nếu bạn sử dụng mã hóa ISO-8859-1, dòng này sẽ hiển thị đúng với các dấu phẩy. Nhưng hãy cẩn thận - nếu bạn sử dụng mã hóa khác, bạn có thể gặp phải "Café Français" thay vì!

Bộ ký tự UTF-8

Bây giờ chúng ta đã đến với siêu anh hùng của mã hóa ký tự - UTF-8. Nó giống như cây kéo đa năng của các bộ ký tự, có khả năng mã hóa hầu như bất kỳ ký tự nào bạn có thể nghĩ đến.

UTF-8 sử dụng một số byte thay đổi để đại diện cho các ký tự. Điều này có nghĩa là nó có thể xử lý hiệu quả cả các ký tự đơn giản của ASCII (chỉ cần một byte) và các ký tự phức tạp từ các hệ thống viết khác (sử dụng nhiều byte).

Dưới đây là một ví dụ thể hiện sự linh hoạt của UTF-8:

<p>Hello, नमस्ते, こんにちは, مرحبا</p>

Với mã hóa UTF-8, dòng này sẽ hiển thị đúng "Hello" bằng tiếng Anh, Hindi, Nhật Bản và阿拉伯语!

Bộ ký tự ISO

ISO đã phát triển nhiều bộ ký tự khác nhau cho các nhóm ngôn ngữ khác nhau. Hãy tưởng tượng chúng như những bộ công cụ chuyên dụng cho các khu vực cụ thể. Dưới đây là bảng của một số bộ ký tự ISO phổ biến:

Bộ ký tự Mô tả
ISO-8859-1 Ngôn ngữ Tây Âu
ISO-8859-2 Ngôn ngữ Trung và Đông Âu
ISO-8859-3 Ngôn ngữ Nam Âu
ISO-8859-4 Ngôn ngữ Bắc Âu
ISO-8859-5 Chữ Kirin
ISO-8859-6 Ả Rập
ISO-8859-7 Hy Lạp
ISO-8859-8 Do Thái

Bộ ký tự UTF

UTF (Unicode Transformation Format) là giải pháp hiện đại cho mã hóa ký tự. Nó giống như Liên hợp quốc của các bộ ký tự, tập hợp các ký tự từ tất cả các hệ thống viết trên thế giới.

Có ba mã hóa UTF chính:

  1. UTF-8: Mã hóa rộng, tương thích ngược với ASCII.
  2. UTF-16: Sử dụng 16 bit cho phần lớn các ký tự, nhiều hơn cho các ký tự khác.
  3. UTF-32: Sử dụng 32 bit cho tất cả các ký tự.

Dưới đây là bảng so sánh:

Mã hóa Đặc điểm Phù hợp cho
UTF-8 Mã hóa rộng (1-4 byte) Trang web, ngữ cảnh tương thích ASCII
UTF-16 Mã hóa rộng (2 hoặc 4 byte) Hệ điều hành, Java
UTF-32 Mã hóa cố định (4 byte) Các tình huống cần truy cập ký tự nhanh

Trong những năm dạy học của tôi, tôi đã thấy rằng UTF-8 là mã hóa phổ biến nhất và được khuyến nghị nhất cho phát triển web. Nó giống như "vòng một để trị tất cả" trong thế giới mã hóa ký tự.

Để kết thúc, hãy xem một ví dụ thực tế về cách sử dụng UTF-8 trong HTML của bạn:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chào mừng đa ngôn ngữ</title>
</head>
<body>
<h1>Chào mừng đến với trang quốc tế của chúng tôi!</h1>
<p>English: Hello</p>
<p>Spanish: Hola</p>
<p>French: Bonjour</p>
<p>German: Guten Tag</p>
<p>Russian: Здравствуйте</p>
<p>Chinese: 你好</p>
<p>Japanese: こんにちは</p>
<p>Arabic: مرحبا</p>
</body>
</html>

Trang này sẽ hiển thị chính xác các lời chào bằng nhiều ngôn ngữ, thanks to UTF-8 encoding.

Nhớ rằng, việc chọn đúng mã hóa ký tự giống như chọn đôi giày phù hợp cho một hành trình. UTF-8 giống như đôi giày thể thao thoải mái có thể đưa bạn đến bất kỳ đâu, trong khi các mã hóa khác có thể chuyên dụng hơn cho một số địa hình cụ thể.

Như chúng ta kết thúc bài học này, tôi hy vọng bạn đã có được một sự hiểu biết vững chắc về mã hóa ký tự trong HTML. Hãy tiếp tục thực hành, 保持好奇心, và đừng ngại thử nghiệm với các bộ ký tự khác nhau. Chúc các bạn lập trình vui vẻ!

Credits: Image by storyset

Hướng Dẫn Trước:
Mã ISO ngôn ngữ
Hướng Dẫn Tiếp Theo:
HTML - Thẻ không còn sử dụng