Comment trong HTML và CSS

Khi viết code HTML và CSS bạn cần phải chú thích (Comment) lại một số đoạn mã. Điều này sẽ giúp cho code trở nên rõ ràng, dễ hiểu và sau này chỉnh sửa dễ hơn.

Với người mới bắt đầu nên thường xuyên để ý tới Comment để giúp cho công việc trở nên hiệu quả. Bạn sẽ không mất quá nhiều thời gian cho việc này đâu.

Comment trong HTML

Các đoạn comment khi viết nó chỉ hiển thị ở trong code. Và không được hiển thị trên trình duyệt.

Cách viết trong HTML như sau:

<!-- ... -->

Sẽ bắt đầu bằng 

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <!-- Đây là tiêu đề -->
    <title>Tiêu đề</title>
</head>
<body>

<div class="container">

    <div class="header">
    </div><!-- End header -->
    
    <div class="body">
    	<!-- ảnh logo -->
    	<img src="anh.jpg"/>
        
    </div><!-- End body -->
    
    <div class="footer">
    </div><!-- End footer -->
    
</div>

</body>
</html>

Comment trong CSS

Trong CSS comment sẽ khác so với HTML.

/* ... */

Nó sẽ bắt đầu bằng /* và kết thúc bằng */

Ví dụ:

/* Khu vực Header */
.header {
    background: #444;
    height: 100px;
    margin-bottom: 20px;
}

Cách viết Comment hiệu quả

Khi viết chú thích mình thường áp dụng những cách sau:

– Đối với HTML nên đặt sau kết thúc của một khối mã. Như ví dụ ở trên đưa ra. Bởi vì trong HTML khi kết thúc </div> có khá nhiều vì vậy mình thường áp dụng cách này. Khi đặt như vậy sau này nhìn lại bạn sẽ dễ hiểu hơn.

– Đối với CSS mình thường viết

/*****************
*     Body CSS   *
*****************/

Cho các khu vực khác nhau. Chẳng hặn như header, body, footer.

/* Khu vực Header */
.header {
    background: #444;
    height: 100px;
    margin-bottom: 20px;
}

/* Khu vực Footer */
.footer {
    height: 200px;
    background: #555;
}

Và mình cũng sẽ tạo ra khoảng cách giữa các khối CSS lớn bằng một khoảng trắng.

Như vậy chúng đã đã cùng nhau tìm hiểu về Comment trong HTML, CSS. Tuy nhìn qua thì đơn giản nhưng áp dụng vào trong code lại là một chuyện không đơn giản. Đôi lúc mình hay quên không chú thích gì cả. Vậy nên bạn nên rèn luyện thói quen chú thích để code tốt hơn.