Ghi chú trong HTML

Ghi chú là một đoạn mã bị bỏ qua bởi bất kỳ trình duyệt web nào. Đó là một cách tốt để thêm ghi chú vào mã HTML, đặc biệt là trong các tài liệu phức tạp, để chỉ ra các phần của tài liệu và bất kỳ ghi chú nào khác cho bất kỳ ai nhìn vào mã. Ghi chú giúp bạn và những người khác hiểu mã của bạn và tăng khả năng đọc mã.

Ghi chú HTML được đặt ở giữa thẻ <!-- ... -->. Vì vậy, mọi nội dung được đặt trong thẻ <!-- ... --> sẽ được coi là ghi chú và sẽ bị trình duyệt bỏ qua hoàn toàn.

Ví dụ
<!DOCTYPE html>
<html>
<!-- Bắt đầu tiêu đề tài liệu -->
<head>
<title> Đây là tiêu đề tài liệu </title>
</head>
<!-- Kết thúc tiêu đề tài liệu -->
<body>
<p> Nội dung tài liệu ở đây ..... </p>
</body>
</html>

Ghi chú hợp lệ và không hợp lệ

Ghi chú không được lồng nhau có nghĩa là một ghi chú không thể được đặt trong một ghi chú khác. Thứ hai, chuỗi dấu gạch ngang kép "-" có thể không xuất hiện trong một ghi chú ngoại trừ là một phần của thẻ đóng -->. Bạn cũng phải đảm bảo rằng không có khoảng trắng trong chuỗi ghi chú bắt đầu.

Ví dụ
Ở đây, ghi chú đã cho là một ghi chú hợp lệ và sẽ bị trình duyệt xóa sạch.

Nội dung tài liệu ở đây .....

<!DOCTYPE html>
<html>
<head>
<title> Ví dụ nhận xét hợp lệ </title>
</head>
<body>
<!-- Đây là ghi chú hợp lệ -->
<p> Nội dung tài liệu ở đây ..... </p>
</body>
</html>

Nhưng, dòng sau không phải là một ghi chú hợp lệ và sẽ được trình duyệt hiển thị. Điều này là do có một khoảng cách giữa dấu ngoặc góc trái và dấu chấm than.

< !-- Đây là ghi chú không hợp lệ -->

Nội dung tài liệu ở đây .....

<!DOCTYPE html>
<html>
<head>
<title> Ví dụ nhận xét hợp lệ </title>
</head>
<body>
< !-- Đây là ghi chú không hợp lệ -->
<p> Nội dung tài liệu ở đây ..... </p>
</body>
</ html>

Ghi chú nhiều dòng

Các ví dụ trên là về ghi chú một dòng, nhưng HTML cũng hỗ trợ các nhận xét nhiều dòng.

Bạn có thể nhận xét nhiều dòng bằng thẻ bắt đầu đặc biệt <!-- và thẻ kết thúc --> được đặt trước dòng đầu tiên và cuối dòng cuối cùng như trong ví dụ đã cho bên dưới.

Ví dụ
<!DOCTYPE html>
<html>
<head>
<title> Nhận xét nhiều dòng </title>
</head>
<body>
<!--
Đây là một nhận xét nhiều dòng và
nó có thể đi dài qua nhiều dòng bạn thích.
-->
<p> Nội dung tài liệu ở đây ..... </p>
</body>
</html>

Ghi chú có điều kiện

Ghi chú có điều kiện chỉ hoạt động trong Internet Explorer (IE) trên Windows nhưng chúng bị các trình duyệt khác bỏ qua. Chúng được hỗ trợ từ Explorer 5 trở đi và bạn có thể sử dụng chúng để đưa ra các hướng dẫn có điều kiện cho các phiên bản IE khác nhau.

Ví dụ
<!DOCTYPE html>
<html>
<head>
<title> Ghi chú có điều kiện </title>
<!-- [if IE 6]>
Hướng dẫn đặc biệt cho IE 6 tại đây
<! [endif] -->
</head>
<body>
<p> Nội dung tài liệu ở đây ..... </p>
</body>
</html>

Bạn sẽ gặp một tình huống mà bạn sẽ cần phải áp dụng một CSS khác nhau dựa trên các phiên bản khác nhau của Internet Explorer, trong trường hợp đó, các ghi chú có điều kiện sẽ hữu ích.

Ghi chú mã script

Mặc dù bạn sẽ học JavaScript cùng HTML trong một khóa học khác, nhưng ở đây bạn phải lưu ý rằng nếu bạn đang sử dụng JavaScript hoặc VBScript trong mã HTML của mình thì nên đặt mã script đó trong các ghi chú HTML phù hợp sao cho trình duyệt cũ có thể hoạt động đúng.

Ví dụ
<!DOCTYPE html>
<html>
<head>
<title> Ghi chú mã script </title>
<script>
<!--
Document.write( "Hello World!" )
// ->
</script>
</head>
<body>
<p> Hello World! </p>
</body>
</html>

Ghi chú style

Mặc dù bạn sẽ học cách sử dụng CSS cùng với HTML trong một khóa học khác, nhưng ở đây bạn phải lưu ý rằng nếu bạn đang sử dụng CSS trong mã HTML của bạn thì nên đặt mã đó vào trong các ghi chú HTML thích hợp để các trình duyệt cũ có thể hoạt động chính xác.

Ví dụ
<!DOCTYPE html>
<html>
<head>
<title> Ghi chú CSS </title>
<style>
<!--
.example {
boder: 1px solid # 4a7d49;
}
// ->
</style>
</head>
<body>
<div class = "example" > Hello World! </div>
</body>
</html>