Đôi khi bạn muốn gõ các kí tự đặc biệt HTML nhưng chúng lại không phổ biến và không thể gõ bằng bàn phím thông thường như ký hiệu toán học, bản quyền hay tiền tệ,… Bạn có thể sử dụng đến các thực thể HTML (HTML Entities) để chèn chúng vào trang web một cách dễ dàng hơn. Vậy chèn các kí tự đặc biệt HTML như thế nào?
Đọc bài viết sau đây để được giải đáp chi tiết về:
- Kí tự đặc biệt HTML là gì cũng như cách chèn thông dụng
- Tổng hợp bảng phụ lục về các kí tự đặc biệt thường được sử dụng phổ biến trong HTML
Kí tự đặc biệt HTML là gì?
Kí tự đặc biệt là HTML là các kí tự nằm ngoài bảng chữ cái Latinh và bạn không thể gõ chúng bằng bàn phím thông thường. Chúng có ý nghĩa đặc biệt trong HTML và được hiển thị dưới dạng một ký hiệu cụ thể, như mũi tên hoặc dấu trọng âm trên một chữ cái.
Mỗi kí tự đặc biệt được gọi là một Entity (thực thể) và mỗi thực thể đều bao gồm tên và số đại diện cho thực thể đó.
Cách chèn các kí tự đặc biệt HTML
Khi chèn các ký hiệu, bạn có thể thực hiện bằng cách sử dụng HTML Entity là các chuỗi kí tự đặc biệt bắt đầu bằng dấu & và kết thúc bằng dấu chấm phẩy ;
Các thực thể này đại diện cho ký hiệu cụ thể và được xác định bằng tên hoặc số của thực thể đó. Các số có giá trị ở cả định dạng thập phân và thập lục phân.
Ví dụ, bạn muốn chèn ký hiệu bản quyền vào HTML, có thể thực hiện bằng cách sử dụng cú pháp của thực thể là © hoặc © (Entity Number). Lưu ý bổ sung ký hiệu thăng # trước các Entity Number.
<!DOCTYPE html> <html> <head> <title>HTML Character entities</title> </head> <body> <p>Euro €</p> <p>Cent ¢</p> <p>Copyright ©</p> <p>BLACK DIAMOND SUIT ♦</p> <p>TRADEMARK ™</p> </body> </html>
Kết quả hiển thị:
Để có thể kết hợp nhiều thực thể trong đoạn mã HTML, bạn có thể tùy chọn nhập chúng theo cách thủ công hoặc sao chép từ các bảng tổng hợp sẵn có như ITviec cung cấp dưới đây.
Tuy nhiên, có một số trình duyệt cũ hơn sẽ không thể định dạng các tên thực thể. Do đó, để các kí tự đặc biệt được hiển thị chính xác trên trang web, bạn nên sử dụng số thực thể (Entity Number).
Tổng hợp “tất tần tật” các kí tự đặc biệt HTML phổ biến
Kí tự phổ biến
Đây là những kí tự đặc biệt phổ biến được sử dụng trong HTML, trình duyệt sẽ phân tích chúng dưới dạng mã HTML và hiển thị trên trang web đến với người dùng.
Một số kí tự phổ biến như:
| Ký hiệu | HTML Entities | Công dụng |
| & | & | Bắt đầu của một thực thể HTML hoặc kí tự đặc biệt |
| < | < | Phần đầu của thẻ (mở thẻ) |
| > | > | Phần kết thúc của thẻ (đóng thẻ) |
| “ | " | Được hiểu là phần đầu và phần cuối của giá trị thuộc tính |
| | Được hiểu là khoảng trắng cố định, hay còn gọi là non-breaking space | |
| – | – | Dấu gạch ngang (một nửa chiều rộng của đơn vị em) |
| – | — | Dấu gạch ngang (bằng chiều rộng của kí tự “m”) |
| © | © | Dấu hiệu bản quyền |
| ® | ® | Dấu hiệu đã đăng ký |
| ™ | ™ | Dấu hiệu của thương hiệu |
| ° | ° | Ký hiệu của nhiệt độ (độ C) |
Kí tự tiền tệ (Currencies)
Một số loại tiền tệ có kí tự HTML riêng mà bạn có thể sử dụng để hiển thị trên trang web của mình, cụ thể như sau:
| Ký hiệu | HTML Entities | HTML Entity Number | Công dụng |
| £ | £ | $ | Biểu tượng của bảng Anh |
| € | € | € | Biểu tượng của đồng Euro |
| $ | $ | £ | Biểu tượng của đồng Dollar |
| ¥ | ¥ | ¥ | Biểu tượng của đồng Yên |
| ¢ | ¢ | ¢ | Ký hiệu Cent |
| ¤ | ¤ | ¤ | Ký hiệu chung của tiền tệ |
Ký hiệu toán học (Mathematical)
Nếu bạn thiết kế một trang web về lĩnh vực giáo dục, đặc biệt là Toán thì chắc hẳn không thể thiếu những ký hiệu chuyên môn về môn học này.
Trong HTML cũng có danh sách những kí tự đặc biệt về Toán học giúp bạn dễ dàng lập trình và hiển thị chúng trên website như sau:
| Ký hiệu | HTML Entities | HTML Entity Number | Công dụng |
| – | − | ||
| + | + | + | Dấu cộng |
| ± | ± | ± | Ký hiệu cộng trừ |
| x | × | × | Dấu nhân |
| ÷ | &divine; | ÷ | Dấu chia |
| % | % | Phần trăm | |
| ‰ | ‰ | Phần nghìn | |
| ≈ | ≈ | ≈ | Dấu gần bằng |
| ≠ | ≠ | ≠ | Dấu không bằng nhau |
| ≤ | ≤ | ≤ | Nhỏ hơn hoặc bằng |
| ≥ | ≥ | ≥ | Lớn hơn hoặc bằng |
| ∞ | ∞ | ∞ | Ký hiệu vô cực |
| ⅛ | ⅛ | Một phần tám | |
| ¼ | ¼ | ¼ | Một phần tư |
| ⅜ | ⅜ | Ba phần tám | |
| ½ | ½ | ½ | Một phần hai |
| ∫ | ∫ | ∫ | Dấu tích phân |
| ∂ | ∂ | ∂ | Vi phân từng phần |
| ∆ | ∆ | Ký hiệu Delta | |
| ∑ | ∑ | ∑ | Ký hiệu Sigma |
| √ | √ | √ | Ký hiệu căn bậc hai |
Ký hiệu dấu phụ (Diacritics)
Những dấu phụ giúp bạn đánh dấu ý nghĩa của một từ hoặc cách phát âm khác nhau. Một số dấu phụ phổ biến thường được sử dụng trong HTML như sau:
| Ký hiệu | HTML Entities | HTML Entity Number | Công dụng |
| ` | ` | Dấu huyền | |
| ˆ | + | ˆ | Dấu Hachek |
| ˜ | ˜ | ˜ | Dấu ngã |
| ¨ | ¨ | ¨ | Âm sắc |
| ¯ | ¯ | ¯ | Macron |
| ´ | ´ | ´ | Dấu sắc |
| ¸ | ¸ | ¸ | Cedilla |
| ˘ | ≈ | ˘ | |
| ˙ | ˙ | Chấm | |
| ˚ | ˚ | Hình tròn | |
| ˛ | ˛ | Dấu phẩy | |
| ˜ | ˜ | Dấu ngã nhỏ | |
| ˝ | ˝ | Ngoặc kép |
Một số kí tự đặc biệt khác
Một số kí tự đặc biệt khác mà bạn có thể sử dụng trong lập trình web như sau:
| Ký hiệu | HTML Entities | HTML Entity Number | Công dụng |
| ♠ | ♠ | ♠ | Chất bài bích |
| ♣ | ♣ | ♣ | Chất bài chuồn |
| ♦ | ♦ | ♦ | Chất bài rô |
| ♥ | ♥ | ♥ | Chất bài cơ |
| ← | ← | ← | Mũi tên trái |
| → | → | → | Mũi tên phải |
| ↑ | ↑ | ↑ | Mũi tên hướng lên |
| ↓ | ↓ | ↓ | Mũi tên hướng xuống |
| ♀ | ♀ | Biểu tượng giới tính nữ | |
| ♂ | ♂ | Biểu tượng giới tính nam | |
| ♩ | ♩ | Nốt nhạc | |
| ♪ | ♪ | Nốt nhạc | |
| ♬ | ♬ | Nốt nhạc | |
| ♭ | ♭ | Nốt nhạc | |
| ♯ | ♯ | Dấu thăng | |
| ✿ | ✿ | Bông hoa màu đen | |
| ☻ | ☻ | Mặt cười màu đen | |
| ☺ | ☺ | Mặt cười màu trắng | |
| ☹ | ☹ | Mặt buồn | |
| ☸ | ☸ | Hoa tuyết |
Các câu hỏi thường gặp về kí tự đặc biệt HTML
Lợi ích của kí tự đặc biệt HTML là gì?
Bên cạnh công dụng nâng cao trải nghiệm người dùng trên trang web, kí tự đặc biệt còn đem lại một số lợi ích như:
- Tối ưu hóa công cụ tìm kiếm: HTML Entities cho phép hiển thị chính xác các kí tự trên trang web, từ đó SEO có thể giải thích chúng một cách chính xác hơn. Bạn có thể sử dụng kí tự đặc biệt ở các loại tiêu đề hoặc thẻ Meta để công việc tối ưu trang web hữu ích hơn.
- Nâng cao bố cục trang web: Hiểu và kết hợp HTML vào lập trình web có thể giúp bạn dễ dàng nâng cao kỹ năng của bản thân cũng như tăng trải nghiệm của trang web đến với người dùng.
Tham khảo thêm các kí tự đặc biệt ở đâu?
Để tham khảo đầy đủ danh sách kí tự đặc biệt, bạn có thể sử dụng một số nguồn tài liệu như:
- W3School HTML Entities: Cung cấp đầy đủ các kí tự đặc biệt được sử dụng phổ biến trong HTML4 và phiên bản mới nhất HTML5.
- MDN Entity: Tổng hợp đầy đủ các kí tự đặc biệt trong HTML, kể cả những kí tự ít thông dụng nhất.
Bên cạnh đó, để tìm hiểu chuyên sâu về HTML, bạn có thể tham khảo thêm các khóa học của HubSpot, Freecodecamp, Udemy hoặc Coursera,… để có lộ trình học HTML cũng như CSS đầy đủ và hiệu quả nhé!
Ngoài ra, bạn có thể tìm hiểu danh sách các bài viết thuộc chủ đề HTML để xây dựng trang web hoàn chỉnh với HTML:
- Giải đáp “tất tần tật” những điều cần biết về HTML
- Table HTML: Hướng dẫn cách tạo bảng trong HTML chi tiết từ A – Z
- Tổng hợp chi tiết và đầy đủ nhất về Bảng màu HTML
- Tổng hợp 70+ các thẻ trong HTML thông dụng
- Gợi ý 4 cách chèn khoảng trắng HTML đơn giản
- Tổng hợp 10+ font HTML phổ biến cho trang web hiện nay
- Hướng dẫn cách tạo login form HTML đơn giản và dễ thực hiện
- Hướng dẫn cách xuống dòng trong HTML đơn giản và nhanh chóng
- Tổng hợp 12+ bài tập HTML & CSS cơ bản cho người mới bắt đầu
Tổng kết về kí tự đặc biệt HTML
Các kí tự đặc biệt HTML giúp bạn tạo nội dung thêm phong phú, hấp dẫn và dễ tiếp cận với người dùng. Sử dụng các kí tự đặc biệt một cách đúng đắn và hiệu quả sẽ giúp nâng cao chất lượng trang web tối ưu cũng như thu hút nhiều người hơn.
Hy vọng qua bài viết, bạn có thể tích lũy thêm được nền tảng kiến thức chuyên sâu về HTML. Học HTML hôm nay không là quá muộn để bạn có thể chinh phục đam mê cũng như đem lại nhiều cơ hội thăng tiến hấp dẫn trong công việc.
Tham khảo Việc làm Front-end hấp dẫn trên ITviec!