Trong HTML, một số ký tự đặc biệt như dấu nhỏ hơn (<), dấu lớn hơn (>), dấu & (&) hoặc dấu nháy kép (") có thể gây lỗi khi hiển thị trực tiếp trong nội dung trang web. Để khắc phục điều này, ký tự thực thể (HTML Entities) được sử dụng để thay thế các ký tự đặc biệt, giúp trình duyệt hiển thị đúng nội dung mà không ảnh hưởng đến mã nguồn.
Ví dụ: Thay vì viết <, ta sử dụng <, hoặc thay vì >, ta dùng >. Việc hiểu và áp dụng ký tự thực thể sẽ giúp bạn viết mã HTML chuẩn hơn, tránh lỗi và cải thiện khả năng hiển thị nội dung.
Ký tự thực thể là gì ?
Ký tự thực thể là những ký tự không thể nhập trực tiếp từ bàn phím, chẳng hạn như ➕, ❤, ∰ và nhiều ký tự đặc biệt khác. Để hiển thị những ký tự này trong HTML, chúng ta sử dụng mã thực thể thay vì nhập trực tiếp. Điều này giúp đảm bảo nội dung hiển thị đúng trên trình duyệt mà không gây lỗi mã nguồn.
Một ký tự thực thể có thể được xác định dựa theo một trong hai cú pháp như sau:
&name;&#number;Ví dụ:
Để hiển thị ký tự © thì chúng ta có thể viết là © hoặc ©
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<meta charset="utf-8">
</head>
<body>
<h1>©</h1>
<h1>©</h1>
</body>
</html>Các ký tự thực thể thường được sử dụng
– Dưới đây là bảng tổng hợp những ký tự thực thể mà chúng ta phải thường hay sử dụng nhất.
| Dấu khoảng trắng | |||
| < | Dấu nhỏ hơn | < | < |
| > | Dấu lớn hơn | > | > |
| & | Dấu và | & | & |
| “ | Dấu nháy kép | “ | “ |
| ‘ | Dấu nháy đơn | ‘ | ‘ |
| ¢ | (Đơn vị tiền tệ) xu | ¢ | ¢ |
| £ | (Đơn vị tiền tệ) bảng Anh | £ | £ |
| ¥ | (Đơn vị tiền tệ) yên Nhật | ¥ | ¥ |
| € | (Đơn vị tiền tệ) euro Đức | € | € |
| © | Bản quyền | © | © |
| ® | Nhãn hiệu đã đăng ký | ® | ® |
Lưu ý: Trong số các ký tự thực thể phía trên thì ba ký tự < > & có thể được xem là quan trọng nhất, nếu muốn hiển thị những ký tự này lên màn hình thì các bạn nên sử dụng theo đúng cú pháp ở phía trên, tuyệt đối không được nhập trực tiếp từ bàn phím, nếu không sẽ xảy ra lỗi ngoài ý muốn (Xem ví dụ)
Danh sách các ký tự thực thể trong HTML
– (1) Các ký tự liên quan đến ký tự Latinh phần 1 [number: 33 – 126]
– (2) Các ký tự liên quan đến ký tự Latinh phần 2 [number: 128 – 255]
– (3) Các ký tự liên quan đến ký tự Latinh phần 3 [number: 256 – 383]
– (4) Các ký tự liên quan đến ký tự Latinh phần 4 [number: 384 – 591]
– (5) Các ký tự liên quan đến dấu bổ nghĩa [number: 688 – 767]
– (6) Các ký tự liên quan đến dấu phụ [number: 768 – 879]
– (7) Các ký tự liên quan đến ký tự của người Hy Lạp & Copt [number: 880 – 1023]
– (8) Các ký tự liên quan đến bảng chữ cái Kirin phần 1 [number: 1024 – 1279]
– (9) Các ký tự liên quan đến bảng chữ cái Kirin phần 2 [number: 1280 – 1327]
– (10) Các ký tự liên quan đến dấu chấm câu [number: 8208 – 8286]
– (11) Các ký tự liên quan đến đơn vị tiền tệ [number: 8352 – 8383]
– (12) Các ký tự nhìn giống chữ [number: 8448 – 8527]
– (13) Các ký tự liên quan đến mũi tên [number: 8592 – 8703]
– (14) Các ký tự liên quan đến toán học [number: 8704 – 8959]
– (15) Các ký tự liên quan đến hộp vẽ [number: 9472 – 9599]
– (16) Các ký tự liên quan đến hình khối vuông [number: 9600 – 9631]
– (17) Các ký tự liên quan đến hình học (toán hình học) [number: 9632 – 9727]
– (18) Tổng hợp một số ký tự khác (đồ họa đẹp) phần 1 [number: 9728 – 9983]
– (19) Tổng hợp một số ký tự khác (đồ họa đẹp) phần 2 [number: 9984 – 10175]
Cách kết hợp ký tự & dấu phụ
Dưới đây là một cái ví dụ minh họa về cách kết hợp ký tự & dấu phụ (các ký tự trong danh sách 5, 6)
| Dấu | Ký tự | Ví dụ | Kết quả hiển thị |
|---|---|---|---|
| ́ | o | ó | ó |
| ̀ | o | ò | ò |
| ̂ | a | â | â |
| ̌ | a | ǎ | ă |
| ̃ | u | ũ | ũ |
| ̉ | u | ủ | ủ |
Nếu muốn hiển thị dòng chữ <h1>ký tự đặc biệt</h1> thì các bạn phải nhập <h1>ký tự đặc biệt</h1> chứ nếu nhập <h1>ký tự đặc biệt</h1> thì nó sẽ hiển thị như một phần tử <h1> Nếu muốn hiển thị dòng chữ thì các bạn phải nhập chứ nếu nhập thì nó sẽ hiển thị một dấu khoảng trắng. |
