Bảng ký tự đặc biệt HTML đầy đủ: Mã Entity và số

 

Là một nhà thiết kế web, tôi thường gặp câu hỏi: “Làm thế nào để hiển thị thẻ <p> dưới dạng văn bản thay vì tạo ra một đoạn văn mới?”. Câu trả lời nằm ở việc sử dụng các ký tự đặc biệt HTML, hay còn gọi là HTML Entities.

Trong HTML, một số ký tự được “dành riêng” cho việc định dạng cấu trúc (như < hay >). Khi bạn muốn hiển thị chúng như văn bản thông thường, hoặc muốn chèn các ký hiệu không có trên bàn phím (như ©, €, ™), bạn cần dùng đến mã thay thế.

Bài viết này sẽ là cuốn sổ tay đầy đủ nhất mà bạn có thể tra cứu nhanh chóng, cung cấp cả hai dạng mã: Tên Entity (Entity Name)Số Entity (Entity Number).

Entity Name vs. Entity Number: Nên Dùng Loại Nào?

  • Tên Entity (&ten_entity;): Dễ nhớ hơn (ví dụ: &copy; cho biểu tượng copyright).

  • Số Entity (&#so_entity;): Được hỗ trợ rộng rãi hơn trên tất cả các trình duyệt, kể cả với những ký tự hiếm.

Lời khuyên từ Dũng: Với các ký tự phổ biến, bạn có thể dùng Tên Entity cho dễ nhớ. Với các ký tự hiếm hơn, dùng Số Entity sẽ đảm bảo hiển thị chính xác ở mọi nơi.

Bảng Tra Cứu Ký Tự Đặc Biệt HTML Đầy Đủ

Để tiện cho việc tra cứu, tôi đã phân loại các ký tự thành những nhóm phổ biến nhất.

1. Các Ký Tự HTML Phổ Biến Nhất

Đây là những ký tự bạn sẽ phải dùng gần như hàng ngày để tránh lỗi hiển thị HTML.

Ký tựMô tảMã EntityMã Số
Khoảng trắng không ngắt dòng (Non-breaking space)&nbsp;&#160;
<Dấu nhỏ hơn (Less than)&lt;&#60;
>Dấu lớn hơn (Greater than)&gt;&#62;
&Ký hiệu Và (Ampersand)&amp;&#38;
"Dấu ngoặc kép (Double quotation mark)&quot;&#34;
'Dấu ngoặc đơn (Single quotation mark)&apos;&#39;
¢Ký hiệu Cent&cent;&#162;
£Ký hiệu Bảng Anh (Pound)&pound;&#163;
¥Ký hiệu Yên Nhật (Yen)&yen;&#165;
Ký hiệu Euro&euro;&#8364;
©Ký hiệu Bản quyền (Copyright)&copy;&#169;
®Ký hiệu Đã đăng ký (Registered trademark)&reg;&#174;

2. Các Ký Tự Tiền Tệ (Currency Symbols)

Ký tựMô tảMã EntityMã Số
$Ký hiệu Đô la (Dollar)&#36;
Ký hiệu Euro&euro;&#8364;
£Ký hiệu Bảng Anh (Pound)&pound;&#163;
¥Ký hiệu Yên Nhật (Yen)&yen;&#165;
Ký hiệu Đồng Việt Nam&#8363;

3. Các Ký Hiệu Toán Học (Mathematical Symbols)

Ký tựMô tảMã EntityMã Số
+Dấu cộng&#43;
Dấu trừ&minus;&#8722;
×Dấu nhân&times;&#215;
÷Dấu chia&divide;&#247;
=Dấu bằng&#61;
Không bằng&ne;&#8800;
Nhỏ hơn hoặc bằng&le;&#8804;
Lớn hơn hoặc bằng&ge;&#8805;
Vô cực&infin;&#8734;
°Ký hiệu Độ&deg;&#176;
¹Số mũ 1&sup1;&#185;
²Số mũ 2&sup2;&#178;
³Số mũ 3&sup3;&#179;

4. Các Ký Hiệu Mũi Tên (Arrow Symbols)

Ký tựMô tảMã EntityMã Số
Mũi tên trái&larr;&#8592;
Mũi tên lên&uarr;&#8593;
Mũi tên phải&rarr;&#8594;
Mũi tên xuống&darr;&#8595;
Mũi tên hai chiều&harr;&#8596;

5. Dấu Chấm Câu & Ký Hiệu Khác

Ký tựMô tảMã EntityMã Số
Dấu chấm tròn (Bullet)&bull;&#8226;
Dấu ba chấm (Ellipsis)&hellip;&#8230;
Ký hiệu Thương hiệu (Trademark)&trade;&#8482;
Ký hiệu Bích&spades;&#9824;
Ký hiệu Chuồn&clubs;&#9827;
Ký hiệu Cơ&hearts;&#9829;
Ký hiệu Rô&diams;&#9830;

Hướng Dẫn Cách Sử Dụng Ký Tự Đặc Biệt

Bạn chỉ cần sao chép mã (Entity hoặc Số) và dán trực tiếp vào trình soạn thảo HTML của mình.

Ví dụ:

  • Bạn muốn viết: Trong HTML, thẻ <p> dùng để tạo đoạn văn.

  • Trình duyệt sẽ hiểu sai và ẩn thẻ <p> đi.

  • Bạn cần viết đúng trong HTML là: Trong HTML, thẻ &lt;p&gt; dùng để tạo đoạn văn.

  • Kết quả hiển thị: Trong HTML, thẻ <p> dùng để tạo đoạn văn.

Lưu Ý Quan Trọng Khi Sử Dụng

  1. Sử dụng &nbsp; cho khoảng trắng: Nếu bạn nhấn phím cách nhiều lần trong HTML, trình duyệt sẽ chỉ hiển thị một khoảng trắng. Để tạo nhiều khoảng trắng liên tiếp, hãy sử dụng &nbsp; cho mỗi khoảng trắng bạn muốn thêm.

  2. Khai báo UTF-8: Hầu hết các website hiện đại đều sử dụng bảng mã UTF-8 (khai báo bằng thẻ <meta charset="UTF-8">). Điều này cho phép bạn gõ trực tiếp nhiều ký tự đặc biệt (như ©, €, …) vào HTML và nó vẫn hiển thị đúng. Tuy nhiên, việc sử dụng mã entity vẫn là cách làm an toàn và chuẩn xác nhất để tránh mọi lỗi hiển thị không mong muốn trên các hệ thống khác nhau.

Kết Luận

Việc sử dụng chính xác các ký tự đặc biệt HTML là một kỹ năng cơ bản nhưng cực kỳ quan trọng đối với bất kỳ ai làm việc với website. Nó đảm bảo nội dung của bạn được hiển thị đúng như ý muốn, tránh các lỗi cú pháp và mang lại sự chuyên nghiệp cho trang web.

Hãy bookmark lại bài viết này để làm tài liệu tham khảo nhanh mỗi khi bạn cần. Chúc bạn thành công! Dũng – Nhà thiết kế web.

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Zalo 0941 388 887