Chúng ta có thể sử dụng lớp và id trong HTML không?

Và đó là, "id" chỉ có thể được sử dụng một lần bên trong phần đánh dấu HTML và "class" có thể được sử dụng nhiều lần tùy ý

Bây giờ, hãy giữ suy nghĩ đó bởi vì có nhiều thứ hơn là sự khác biệt đơn giản này

Cách sử dụng id một lần và lớp bao nhiêu lần bạn muốn

Trước tiên, hãy xem ý tôi là gì với một cái có thể được sử dụng một lần và cái kia bao nhiêu lần tùy thích

Tưởng tượng rằng bạn có ba đoạn văn trong HTML

        
content one

content two

content three

Mẫu số 1

Áp dụng "ID" cho HTML

Nếu bạn muốn áp "id" cho từng đoạn và nếu bạn muốn tuân theo các tiêu chuẩn, bạn chỉ có thể làm điều này

Hãy xem cách tên "id" không được lặp lại, chúng chỉ được sử dụng một lần

        
content one

content two

content three

Mẫu số 2

Áp dụng "lớp" cho HTML

Mặt khác, nếu bạn muốn áp dụng một "lớp" cho mỗi đoạn, bạn có thể làm như "id" khi tên không được lặp lại

        
content one

content two

content three

Mẫu số 3

Hoặc bạn có thể làm điều này khi tên "lớp" được lặp lại

        
content one





content two

content three

Mẫu số 4

Ghi nhớ các lớp học có thể lặp lại

Với các lớp, bạn có thể lặp lại tên bao nhiêu lần tùy thích vì điều này sẽ không tạo ra đánh dấu HTML không hợp lệ như với các tên "id" được lặp lại

Nhưng đây là lớn nhưng

Với các công nghệ trình duyệt ngày nay, bạn thực sự có thể sử dụng tên "id" bao nhiêu lần tùy thích và bạn có thể lặp lại tên mà không tạo ra lỗi cho người dùng cuối (AKA khách truy cập trang web của bạn)

Vì vậy, bạn thực sự có thể làm điều này là tốt

        
content one

content two

content three

Mẫu số 5

Xin đừng làm điều đó

Tuy nhiên, vui lòng không bao giờ làm điều này, không bao giờ lặp lại tên "id" vì nó sai

Sử dụng "id" nhiều lần đi ngược lại các tiêu chuẩn HTML và nó sẽ tạo mã không hợp lệ trên trang web của bạn

Vậy tôi nên sử dụng cái nào?

Vâng, câu trả lời là tùy, nhưng theo quy tắc chung và chỉ khi bạn dự định sử dụng bất kỳ thuộc tính HTML nào trong số này cho mục đích tạo kiểu CSS, tôi sẽ luôn khuyên bạn chỉ sử dụng các lớp vì chúng an toàn hơn để tạo Đánh dấu HTML hợp lệ

Tất nhiên, sẽ có những trường hợp bạn cần sử dụng cả "id" và "class" cùng nhau như khi bạn sử dụng JavaScript hoặc như khi bạn tạo đánh dấu HTML cần cả hai thuộc tính

Một ví dụ điển hình về điều này là đàn accordion CSS thuần túy này hoặc cái này với các dấu cộng và dấu trừ chuyển đổi

Nhưng hãy nhớ rằng, cuối cùng sự lựa chọn luôn là của bạn và với tư cách là một nhà phát triển web dày dạn kinh nghiệm ở Fort Worth Texas, tôi sẽ kết thúc với điều này

Bất cứ thứ gì bạn tạo bằng HTML và CSS, hãy luôn tạo mã hợp lệ

Phần câu hỏi thường gặp

1) Tôi có thể sử dụng lớp và id cùng nhau không?

Có, bạn có thể sử dụng "class" và "id" cùng nhau mà không gặp vấn đề gì. Khuyến nghị duy nhất là luôn sử dụng các tên "id" duy nhất

Không bao giờ sử dụng cùng một tên "id" nhiều lần. Chẳng hạn, có (id="solution") hai lần sẽ không hợp lệ theo tiêu chuẩn HTML

Nhưng không chỉ vậy bởi vì khi sử dụng JavaScript, điều này có thể trở thành vấn đề trong một số trường hợp

