Các thuộc tính trong HTML5

Như đã giải thích trong chương trước, các phần tử có thể chứa các thuộc tính mà được sử dụng để thiết lập các thuộc tính đa dạng của một phần tử.

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 chỉ có thể được xác định trong thẻ mở và phải không bao giờ được sử dụng trong thẻ đóng.

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.

Các thuộc tính chuẩn

Dưới đây liệt kê các thuộc tính được hỗ trợ bởi hầu hết các thẻ HTML5:

Thuộc tínhTùy chọnChức năng
accesskeyNgười dùng định nghĩaXác định một phím tắt để truy cập một phần tử.
alignright, left, centerCác thẻ căn chỉnh ngang.
backgroundURLĐặt một ảnh nền sau một phần tử.
bgcolorGiá trị số, thập lục phân, RBGĐặt một màu nền sau một phần tử.
classNgười dùng định nghĩaPhân loại một phần tử để sử dụng với Cascading Style Sheets.
contenteditabletrue, falseXá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.
contextmenuMenu idXác định menu bối cảnh cho một phần tử
data-XXXXNgười dùng định nghĩaCá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-".
draggabletrue,false, autoXác định có hoặc không một người dùng được phép kéo một phần tử.
heightGiá trị sốXác định chiều cao của bảng, hình ảnh, hoặc ô bảng.
hiddenhiddenXác định có hoặc không phần tử nên là nhìn thấy hoặc không.
idNgười dùng định nghĩaĐặt tên một phần tử để sử dụng với Cascading Style Sheets.
itemDanh sách các phần tửĐược sử dụng để tạo nhóm các phần tử.
itempropDanh sách các mụcĐược sử dụng để tạo nhóm các mục.
spellchecktrue, falseXác định nếu phần tử đó phải được kiểm tra lỗi chính tả và ngữ pháp.
styleCSS Style sheetXác định một style nội tuyến cho một phần tử.
subjectNgười dùng định nghĩa IDXác định mục tương ứng của phần tử.
tabindexSố TabXác định thứ tự tab của một phần tử.
titleNgười dùng định nghĩa"Pop-up" title cho các phần tử của bạn.
valigntop, middle, bottomCác thẻ căn chỉnh dọc trong một phần tử HTML.
widthGiá trị sốXác định độ rộng của bảng, hình ảnh hoặc ô bảng.

Bạn truy cập vào trang sau để quan sát các thẻ HTML5 và các thuộc tính liên quan: Các thẻ HTML5.

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-subjectdata-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.

Bình luận