Cách viết chú thích (comment) trong HTML, CSS và JavaScript

Thêm chú thích vào code là cách hữu ích để ghi lại ghi chú giải thích cho bản thân hoặc người khác hiểu code làm gì. Code hoặc văn bản bị comment out sẽ bị trình duyệt bỏ qua.

Đọc tiếp để xem cách tạo comment trong HTML, CSS và JavaScript!

Cách viết comment trong HTML

Comment HTML một dòng

Để comment một dòng HTML, đặt văn bản hoặc code cần comment giữa cặp thẻ comment: <!-- -->.

Ví dụ trong code:

<!-- Văn bản ở đây sẽ ẩn trên trang web --> <div class="content"> Đây là nội dung HTML bình thường! </div>

Khi tải trang, comment HTML không hiển thị trên trang:

Nhưng nếu bạn Inspect code trang trong trình duyệt, vẫn thấy nội dung comment:

Comment HTML nhiều dòng

Để tạo comment khối hoặc nhiều dòng HTML, vẫn dùng cặp thẻ <!-- -->, nhưng có thể nhiều dòng hơn. Miễn là chứa nội dung comment giữa cặp thẻ, nó sẽ được tính là comment.

Ví dụ comment HTML nhiều dòng:

<!-- Văn bản ở đây sẽ ẩn trên trang web! Đây là dòng thứ hai của comment. Bạn có thể có bao nhiêu dòng tùy thích! 😁 --> <div class="content"> Và đây là nội dung HTML bình thường lại. </div>

Trên trang web trông như sau:

Và bạn thấy toàn bộ comment HTML trong Inspect:

Cách viết comment trong CSS

Comment CSS một dòng

Để tạo comment CSS một dòng, đặt nội dung comment giữa cặp /* */.

Ví dụ:

/* Văn bản này sẽ bị trình duyệt bỏ qua! */ .description { font-size: 1rem; line-height: 1.25rem; color: #202020; }

Comment CSS nhiều dòng

Để viết comment khối hoặc nhiều dòng CSS, dùng cùng cặp /* */, đặt nội dung comment trên nhiều dòng.

Ví dụ comment CSS nhiều dòng:

/* Văn bản này sẽ bị trình duyệt bỏ qua! Và dòng này cũng nằm trong comment! Dòng comment cuối cùng cho kỹ 😁 */ .description { font-size: 1rem; line-height: 1.25rem; color: #202020; }

Cách viết comment trong JavaScript

Comment JavaScript một dòng

Để tạo comment một dòng trong JavaScript, bắt đầu dòng bằng hai dấu gạch chéo //.

Ví dụ:

// Văn bản này là comment và sẽ bị bỏ qua!

Bạn cũng có thể thêm comment một dòng trên cùng dòng với code. Miễn là comment là nội dung cuối cùng trên dòng đó.

Ví dụ:

console.log('Test code here!'); // Đây là thông điệp console log

Comment JavaScript nhiều dòng

Nếu muốn tạo comment khối hoặc nhiều dòng trong JavaScript, bao quanh nội dung comment bằng cặp /* */. (Cách này giống CSS.)

Ví dụ:

/* Hàm: doSomeAwesomeThing() Hàm này làm điều tuyệt vời, nhưng tôi không biết là gì! */ function doSomeAwesomeThing(){ console.log('Run awesome function'); }

Kết luận

Thêm comment vào code HTML, CSS, JavaScript giúp người khác hiểu code của bạn.

Cũng hữu ích khi bạn đang phát triển dự án và cần tạm comment một đoạn code để test. Nhưng nhớ đừng để comment trong code production!