Nếu bạn đã đọc bài viết gần đây của tôi về “HTML lớp là gì?” . Bài viết này sẽ giải đáp câu trả lời đó và cung cấp cho bạn một vài hướng dẫn khi sử dụng id trong HTML

Các thuộc tính được thêm vào các phần tử trong tài liệu HTML để tạo điều kiện tạo kiểu thông qua các tệp CSS hoặc thêm chức năng thông qua Javascript. Thuộc tính mà bạn sẽ thấy thường xuyên nhất là thuộc tính lớp, nhưng thỉnh thoảng bạn có thể bắt gặp thuộc tính “id”

Thuộc tính “id” khác với thuộc tính lớp vì nó là duy nhất cho một tài liệu. Nếu bạn muốn một kiểu áp dụng cho một thành phần trên trang, bạn nên sử dụng “id”. Nếu bạn muốn áp dụng một kiểu cho nhiều phần tử trên một trang, bạn nên sử dụng thuộc tính lớp

Biết khi nào nên sử dụng “id” hoặc lớp trong HTML chỉ là một phần lý do tại sao id tồn tại. Chúng có các chức năng và quy tắc khác áp dụng cho chúng mà bạn có thể tìm thấy bên dưới

Mục lục

Tôi có thể thêm ID vào những yếu tố nào?

Nếu bạn đã quyết định bắt đầu học HTML vào năm 2022, giống như tôi, thì có lẽ bạn đã bắt đầu học HTML5

In HTML5, the “id” attribute can be applied to any HTML tag or element, including tags like the and , which is one of the differences between HTML5 and its predecessor.

Tôi có thể sử dụng cùng một id bao nhiêu lần trên một trang?

Một "id" được yêu cầu là duy nhất trên một tài liệu. Điều này có nghĩa là bạn chỉ có thể có một “id” trùng tên trên tài liệu

Tôi nhận thấy rằng không bao giờ có lý do chính đáng để sử dụng cùng một “id” trên một trang nhiều lần. “Id” là mã định danh duy nhất cho một phân đoạn trang. Thuộc tính lớp nên được sử dụng khi bạn muốn áp dụng cùng một kiểu cho một số thành phần trên một trang

Quy tắc thuộc tính id HTML

Ba quy tắc chính áp dụng cho thuộc tính “id”

Thứ nhất, thuộc tính “id” phải là duy nhất cho tài liệu. Thuộc tính “id” phải bắt đầu bằng một chữ cái, có thể là chữ hoa hoặc chữ thường. Các ký tự tiếp theo có thể là chữ cái, số, dấu gạch nối, dấu gạch dưới, dấu hai chấm và dấu chấm

Tại sao sử dụng thuộc tính id trên lớp?

Nếu bạn chỉ mới bắt đầu hành trình viết mã của mình, bạn sẽ không sai khi đặt câu hỏi này bởi vì thoạt nhìn, có vẻ như id và lớp giống nhau, nhưng id có vẻ hạn chế hơn, vậy tại sao lại sử dụng “id”

Một trong những lý do chính để sử dụng thuộc tính “is” là vì JavaScript có phương thức “getElementById”. Gọi phương thức này trong JavaScript sẽ cho phép bạn chọn và áp dụng tập lệnh cho một thành phần duy nhất trong tài liệu của mình

Một phần tử có thể có “ID” và thuộc tính lớp không?

Có, các phần tử HTML có thể có thuộc tính “id” và lớp. Khi cả hai thuộc tính được gán, thuộc tính lớp có khả năng áp dụng kiểu CSS trong khi thuộc tính “id” đang áp dụng tập lệnh cho phần tử

Phần kết luận

Mặc dù id và class thoạt nhìn có vẻ giống nhau, nhưng bạn sẽ nhanh chóng thấy rằng chúng phục vụ một mục đích nào đó khi bạn bắt đầu làm việc với JavaScript

Bạn có biết sự khác biệt giữa class và id và khi nào bạn nên sử dụng id hoặc class trong HTML không?

Tôi hy vọng bài viết này đã truyền cảm hứng cho bạn thực hiện bước nhảy vọt đó và bắt đầu học viết mã. Nhấp vào đây để gặp gỡ các lập trình viên mới khác như bạn và tham gia cộng đồng của chúng tôi

Chúng tôi cần các cách để mô tả nội dung trong tài liệu HTML/XHTML. Các phần tử cơ bản như

,

0 và

1 thường sẽ thực hiện công việc, nhưng bộ thẻ cơ bản của chúng tôi không bao gồm mọi loại phần tử trang hoặc lựa chọn bố cục có thể có. Đối với điều này, chúng tôi cần ID và Lớp học. Ví dụ:

