Số nhận dạng duy nhất trong các trang web
Theo W3C, thuộc tính ID trong HTML là:
một mã định danh duy nhất cho phần tử
Đây là một mô tả rất đơn giản về một thuộc tính rất mạnh. Thuộc tính ID có thể thực hiện một số hành động cho các trang Web:
- Bộ chọn biểu định kiểu - Đây là hàm mà hầu hết mọi người sử dụng thuộc tính ID cho. Bởi vì chúng là duy nhất, bạn có thể chắc chắn rằng bạn sẽ tạo kiểu chỉ một mục trên trang Web của bạn khi bạn tạo kiểu bằng cách sử dụng thuộc tính ID. Nhược điểm của việc sử dụng một ID cho mục đích tạo kiểu tóc là nó có một mức độ đặc hiệu rất cao, điều này có thể làm cho nó trở nên rất khó khăn nếu bạn cần ghi đè một kiểu cho một số lý do sau này trong một bản định kiểu. Do đó, các thực hành Web hiện tại dựa vào việc sử dụng các lớp và bộ chọn lớp thay cho các ID và bộ chọn ID cho các mục đích tạo kiểu chung.
- Các neo được đặt tên để liên kết tới - Trình duyệt web cho phép bạn nhắm mục tiêu các vị trí chính xác trong tài liệu Web của bạn bằng cách trỏ đến ID ở cuối URL. Bạn chỉ cần thêm id vào cuối URL trang, trước dấu thăng (#). Bạn cũng có thể liên kết tới các neo này bằng chính trang đó bằng cách thêm dấu thăng (#) và tên ID trong thuộc tính href cho phần tử. Ví dụ: nếu bạn có một bộ phận có ID liên hệ, bạn có thể liên kết với nó trên trang đó với điều này:
Đây là văn bản liên kết - Tham chiếu cho tập lệnh - Nếu bạn viết bất kỳ hàm Javascript nào, bạn sẽ muốn sử dụng thuộc tính ID để bạn có thể thực hiện thay đổi đối với phần tử chính xác trên trang bằng tập lệnh của mình.
- Xử lý khác - Id cho phép bạn xử lý tài liệu Web của mình theo bất kỳ cách nào bạn cần. Ví dụ: bạn có thể trích xuất HTML vào cơ sở dữ liệu và thuộc tính ID xác định các trường.
Quy tắc sử dụng thuộc tính ID
Có một vài quy tắc bạn phải tuân theo để có tài liệu hợp lệ sử dụng thuộc tính id ở bất kỳ đâu trong tài liệu:
- ID phải bắt đầu bằng một chữ cái (az hoặc AZ)
- Tất cả các ký tự tiếp theo có thể là chữ cái, số (0-9), dấu gạch ngang (-), dấu gạch dưới (_), dấu hai chấm (:) và dấu chấm (.).
- Mỗi ID phải là duy nhất trong tài liệu. Tại sao?
Sử dụng thuộc tính ID
Một khi bạn đã xác định được một phần tử duy nhất của trang Web của bạn, bạn có thể sử dụng các trang mẫu để tạo kiểu cho một phần tử.
Liên hệ chúng tôi
Có một số nội dung văn bản ở đây
div # contact-section {background: # 0cf;}
-hoặc-
# contact-section {background: # 0cf;}
Một trong hai bộ chọn đó sẽ hoạt động. Người đầu tiên (div # contact-section) sẽ nhắm mục tiêu một bộ phận với thuộc tính ID của "phần liên hệ". Điều thứ hai (# phần liên hệ) vẫn sẽ nhắm mục tiêu phần tử có ID của "phần liên hệ", nó sẽ không biết rằng những gì nó đang tìm kiếm là một bộ phận. Kết quả cuối cùng của kiểu dáng sẽ giống hệt nhau.
Bạn cũng có thể liên kết đến phần tử cụ thể đó mà không cần thêm bất kỳ thẻ nào:
Liên kết đến thông tin liên hệ
Tham chiếu đoạn văn đó trong tập lệnh của bạn bằng phương thức JavaScript "getElementById":
document.getElementById ("phần liên hệ")
Thuộc tính ID vẫn rất hữu ích trong HTML, mặc dù bộ chọn lớp đã thay thế chúng cho hầu hết các mục đích tạo kiểu chung. Khả năng sử dụng thuộc tính ID như một cái móc cho các kiểu dáng, trong khi cũng sử dụng chúng làm neo cho các liên kết hoặc các mục tiêu cho các kịch bản, có nghĩa là chúng vẫn có một vị trí quan trọng trong thiết kế web ngày nay.
Biên tập bởi Jeremy Girard