Phân biệt class, id, div

Trong HTML và CSS, class, id, và div là ba khái niệm quan trọng và được sử dụng để tạo và định dạng các phần tử trên trang web.

“class” được sử dụng để định nghĩa một nhóm các phần tử có chung một kiểu định dạng với cú pháp được khai báo với thuộc tính class. Theo đó một phần tử có thể có nhiều lớp (class). Các lớp có thể được sử dụng nhiều lần trên các phần tử khác nhau. Ví dụ:

<div class="container">
     <p class="text-center">Hello World</p> 
</div>

.container { width: 100%; } 
.text-center { text-align: center; }

“id” được sử dụng để định danh một phần tử duy nhất trên trang với cú pháp được khai báo với thuộc tính id. Mỗi id phải là duy nhất trong một trang HTML. Một phần tử chỉ có thể có một id. Ví dụ:

<div id="header">
     <p id="welcome-message">Welcome to    my website</p> 
</div>

#header {background-color: blue;}
#welcome-message {font-size: 20px;}

“div” được sử dụng là một phần tử khối (block element) được sử dụng để chứa các phần tử khác, nhằm mục đích tạo bố cục hoặc nhóm các phần tử liên quan lại với nhau được khai báo với thẻ div. div không có ý nghĩa ngữ nghĩa cụ thể mà chủ yếu được sử dụng để tạo cấu trúc và bố cục trang. Ví dụ:

<div class="content">
    <div class="section">
        <p>This is a section.</p>
    </div>
    <div class="section">
        <p>This is another section.</p>
    </div>
</div>

Tóm lại
“class” sử dụng để nhóm các phần tử có chung một kiểu định dạng.
“id” sử dụng để định danh một phần tử duy nhất.
“div” sử dụng để tạo bố cục và nhóm các phần tử lại với nhau mà không có ý nghĩa ngữ nghĩa cụ thể.