Bài 3: Một số thuộc tính HTML5
Một số thuộc tính được định nghĩa chung và có thể được sử dụng trong bất kỳ phần tử nào, trong khi thuộc tính khác chỉ được định nghĩa cho các phần tử riêng. Tất cả thuộc tính có một tên và một giá trị và trông giống như ví dụ sau.
Sau đây là ví dụ về thuộc tính HTML5 mà minh họa cách đánh dấu một phần tử div với một thuộc tính với tên class sử dụng một giá trị là “example”:
<div class="example">...</div>
Các thuộc tính HTML5 là không phân biệt kiểu chữ và có thể được viết bởi chữ hoa hoặc kiểu hỗn hợp, mặc dù quy ước phổ biến nhất là chữ thường.
1. Bảng thuộc tính chuẩn
| Thuộc tính | Tùy chọn | Chức năng |
|---|---|---|
| accesskey | Người dùng định nghĩa | Xác định một phím tắt để truy cập một phần tử. |
| align | right, left, center | Các thẻ căn chỉnh ngang. |
| background | URL | Đặt một ảnh nền sau một phần tử. |
| bgcolor | Giá trị số, thập lục phân, RBG | Đặt một màu nền sau một phần tử. |
| class | Người dùng định nghĩa | Phân loại một phần tử để sử dụng với Cascading Style Sheets. |
| contenteditable | true, false | Xác định nếu người sử dụng có thể chỉnh sửa nội dung phần tử hoặc không. |
| contextmenu | Menu id | Xác định menu bối cảnh cho một phần tử |
| data-XXXX | Người dùng định nghĩa | Các thuộc tính Custom. Tác giả của một tài liệu HTML có thể định nghĩa các thuộc tính riêng của họ. Phải bắt đầu với “data-“. |
| draggable | true,false, auto | Xác định có hoặc không một người dùng được phép kéo một phần tử. |
| height | Giá trị số | Xác định chiều cao của bảng, hình ảnh, hoặc ô bảng. |
| hidden | hidden | Xác định có hoặc không phần tử nên là nhìn thấy hoặc không. |
| id | Người dùng định nghĩa | Đặt tên một phần tử để sử dụng với Cascading Style Sheets. |
| item | Danh sách các phần tử | Được sử dụng để tạo nhóm các phần tử. |
| itemprop | Danh sách các mục | Được sử dụng để tạo nhóm các mục. |
| spellcheck | true, false | Xác định nếu phần tử đó phải được kiểm tra lỗi chính tả và ngữ pháp. |
| style | CSS Style sheet | Xác định một style nội tuyến cho một phần tử. |
| subject | Người dùng định nghĩa ID | Xác định mục tương ứng của phần tử. |
| tabindex | Số Tab | Xác định thứ tự tab của một phần tử. |
| title | Người dùng định nghĩa | “Pop-up” title cho các phần tử của bạn. |
| valign | top, middle, bottom | Các thẻ căn chỉnh dọc trong một phần tử HTML. |
| width | Giá trị số | Xác định độ rộng của bảng, hình ảnh hoặc ô bảng. |
2. Các thuộc tính Custom (tùy chỉnh)
Là các thuộc tính mà tác giả HTML định nghĩa riêng cho họ. Đây là một tính năng mới được giới thiệu trong HTML5.
Một thuộc tính custom bắt đầu với data- và sẽ được đặt tên dựa trên yêu cầu của bạn. Sau đây là ví dụ đơn giản:
<div class="example" data-subject="physics" data-level="complex"> ... </div>
Hai thuộc tính tùy chỉnh: data-subject và data-level hoàn toàn hợp lệ trong HTML5. Bạn sẽ có thể nhận các giá trị của các thuộc tính này bởi sử dụng JavaScript APIs hoặc CSS theo cách tương tự như khi bạn nhận các thuộc tính chuẩn khác.