Vì vậy, hãy cố gắng luôn sử dụng các tên "id" khác nhau

2) Bạn có thể có hai lớp trong HTML không?

Có, bạn có thể có hai lớp bên trong phần đánh dấu HTML của mình

Các đề xuất duy nhất dành cho bạn nếu bạn định làm điều này là luôn sử dụng các tên “lớp” khác nhau và luôn phân tách các tên “lớp” bằng khoảng trắng

Chính xác như trong ví dụ dưới đây. Xem tên “lớp” “top” và “menu” khác nhau như thế nào và chúng được phân tách bằng một khoảng trắng

Hello world!

Câu hỏi thường gặp mẫu số 1

3) Một phần tử HTML có thể có id và lớp không?

Có, bất kỳ phần tử HTML nào (như div, input, nav, body, v.v.) đều có thể có cả “id” và “class” cùng lúc và đồng thời

Sự khác biệt duy nhất ở đây là “id” chỉ có thể có một giá trị duy nhất và “class” có thể có nhiều hơn một giá trị.

Ví dụ, xem ví dụ dưới đây

Kiểm tra cách “id” có một giá trị duy nhất và “class” có ba giá trị

Không có giới hạn về số lượng giá trị bạn có thể có trong một “lớp” nhưng không nên vượt quá 6

Mặt khác, tất cả điều này có thể trở nên khó hiểu với quá nhiều lớp cùng nhau

Hello world!

Câu hỏi thường gặp mẫu #2

4) Hai div có thể có cùng ID không?

Có, bạn có thể có cùng một “id” trên hai phần tử div khác nhau nhưng điều này không được khuyến khích

Điều này không chỉ đi ngược lại các tiêu chuẩn HTML mà còn có thể tạo ra các vấn đề khác với JavaScript và mã không hợp lệ

Vì vậy, vui lòng luôn sử dụng các tên "id" khác nhau và duy nhất

Chẳng hạn, ví dụ bên dưới sẽ không hợp lệ theo tiêu chuẩn HTML vì bạn đang sử dụng cùng một giá trị "id" "vàng" nhiều lần

Hello world!








This is me!

Câu hỏi thường gặp mẫu số 3

Ví dụ bên dưới sẽ hợp lệ theo tiêu chuẩn HTML vì các giá trị "id" khác nhau

Câu hỏi thường gặp mẫu số 4

5) Các giá trị id HTML có phải là duy nhất không?

Có bởi vì đó là những gì được khuyến nghị bởi các tiêu chuẩn HTML

Hãy nhớ rằng ngày nay bạn có thể sử dụng cùng các giá trị tên “id” mà không tạo ra quá nhiều vấn đề nhưng điều này vẫn KHÔNG được khuyến nghị

Luôn sử dụng tên "id" duy nhất

6) Làm cách nào để sử dụng "id" HTML trong CSS?

Đối với điều đó xin vui lòng truy cập vào liên kết dưới đây

Sử dụng HTML "id" trong CSS của bạn

7) Các phần tử HTML (như body, tag, span, label, p, option, button, Strong) có thể có “id” không?

Có, tất cả các thành phần nội dung có thể có tên "id" nếu bạn muốn

Các phần tử nội dung là tất cả các phần tử bạn sử dụng trong thẻ mở đầu và thẻ kết thúc nội dung

Chỉ cần nhìn vào ví dụ dưới đây

My Content Goes Here


This is a bold message

Câu hỏi thường gặp mẫu số 5

8) Phần tử HTML “id” có thể có dấu cách không?

Bạn có thể thêm dấu cách nếu muốn nhưng điều này không được khuyến khích

Sẽ tốt hơn nếu chỉ sử dụng một tên “id” duy nhất không có khoảng trắng

Chỉ cần ghi nhớ điều này, tiếp tục lăn quả bóng hiện có luôn tốt hơn là tạo một quả bóng mới nếu bạn hiểu ý tôi

Tôi có thể sử dụng ID và lớp trong HTML không?

Tôi có thể sử dụng lớp và ID cùng nhau không?

Bạn có thể sử dụng cả hai thuộc tính id và class trong cùng một thẻ HTML không?