Thuộc tính data-* trong HTML

Ví dụ một đoạn code sử dụng thuộc tính data-* để nhúng dữ liệu tuỳ chỉnh:

<ul>

<li data-loai-vat="chim">Quạ</li>

<li data-loai-vat="cá">Cá voi</li>

<li data-loai-vat="linh trưởng">Khỉ</li>

</ul>
  • Quạ
  • Cá voi
  • Khỉ

Định nghĩa và cách sử dụng

Thuộc tính data-* được sử dụng để lưu trữ dữ liệu tuỳ chỉnh riêng cho trang hoặc cho các ứng dụng.

Thuộc tính data-* cung cấp cho chúng ta khả năng nhúng dữ liệu tuỳ chỉnh lên tất cả các thẻ HTML

Dữ liệu tuỳ chỉnh có thể được sử dụng trong trang chứ JavaScript để tạo tính tương tác tốt hơn với trải nghiệm người dùng (không cần dùng đến Ajax hoặc các truy vấn dữ liệu máy chủ – điều này giúp giảm tải máy chủ – đỡ tốn chi phí hơn).

Thuộc tính data-* bao gồm 2 thành phần:

  1. Tên của thuộc tính không được phép bao gồm bất kỳ ký tự IN HOA nào, và phải có ít nhất một ký tự đằng sau tiền tố “data-“
  2. Giá trị của thuộc tính có thể chứa bất kỳ ký tự nào

Lưu ý: Thuộc tính tuỳ chỉnh với tiền tố “data-” sẽ bị bỏ quả bởi bọ tìm kiếm (user agent).


Trình duyệt hỗ trợ

Thuộc tính  Chrome  IE  FireFox  Safari  Opera
data-* 4.0 5.5 2.0 3.1 9.6

Cú pháp

<element data-*="somevalue">