Việt1. Giới thiệu
Chào các bạn! HTML Entities là một cách để hiển thị các ký tự đặc biệt trong tài liệu HTML. Khi bạn muốn sử dụng các ký tự không thể nhập trực tiếp trong mã HTML (chẳng hạn như dấu ngoặc nhọn <, > hoặc dấu và &), bạn cần sử dụng HTML Entities để tránh nhầm lẫn giữa ký tự và mã HTML. Các ký tự đặc biệt này được mã hóa bằng cách sử dụng một chuỗi bắt đầu bằng & và kết thúc bằng ;.
Bài viết này sẽ giúp bạn hiểu rõ về cách sử dụng HTML Entities để hiển thị các ký tự đặc biệt và ký tự không in được (non-printable characters) trong HTML.
2. Tại sao cần sử dụng HTML entities?
- Tránh xung đột với mã HTML: Nếu bạn trực tiếp sử dụng các ký tự như
<hoặc>trong HTML, trình duyệt có thể hiểu chúng như là thẻ HTML thay vì ký tự văn bản. - Hiển thị các ký tự không thể nhập từ bàn phím: Một số ký tự đặc biệt không có trên bàn phím thông thường hoặc được biểu diễn dưới dạng mã Unicode cần phải được biểu diễn bằng HTML Entities.
- Cải thiện khả năng truy cập: Khi sử dụng HTML Entities, bạn đảm bảo rằng mọi trình duyệt đều có thể hiển thị ký tự chính xác.
3. Cú pháp của HTML Entities
Cú pháp của HTML Entities bao gồm:
- Tên thực thể: Bắt đầu bằng ký tự
&, tiếp theo là tên của ký tự đặc biệt và kết thúc bằng dấu chấm phẩy;. - Mã số thực thể: Bắt đầu bằng ký tự
&, tiếp theo là dấu thăng#, và mã số của ký tự đó, kết thúc bằng;.
Ví dụ:
- Tên thực thể:
<để hiển thị ký tự< - Mã số thực thể:
<để hiển thị ký tự<
4. Các HTML Entities thường gặp
a. Ký tự đặc biệt
| Ký Tự | Tên Thực Thể | Mã Số Thực Thể | Ký Hiệu Hiển Thị |
|---|---|---|---|
| & | & | & | & |
| < | < | < | < |
| > | > | > | > |
| " | " | " | " |
| ' | ' | ' | ' |
b. Dấu ngoặc và toán tử
| Ký Tự | Tên Thực Thể | Mã Số Thực Thể | Ký Hiệu Hiển Thị |
|---|---|---|---|
| ( | ( | ( | ( |
| ) | ) | ) | ) |
| + | + | + | + |
| - | − | − | − |
| ÷ | ÷ | ÷ | ÷ |
| × | × | × | × |
c. Ký tự dấu cách và ký tự không in được
- Khoảng trắng không ngắt (non-breaking space):
hoặc . Dùng để tạo khoảng trắng mà trình duyệt không thể tự ý ngắt dòng.
Ví dụ:
<p>Xin chào, CodeTutHub!</p>Hiển thị:
Xin chào, CodeTutHub!
d. Các ký tự tiền tệ
| Ký Tự | Tên Thực Thể | Mã Số Thực Thể | Ký Hiệu Hiển Thị |
|---|---|---|---|
| $ | $ | $ | $ |
| € | € | € | € |
| £ | £ | £ | £ |
| ¥ | ¥ | ¥ | ¥ |
e. Các ký tự Latin mở rộng
| Ký Tự | Tên Thực Thể | Mã Số Thực Thể | Ký Hiệu Hiển Thị |
|---|---|---|---|
| á | á | á | á |
| é | é | é | é |
| í | í | í | í |
| ó | ó | ó | ó |
| ú | ú | ú | ú |
| ñ | ñ | ñ | ñ |
5. Sử dụng HTML entities
HTML Entities thường được sử dụng trong các trường hợp:
- Hiển thị mã HTML và mã nguồn trong các bài viết hoặc trang web.
- Hiển thị các ký tự đặc biệt như dấu và
&, dấu lớn>, dấu nhỏ<trong nội dung. - Tạo khoảng trắng không ngắt dòng bằng
trong các nội dung không nên bị ngắt dòng. - Hiển thị các ký tự không có trên bàn phím tiêu chuẩn như ký tự tiền tệ hoặc các ký tự tiếng nước ngoài.
Ví dụ:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sử dụng HTML Entities</title>
</head>
<body>
<h1>HTML Entities Thường Dùng</h1>
<p>Để hiển thị ký tự <code><</code> hoặc <code>></code> trong HTML, bạn cần sử dụng các thực thể như <code><</code> và <code>></code>.</p>
<p>Khoảng trắng không ngắt dòng: "Xin chào, CodeTutHub!".</p>
<p>Hiển thị tiền tệ: Euro €, Dollar $, và Bảng Anh £.</p>
</body>
</html>6. Mã Unicode trong HTML Entities
Ngoài việc sử dụng tên và mã số của HTML Entities, bạn cũng có thể sử dụng mã Unicode để hiển thị các ký tự đặc biệt. Cú pháp này sử dụng &#x (mã hex) để biểu diễn ký tự.
Ví dụ:
❤: Biểu thị ký tự trái tim (❤️)
<p>HTML và lập trình là niềm đam mê của tôi ❤</p>Kết quả:
HTML và lập trình là niềm đam mê của tôi ❤️
7. Kết luận
HTML Entities là một công cụ hữu ích giúp bạn hiển thị các ký tự đặc biệt hoặc các ký tự không thể nhập trực tiếp trong tài liệu HTML. Việc hiểu và sử dụng đúng HTML Entities không chỉ giúp tránh các xung đột giữa mã HTML và nội dung mà còn cải thiện khả năng hiển thị ký tự đặc biệt trên các trình duyệt và thiết bị khác nhau.
Hãy sử dụng HTML Entities trong dự án web của bạn để đảm bảo tính tương thích và chuyên nghiệp khi hiển thị các ký tự đặc biệt và khoảng trắng không ngắt dòng.
