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
________số 8Câ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