2, điều này sẽ cho chúng tôi cơ hội nhắm mục tiêu danh sách không có thứ tự này một cách cụ thể, để chúng tôi có thể thao tác nó một cách duy nhất với các danh sách không có thứ tự khác trên trang của chúng tôi. Hoặc chúng tôi có thể có một phần trên trang của chúng tôi không có thẻ liên quan để biểu thị nó, ví dụ: chân trang, nơi chúng tôi có thể làm điều gì đó như thế này.

0. Hoặc có lẽ chúng tôi có các hộp trong thanh bên để giữ nội dung ở đó được phân tách theo một cách nào đó.

1

Các ID và Lớp này là các “móc nối” mà chúng ta cần xây dựng thành phần đánh dấu để có được chúng. Rõ ràng là CSS cần những thứ này để chúng ta có thể xây dựng bộ chọn và tạo kiểu, nhưng các ngôn ngữ web khác như JavaScript cũng phụ thuộc vào chúng. Nhưng sự khác biệt giữa chúng là gì?

ID là duy nhất

• Mỗi phần tử chỉ có thể có một ID
• Mỗi trang chỉ có thể có một phần tử với ID đó

Khi tôi lần đầu tiên học những thứ này, tôi đã nghe đi nghe lại rằng bạn chỉ nên sử dụng ID một lần, nhưng bạn có thể sử dụng các lớp nhiều lần. Về cơ bản, nó lọt vào tai này và chui ra tai kia bởi vì đối với tôi, nó giống như một “quy tắc ngón tay cái” tốt hơn là một điều gì đó cực kỳ quan trọng. Nếu bạn hoàn toàn là một người HTML/CSS, thái độ này có thể tồn tại bởi vì đối với bạn, họ thực sự dường như không làm điều gì khác biệt

Đây là một. mã của bạn sẽ không vượt qua xác thực nếu bạn sử dụng cùng một ID trên nhiều phần tử. Xác thực phải quan trọng đối với tất cả chúng ta, vì vậy chỉ riêng điều đó đã là một điều lớn. Chúng ta sẽ xem xét thêm các lý do cho sự độc đáo khi chúng ta tiếp tục

Các lớp không phải là duy nhất

• Bạn có thể sử dụng cùng một lớp trên nhiều phần tử
• Bạn có thể sử dụng nhiều lớp trên cùng một phần tử

Mọi thông tin kiểu dáng cần được áp dụng cho nhiều đối tượng trên một trang phải được thực hiện với một lớp. Lấy ví dụ một trang có nhiều “widget”

Giờ đây, bạn có thể sử dụng tên lớp “tiện ích con” làm móc nối của mình để áp dụng cùng một bộ kiểu dáng cho từng cái trong số này. Nhưng nếu bạn cần một trong số chúng lớn hơn cái kia, nhưng vẫn chia sẻ tất cả các thuộc tính khác thì sao?

Không cần tạo một tên lớp hoàn toàn mới ở đây, chỉ cần áp dụng một lớp mới ngay trong thuộc tính lớp. Các lớp này được phân định bằng dấu cách và hầu hết các trình duyệt đều hỗ trợ bất kỳ số lượng nào trong số chúng (thực tế, nó giống như hàng nghìn, nhưng nhiều hơn mức bạn cần)

Không có giá trị mặc định của trình duyệt cho bất kỳ ID hoặc Lớp nào

Theo mặc định, việc thêm tên lớp hoặc ID vào một phần tử sẽ không ảnh hưởng gì đến phần tử đó

Đây là điều khiến tôi khó chịu khi mới bắt đầu. Bạn đang làm việc trên một trang web và phát hiện ra rằng việc áp dụng một tên lớp cụ thể sẽ khắc phục sự cố mà bạn đang gặp phải. Sau đó, bạn chuyển sang một trang web khác có vấn đề tương tự và cố gắng sửa nó với cùng tên lớp đó vì nghĩ rằng bản thân tên lớp có một số thuộc tính kỳ diệu chỉ để phát hiện ra rằng nó không hoạt động

Các lớp và ID không có bất kỳ thông tin kiểu dáng nào đối với chúng. Chúng yêu cầu CSS để nhắm mục tiêu chúng và áp dụng kiểu dáng

Mã vạch và số sê-ri

Có lẽ một sự tương tự tốt ở đây là mã vạch và số sê-ri. Lấy một chiếc iPod trong một cửa hàng. Trên bao bì sẽ có mã vạch. Điều này cho cửa hàng biết sản phẩm là gì, vì vậy khi được quét, hệ thống sẽ biết chính xác sản phẩm là gì và giá của nó là bao nhiêu. Nó thậm chí có thể biết nó có màu gì hoặc nó được giữ ở đâu trong cửa hàng. Tất cả iPod cùng loại này đều có cùng một mã vạch trên chúng

