Bài 12 HTML - Phân biệt ID và Class trong HTML

Trong bài này mình sẽ hướng dẫn cách sử dụng ID và class trong HTML, đây là hai thuộc tính rất quan trọng, nó giúp chúng ta kết hợp với CSS một cách dễ dàng.

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiên, với hai thuộc tính ID và Class thì 100% các thẻ đều có thể sử dụng. ID giống như mã số chứng minh của các bạn, còn class giống như giới tính của các bạn vậy đó. Chi tiết thế nào thì chúng ta cùng tìm hiểu ngay nhé.

1. ID trong HTML là gì?

ID trong HTML là một chuỗi xác định và duy nhất, dùng để gắn cho một thẻ HTML nào đó. Trong một file HTML thì ID là duy nhất, nghĩa là bạn không thể đặt 1 ID cho 2 thẻ HTML.

Việc đặt tên ID nên tuân theo quy tắc sau:

• Tên đặt tiếng Anh và không dấu, không có khoảng trắng, không có ký tự đặc biệt.
• Đặt tên có ý nghĩa, giúp nhìn vào ID là ta biết được thẻ đó có công dụng là gì.

Ví dụ: Mình tạo một hộp thoại hiển thị mã giảm giá, và mình sẽ dùng một thẻ div để bao quanh toàn bộ hộp thoại đó. Sau đó mình cũng không quên đặt ID cho nó là "discount_wrapper".

<div id="discount_wrapper">
</div>

Lúc này, nếu bạn muốn sử dụng CSS để chỉnh cho thẻ này thì sử dụng cú pháp sau:

#discount_wrapper{
    background:red;
    height: 300px
}

Tóm lại, muốn sử dụng CSS để truy vấn đến ID thì sử dụng cú pháp #ten_id.

2. Class trong HTML là gì?

Nếu ID là duy nhất trong một file tài liệu HTML thì class thì lại khác, nó được dùng để thiết lập một lớp các đối tượng có chung một đặc điểm. Vì vậy, bạn có thể gắn một class cho nhiều thẻ HTML khác nhau.

Việc đặt tên cho class cũng nên tuân thủ theo quy tắc mà mình đã hướng dẫn trong phần 1 nhé.

Ví dụ: Mình muốn hiển thị danh sách bài viết, và mỗi bài viết mình sẽ gọi nó là một block. Như vậy, nếu có 100 bài thì mình sẽ cần đến 100 blocks. Nếu chúng ta sử dụng ID để đặt cho 100 blocks đó thì rất khó. Vì vậy, ta sẽ đặt một class cho 100 blocks, và ta chỉ cần viết CSS cho class đó là 100 block kia sẽ được áp dụng CSS ngay.

<div class="post">
    Post 1
</div>
<div class="post">
    Post 2
</div>
<div class="post">
    Post 3
</div>
<div class="post">
    Post 4
</div>
<div class="post">
    Post 5
</div>
<div class="post">
    Post 6
</div>

Trong CSS mình sẽ viết như sau:

.post{
    background:red;
    height: 100px;
    margin: 20px;
}

Như vậy, chúng ta sử dụng dấu . cho class và dấu # cho ID.

3. Khi nào sử dụng ID và khi nào sử dụng class?

Đây là câu hỏi mà rất nhiều bạn đã hỏi mình. Để trả lời thì bạn phải xem lại hai khái niệm mà mình đã trình bày ở trên.

• ID là duy nhất trong một tập tài liệu HTML. Vì vậy, bạn nên đặt nó nếu cấu trúc trang web chỉ tồn tại một vị trí mà thôi, tức CSS không có tính kế thừa.
• Class thì khác, có thể gắn class cho nhiều thẻ HTML khác nhau. Vì vậy, bạn nên sử dụng trong trường hợp muốn các thẻ HTML khác nhau có thể kế thừa CSS của nhau.

Qua bày này mình đã hướng dẫn xong cách sử dụng ID và class trong HTML. Đây là vấn đề khá quan trọng, nó là tiền đề để các bạn học những bài tiếp theo đấy nhé. Hãy xem thật kỹ, nếu có thắc mắc gì thì hãy bình luận để mình giải đáp.