HTML/CSS | HTML Entities

Học HTML, CSS từ Zero Tới Hero
  • HTML Entities là gì?
  • Tra cứu các HTML Entities
  • Khi nào sử dụng HTML Entities?

HTML Entities là gì?

HTML Entities là các chuỗi bắt đầu bằng dấu & và kết thúc bằng dấu ;. Nó được sử dụng để hiển thị 2 loại ký tự:

  • Các ký tự có ý nghĩa đặc biệt hoặc trùng với các ký tự trong HTML
  • Các ký tự không dễ dàng hoặc không nhập được từ bàn phím. Ví dụ: ©, , v.v

Giả sử, bạn làm một trang web hướng dẫn học HTML và bạn muốn hiển thị code minh họa cho độc giả.

Ví dụ:

<p>Chào các bạn, hôm nay mình sẽ hướng dẫn HTML cơ bản cho các bạn.</p>
<p>Dưới đây là ví dụ sử dụng thẻ <h1>:</p>
<h1>Hôm nay là một ngày đẹp trời!</h1>

Chào các bạn, hôm nay mình sẽ hướng dẫn HTML cơ bản cho các bạn.

Dưới đây là ví dụ sử dụng thẻ

:

Hôm nay là một ngày đẹp trời!

Rõ ràng, chúng ta đang kỳ vọng <h1><h1>Hôm nay là một ngày đẹp trời!</h1> sẽ hiển thị lên trình duyệt. Nhưng vì chúng trùng với các ký tự trong HTML nên không đạt được kết quả như mong đợi.

HTML Entities sẽ giúp các bạn giải quyết vấn đề này. Hãy cùng xem xét ví dụ dưới đây.

Ví dụ:

<p>Chào các bạn, hôm nay mình sẽ hướng dẫn HTML cơ bản cho các bạn.</p>
<p>Dưới đây là ví dụ sử dụng thẻ &lt;h1&gt;:</p>
&lt;h1&gt;Hôm nay là một ngày đẹp trời!&lt;/h1&gt;

Chào các bạn, hôm nay mình sẽ hướng dẫn HTML cơ bản cho các bạn.

Dưới đây là ví dụ sử dụng thẻ <h1>:

<h1>Hôm nay là một ngày đẹp trời!</h1>

Các HTML Entities được sử dụng trong ví dụ trên:

  • &lt; tương ứng < khi hiển thị
  • &gt; tương ứng > khi hiển thị

Tra cứu các HTML Entities

Có tới hàng ngàn HTML Entities, nhưng thực tế chúng ta thường sử dụng một vài trong số đó.

Các bạn có thể tham khảo:

Khi nào sử dụng HTML Entities?

Bạn nên sử dụng HTML Entities khi hiển thị “Các ký tự có ý nghĩa đặc biệt hoặc trùng với các ký tự trong HTML”. Vì đây là tình huống có thể gây nhầm lẫn hoặc bắt buộc phải sử dụng.

Ví dụ, tình huống gây nhầm lẫn:

<p>Một thẻ HTML sẽ bắt đầu bằng < và kết thúc bằng ></p>
<p>Khi muốn so sánh nhỏ hơn trong lập trình ta sử dụng ký tự <</p>

Một thẻ HTML sẽ bắt đầu bằng < và kết thúc bằng >

Khi muốn so sánh nhỏ hơn trong lập trình ta sử dụng ký tự <

thay thế bằng HTML Entities:

<p>Một thẻ HTML sẽ bắt đầu bằng &lt; và kết thúc bằng &gt;</p>
<p>Khi muốn so sánh nhỏ hơn trong lập trình ta sử dụng ký tự &lt;</p>

Một thẻ HTML sẽ bắt đầu bằng < và kết thúc bằng >

Khi muốn so sánh nhỏ hơn trong lập trình ta sử dụng ký tự <

Những tình huống khác, nếu việc sử dụng HTML Entites gây khó khăn cho việc đọc code thì chúng ta nên sử dụng luôn ký tự mà nó thể hiện.

Ví dụ:

<p>&copy; 2018 - 2022 F8. Nền tảng học lập trình Pro</p>

© 2018 - 2022 F8. Nền tảng học lập trình Pro

nên thay thế bằng:

<p>© 2018 - 2022 F8. Nền tảng học lập trình Pro</p>

© 2018 - 2022 F8. Nền tảng học lập trình Pro

Nếu trang web sử dụng bảng mã ký tự UTF-8 thì hầu hết các ký tự đặc biệt (bao gồm cả các biểu tượng cảm xúc) có thể hiển thị ngay mà không cần sử dụng HTML Entities.

Tóm tắt

  • HTML Entities là các chuỗi bắt đầu bằng dấu & và kết thúc bằng dấu ;. Nó được sử dụng để hiển thị 2 loại ký tự:
    • Các ký tự có ý nghĩa đặc biệt hoặc trùng với các ký tự trong HTML
    • Các ký tự không dễ dàng hoặc không nhập được từ bàn phím. Ví dụ: ©, , v.v
  • Có tới hàng ngàn HTML Entities, nhưng thực tế chúng ta thường sử dụng một vài trong số đó.
  • Bạn nên sử dụng HTML Entities khi hiển thị “Các ký tự có ý nghĩa đặc biệt hoặc trùng với các ký tự trong HTML”. Vì đây là tình huống có thể gây nhầm lẫn hoặc bắt buộc phải sử dụng.
  • Những tình huống khác, nếu việc sử dụng HTML Entites gây khó khăn cho việc đọc code thì chúng ta nên sử dụng luôn ký tự mà nó thể hiện. Nếu trang web sử dụng bảng mã ký tự UTF-8 thì hầu hết các ký tự đặc biệt (bao gồm cả các biểu tượng cảm xúc) có thể hiển thị ngay mà không cần sử dụng HTML Entities.

Nhận xét

Mới hơn Cũ hơn