Chú thích HTML được đặt bên trong cặp thẻ <!-- ... -->. Mọi nội dung nằm trong cặp thẻ này sẽ được trình duyệt bỏ qua hoàn toàn và không hiển thị trên trang web. Chú thích giúp lập trình viên ghi chú, giải thích mã hoặc tạm ẩn đoạn mã mà không cần xóa.
Chú thích một dòng
<!DOCTYPE html> <html> <head> <!-- Phần header bắt đầu --> <title>Tiêu đề trang</title> </head> <!-- Phần header kết thúc --> <body> <p>Nội dung trang web...</p> </body> </html>
Kết quả: Văn bản trong chú thích không hiển thị trên trình duyệt.
Chú thích nhiều dòng
Bạn có thể viết chú thích trải dài nhiều dòng:
<!DOCTYPE html>
<html>
<head>
<!-- Header bắt đầu -->
<title>Tiêu đề trang</title>
</head>
<!-- Header kết thúc -->
<body>
<h2>Tiêu đề cấp 2</h2>
<!--
Đây là chú thích nhiều dòng.
Có thể viết bao nhiêu dòng tùy ý.
Thường dùng để giải thích logic phức tạp
hoặc tạm ẩn một khối mã lớn.
-->
<p>Nội dung hiển thị bình thường.</p>
<p>Chú thích ở trên không hiển thị.</p>
</body>
</html>
Các lưu ý quan trọng
- Không lồng chú thích: Không thể đặt
<!-- -->bên trong một chú thích khác — sẽ gây lỗi phân tích cú pháp. - Không dùng trong <title>, <style>, <script>: Nội dung trong các thẻ này được xử lý khác biệt, chú thích HTML không hoạt động bên trong chúng (trong
<script>dùng//hoặc/* */, trong<style>dùng/* */). - Công cụ phát triển: Chú thích vẫn hiển thị trong "View Source" (Xem mã nguồn) và DevTools của trình duyệt — không dùng để giấu thông tin nhạy cảm (mật khẩu, API key, v.v.).
- Chú thích điều kiện (IE):
<!--[if IE]>...<![endif]-->chỉ hoạt động trên Internet Explorer cũ, không còn dùng trong phát triển hiện đại.
Sử dụng chú thích hợp lý giúp mã nguồn dễ đọc, dễ bảo trì và hỗ trợ làm việc nhóm hiệu quả.