iPod cũng sẽ có một số sê-ri trên đó, số này hoàn toàn độc nhất đối với bất kỳ iPod nào khác (hoặc bất kỳ thiết bị nào khác) trên thế giới. Số sê-ri không biết giá. Có thể, nhưng đối với cửa hàng thì đây không phải là cách hiệu quả để lưu trữ và sử dụng dữ liệu đó. Sử dụng mã vạch dễ dàng hơn nhiều, vì vậy, ví dụ: nếu giá thay đổi, bạn chỉ có thể thay đổi giá cho mã vạch đó chứ không phải từng số sê-ri riêng lẻ trong hệ thống của mình

Điều này giống như ID và Lớp học. Thông tin có thể sử dụng lại nên được lưu giữ trong một lớp và thông tin hoàn toàn duy nhất nên được lưu giữ trong một ID

ID có chức năng trình duyệt đặc biệt

Các lớp không có khả năng đặc biệt trong trình duyệt, nhưng ID có một mẹo rất quan trọng trong tay áo của chúng. Đây là "giá trị băm" trong URL. Nếu bạn có một URL như http. //tên miền của bạn. com#comments, trình duyệt sẽ cố gắng định vị phần tử có ID là “bình luận” và sẽ tự động cuộn trang để hiển thị phần tử đó. Điều quan trọng cần lưu ý ở đây là trình duyệt sẽ cuộn bất kỳ phần tử nào nó cần để hiển thị phần tử đó, vì vậy nếu bạn đã làm điều gì đó đặc biệt như vùng DIV có thể cuộn trong phần thân thông thường của bạn, thì div đó cũng sẽ được cuộn.

Đây là một lý do quan trọng ngay tại đây tại sao ID phải hoàn toàn độc nhất lại quan trọng. Vì vậy, trình duyệt của bạn biết nơi để cuộn

Các phần tử có thể có CẢ HAI

Không có gì ngăn cản bạn có cả ID và Class trên một phần tử. Trên thực tế, nó thường là một ý tưởng rất hay. Lấy ví dụ đánh dấu mặc định cho mục danh sách nhận xét WordPress

Nó có một lớp được áp dụng cho nó mà bạn có thể muốn tạo kiểu cho tất cả các nhận xét trên trang, nhưng nó cũng có một giá trị ID duy nhất (được tạo động bởi WordPress, khá độc đáo). Giá trị ID này hữu ích cho liên kết trực tiếp. Bây giờ tôi có thể liên kết trực tiếp đến một nhận xét cụ thể trên một trang cụ thể một cách dễ dàng

CSS không quan tâm

Về CSS, không có gì bạn có thể làm với ID mà bạn không thể làm với Class và ngược lại. Tôi nhớ khi lần đầu tiên tôi học CSS và tôi đã gặp một vấn đề, đôi khi tôi sẽ thử và khắc phục sự cố bằng cách chuyển đổi giữa các giá trị này. Không. CSS không quan tâm

JavaScript quan tâm

Người JavaScript có lẽ đã đồng điệu hơn với sự khác biệt giữa các lớp và ID. JavaScript phụ thuộc vào việc chỉ có một phần tử trang với bất kỳ

2 cụ thể nào, nếu không, hàm

3 thường được sử dụng sẽ không đáng tin cậy. Đối với những người quen thuộc với jQuery, bạn sẽ biết việc thêm và xóa các lớp vào các phần tử trang dễ dàng như thế nào. Nó là một chức năng gốc và tích hợp sẵn của jQuery. Lưu ý rằng không có chức năng như vậy tồn tại cho ID. JavaScript không có trách nhiệm thao túng các giá trị này, nó sẽ gây ra nhiều vấn đề hơn mức đáng có

Nếu bạn không cần chúng, đừng sử dụng chúng

Như bạn có thể thấy, các lớp và ID rất quan trọng và chúng tôi dựa vào chúng hàng ngày để thực hiện thao tác tạo kiểu và trang mà chúng tôi cần thực hiện. Tuy nhiên, bạn nên sử dụng chúng một cách thận trọng và đúng ngữ nghĩa

Điều này có nghĩa là tránh những thứ như thế này

CSS-Tricks.com

Chúng ta đã biết phần tử này là một liên kết, nó là một phần tử neo. Ở đây không có nhu cầu cụ thể để áp dụng một lớp, vì chúng ta đã có thể áp dụng kiểu dáng thông qua thẻ của nó

Cũng nên tránh điều này

________số 8

ID được sử dụng phù hợp ở đây vì trang có thể sẽ chỉ có một cột bên phải, nhưng tên không phù hợp. Hãy thử và mô tả ngữ cảnh của phần tử, không phải vị trí của phần tử đó hoặc phần tử đó trông như thế nào. Một ID ở đây là “thanh bên” sẽ phù hợp hơn

Microformats chỉ là tên lớp cụ thể

Nghĩ rằng vi định dạng là trên đầu của bạn? . Chúng chỉ là phần đánh dấu thông thường sử dụng tên lớp được tiêu chuẩn hóa cho thông tin mà chúng chứa. Kiểm tra một vCard tiêu chuẩn