Comment trong HTML: cú pháp, chú thích nhiều dòng, phím tắt

Cách viết chú thích trong HTML

Chú thích (comment) HTML bắt đầu bằng <!-- và kết thúc bằng -->. Trình duyệt bỏ qua mọi thứ giữa hai dấu này, nên phần chữ đó không bao giờ xuất hiện trên trang:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments</title>
</head>
<body>
  <!-- This comment is not displayed -->
  <h1>Visible heading</h1>

  <!--
    A comment can span several lines.
    Use it for notes to yourself or your team.
  -->
  <p>Visible paragraph.</p>
</body>
</html>

Chỉ tiêu đề và đoạn văn hiện ra. HTML chỉ có một cú pháp chú thích, và nó dùng được cho một dòng hay nhiều dòng.

Phím tắt trong VS Code và hầu hết trình soạn thảo: chọn vài dòng rồi nhấn Ctrl + / (Cmd + / trên Mac). Trình soạn thảo tự thêm các dấu chú thích, và cùng tổ hợp phím đó sẽ gỡ chúng ra.

Comment code

Vì trình duyệt bỏ qua các thẻ bên trong chú thích, bọc markup trong <!-- và --> sẽ ẩn nó mà không phải xóa. Đây là cách nhanh nhất để thử trang khi thiếu một phần tử:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comment out</title>
  <style>
    .banner { background: #fef3c7; padding: 8px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <!-- <div class="banner">Sale ends Friday</div> -->
  <h1>Shop</h1>
  <!--
  <ul>
    <li>Old menu item</li>
    <li>Another old item</li>
  </ul>
  -->
  <p>Remove the comment markers around the banner to bring it back.</p>
</body>
</html>

Xóa <!-- và --> ở dòng banner thì nó hiện lại. Code bị comment vẫn được tải xuống cùng trang, nên khi chắc chắn không cần nữa, hãy xóa nó.

Chú thích không lồng nhau được

Dấu --> đầu tiên luôn đóng chú thích. Nếu đoạn code bạn comment đã chứa một chú thích, chú thích bên ngoài sẽ kết thúc sớm và phần còn lại tràn ra trang. Ví dụ này đưa các chú thích lồng nhau cho bộ phân tích của trình duyệt và hiển thị những gì còn nhìn thấy được:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested comments</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const html = '<!-- outer <!-- inner --> still meant to be hidden -->';
    const box = document.createElement('div');
    box.innerHTML = html;
    document.getElementById('out').textContent =
      'Source:  ' + html + '\nVisible: ' + box.textContent;
  </script>
</body>
</html>

still meant to be hidden --> được hiển thị thành chữ. Trước khi comment một khối lớn, hãy xóa các chú thích bên trong (hoặc sửa dấu --> của chúng để không còn khớp).

Thêm vài quy tắc: chú thích không được bắt đầu bằng <!--> (đó là một chú thích rỗng, nên phần sau sẽ hiện ra), và --!> cũng đóng chú thích giống như -->, nên đừng để cả hai trong nội dung chú thích.

Chú thích là công khai

Chú thích là một phần của HTML mà máy chủ gửi đi, nên mọi khách truy cập đều đọc được chúng bằng Xem nguồn trang hoặc công cụ dành cho nhà phát triển. Một script cũng liệt kê được chúng:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments are public</title>
  <style>
    li { font-family: monospace; }
  </style>
</head>
<body>
  <!-- TODO: fix the checkout button -->
  <p>This page has comments. Here they are:</p>
  <!-- admin password is hunter2 (never do this) -->
  <ul id="list"></ul>
  <script>
    const walker = document.createTreeWalker(document, NodeFilter.SHOW_COMMENT);
    while (walker.nextNode()) {
      const li = document.createElement('li');
      li.textContent = walker.currentNode.data.trim();
      document.getElementById('list').appendChild(li);
    }
  </script>
</body>
</html>

Chỉ dùng chú thích để ghi chú về code. Mọi thứ riêng tư (mật khẩu, khóa API, URL nội bộ, dữ liệu khách hàng) không bao giờ được nằm trong HTML, dù có comment hay không. Công cụ build và minifier thường xóa chú thích khỏi HTML khi chạy production, việc này cũng tiết kiệm được vài byte.

Chú thích trong CSS và JavaScript

Chú thích HTML chỉ hoạt động trong HTML. Bên trong <style> và <script>, bạn dùng cú pháp chú thích của ngôn ngữ đó:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS and JS comments</title>
  <style>
    /* A CSS comment: this rule is disabled */
    /* p { color: #dc2626; } */

    <!-- h1 { color: #2563eb; } -->
  </style>
</head>
<body>
  <h1>This heading is blue</h1>
  <p id="msg">Paragraph</p>
  <script>
    // A JavaScript comment
    /* Block comments work in JavaScript too */
    document.getElementById('msg').textContent = 'Set by the script';
  </script>
</body>
</html>

Tiêu đề chuyển sang màu xanh: CSS bỏ qua chính các dấu <!-- và --> nhưng vẫn áp dụng quy tắc nằm giữa chúng. Chỉ /* ... */ mới vô hiệu hóa được CSS. Trang chú thích CSS nói về cú pháp đó.

Chú thích có điều kiện

Code cũ đôi khi chứa <!--[if IE]> ... <![endif]-->. Đây là chỉ dẫn dành cho Internet Explorer 9 trở về trước. Mọi trình duyệt hiện nay coi chúng là chú thích thông thường, nên nội dung bên trong bị bỏ qua và có thể xóa cả khối.

Lỗi thường gặp

• Lồng chú thích. Dấu --> bên trong kết thúc chú thích bên ngoài. Hãy xóa chú thích bên trong trước khi comment một khối.
• Đặt thông tin bí mật trong chú thích. Chú thích được gửi tới mọi khách truy cập.
• Thiếu -->. Mọi thứ sau <!-- cho tới cuối tệp biến mất, trông như nửa trang bỗng dưng không còn.
• Dùng <!-- --> trong CSS. Nó không vô hiệu hóa được các quy tắc. Hãy dùng /* */.
• Dùng // trong HTML. // note hiện ra thành chữ. HTML chỉ hiểu <!-- -->.