Question

Giải thích về thuộc tính data-* trong HTML. Cách sử dụng và lợi ích của thuộc tính này là gì?

Answer 1

### Thuộc tính `data-*` trong HTML
Thuộc tính `data-*` là một thuộc tính tùy chỉnh trong HTML, cho phép bạn lưu trữ dữ liệu bổ sung trong các phần tử mà không làm ảnh hưởng đến cấu trúc hoặc hiển thị của trang web. Các thuộc tính này có thể được đặt tên theo bất kỳ cách nào, miễn là bắt đầu bằng "data-" (ví dụ: `data-user-id`, `data-role`).

### Cách sử dụng
Bạn có thể thêm thuộc tính `data-*` vào bất kỳ thẻ HTML nào. Ví dụ:

```html
<div data-user-id="123" data-role="admin">Người dùng</div>
```

Trong JavaScript, bạn có thể truy cập các giá trị này như sau:

```javascript
const userId = document.querySelector('div').dataset.userId; // "123"
const role = document.querySelector('div').dataset.role; // "admin"
```

### Lợi ích của thuộc tính `data-*`
1. **Lưu trữ thông tin tùy chỉnh**: Giúp lưu trữ dữ liệu mà không cần tạo thêm thẻ hoặc thuộc tính không chuẩn.

2. **Dễ dàng truy cập qua JavaScript**: Các giá trị này có thể được dễ dàng truy cập và sử dụng trong mã JavaScript, giúp tương tác với DOM linh hoạt hơn.

3. **Tính tổ chức**: Giúp giữ cho mã HTML gọn gàng và dễ hiểu, vì dữ liệu liên quan được lưu trữ ngay bên cạnh phần tử mà nó liên quan.

4. **Không ảnh hưởng đến SEO**: Dữ liệu được lưu trữ bằng thuộc tính `data-*` không ảnh hưởng đến cách tìm kiếm hoặc lập chỉ mục của công cụ tìm kiếm.

Tóm lại, thuộc tính `data-*` là công cụ hữu ích để lưu trữ dữ liệu tùy chỉnh trong HTML, giúp cải thiện khả năng tương tác và tổ chức mã nguồn.