Khi làm việc với mã HTML, việc ghi chú và tổ chức hợp lý giúp bạn (và người khác) dễ hiểu, dễ bảo trì, nhất là khi dự án ngày càng lớn.
HTML hỗ trợ comment – ghi chú trong mã mà không hiển thị trên trình duyệt.
1. Cú pháp comment trong HTML
<!-- Đây là một dòng ghi chú -->
Bạn có thể đặt comment ở bất kỳ đâu trong file HTML.
Ví dụ:
<!-- Phần đầu trang -->
<h1>Trang giới thiệu</h1>
<!-- Đây là danh sách sở thích -->
<ul>
<li>Đọc sách</li>
<li>Lập trình</li>
</ul>
2. Tác dụng của comment
- Giải thích mục đích của đoạn mã.
- Đánh dấu các phần quan trọng.
- Tạm thời vô hiệu hóa một đoạn HTML (thay vì xóa).
Ví dụ ẩn một đoạn HTML:
<!-- <p>Đoạn này sẽ không hiển thị</p> -->
3. Cách tổ chức code HTML rõ ràng
Một số gợi ý giúp bạn viết HTML dễ đọc hơn:
a) Thụt dòng hợp lý
- Dùng thụt dòng để phản ánh cấu trúc lồng nhau.
- Mỗi cấp độ nên thụt 2 hoặc 4 khoảng trắng.
<ul>
<li>Món ăn
<ul>
<li>Phở</li>
<li>Bún</li>
</ul>
</li>
</ul>
b) Sắp xếp theo từng khu vực
Tách mã theo từng phần rõ ràng:
<!-- Phần đầu trang -->
<header>...</header>
<!-- Nội dung chính -->
<main>...</main>
<!-- Phần chân trang -->
<footer>...</footer>
c) Tránh lặp lại không cần thiết
- Nếu một đoạn giống nhau lặp đi lặp lại, nên nhóm lại bằng thẻ
divhoặc ghi chú rõ ràng để dễ chỉnh sửa sau.
4. Thực hành
Tạo file comment-tochuc.html và thử đoạn sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Comment và tổ chức code</title>
</head>
<body>
<!-- Tiêu đề chính -->
<h1>Giới thiệu về tôi</h1>
<!-- Danh sách sở thích -->
<ul>
<li>Nghe nhạc</li>
<li>Chơi thể thao</li>
</ul>
<!-- Đoạn này đang ẩn -->
<!-- <p>Thông tin cá nhân đang cập nhật...</p> -->
</body>
</html>
5. Ghi nhớ
- Comment trong HTML viết theo cú pháp:
<!-- nội dung -->. - Comment không hiển thị trên trình duyệt.
- Ghi chú và tổ chức code rõ ràng giúp dễ bảo trì, hợp tác và học lại sau này.
Thảo luận