Comments và Blank Space trong HTML

Khi học HTML, ngoài các thẻ cơ bản, bạn cũng nên hiểu cách ghi chú code (Comments) và quản lý khoảng trắng (Blank Space). Đây là hai yếu tố quan trọng giúp bạn viết code rõ ràng, dễ đọc, dễ bảo trì, đồng thời hiển thị nội dung chính xác hơn trên trình duyệt.

Bài viết này sẽ giúp bạn nắm vững từ comments, blank space, thẻ <pre>, HTML Entities cho tới cách dùng Non-breaking space và thẻ <code>.

Comments trong HTML

• Cú pháp comments trong HTML luôn bắt đầu bằng <!-- và kết thúc bằng -->.
• Comments là đoạn văn bản do người viết code thêm vào để cung cấp lời giải thích rõ ràng cho đoạn code, ghi chú cho bản thân hoặc đồng nghiệp trong tương lai.
• Không nên sử dụng comments cho những điều quá hiển nhiên. Ví dụ: "Thẻ <h1> dùng làm tiêu đề chính" khi bạn đã quen với HTML.
• Nội dung trong comments không được trình duyệt hiển thị ra trang web.
• Tránh quên cú pháp đóng comment -->, nếu quên phần còn lại của tệp HTML sẽ trở thành comments.
• HTML không hỗ trợ comments lồng nhau.

Ví dụ:

<!-- Đây là phần đầu trang -->
<h1>Trang chủ</h1>

<!-- Menu chính -->
<nav>
  <ul>
    <li>Trang chủ</li>
    <li>Giới thiệu</li>
  </ul>
</nav>

Cách trình duyệt hiển thị các khoảng trắng

• Trong HTML, nhiều khoảng trống, nhiều ngắt dòng trong code chỉ được trình duyệt coi như một khoảng trống duy nhất. Điều này giúp lập trình viên trình bày code linh hoạt mà không ảnh hưởng tới giao diện.

<p>Đây    là    một    đoạn   văn.</p>

Trình duyệt sẽ hiển thị:

Đây là một đoạn văn.

• Cách xuống hàng mới trong HTML:
  • Sử dụng thẻ <br> để xuống dòng trong đoạn văn.
  • Tách nội dung thành nhiều đoạn bằng thẻ <p>.
  • Sử dụng thẻ <pre> nếu muốn giữ nguyên định dạng văn bản.

Tìm hiểu thẻ <pre>

• Thẻ <pre> (preformatted) giữ nguyên khoảng trắng, ngắt dòng, tab và các ký tự định dạng khác mà trình duyệt thường bỏ qua.
• Văn bản trong <pre> mặc định dùng font chữ monospace (độ rộng cố định), nhưng có thể thay đổi bằng CSS.
• Dấu xuống hàng đầu tiên và cuối cùng trong thẻ <pre> sẽ không được hiển thị ra trình duyệt.
• Thẻ <pre> thường kết hợp với <code> để hiển thị khối code.

Ví dụ:

<pre>
HTML
  CSS
    JavaScript
</pre>

Trình duyệt sẽ hiển thị đúng khoảng cách/tab như trên.

HTML Entities

• HTML Entities là các chuỗi bắt đầu bằng dấu & và kết thúc bằng dấu ;.
  • Dùng để hiển thị các ký tự có ý nghĩa đặc biệt trong HTML
  • Dùng cho các ký tự khó nhập từ bàn phím

Ví dụ:

<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 ta sử dụng ký tự &lt;</p>

Kết quả hiển thị:

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 ta sử dụng ký tự <

Tra cứu HTML Entities:

• HTML Entities thông dụng (w3.org)
• HTML Entities thông dụng (w3schools.com)
• HTML Entities trong HTML4, HTML5

Non-breaking Space Entity  

•   hiển thị giống như một khoảng trống, nhưng khoảng trống này không bị tách ra khi xuống dòng.
• Dùng khi bạn muốn 2 từ luôn đi liền nhau trên cùng một dòng.

Ví dụ:

<p>Đường vào tim Crush xa như 1000&nbsp;km.</p>

Nếu trình duyệt co hẹp, chữ "1000" và "km" sẽ vẫn nằm cùng một dòng.

Thẻ <code> và Highlight code

• Thẻ <code> trong HTML được sử dụng để thể hiện các đoạn code trong nội dung trang web.
• Hai trường hợp sử dụng:
  • Trong đoạn văn: <p>Đoạn văn có <code>đoạn code</code></p>
  • Khối code độc lập: <pre><code>Nội dung khối code</code></pre>
• Bạn có thể dùng các công cụ chuyển HTML sang HTML Entities:
  • Code Beautify (HTML Escape / Unescape)
  • Freeformatter (HTML Escape / Unescape)
• Nếu muốn highlight code đẹp hơn, bạn có thể dùng thư viện PrismJS hỗ trợ hầu hết ngôn ngữ.

Ví dụ:

<pre><code>
function sayHello() {
  alert('Hello world!');
}
</code></pre>

Kết luận