Microdata trong HTML5
Microdata là một cách được tiêu chuẩn hóa để cung cấp các semantic bổ sung trong trang web của bạn.
Microdata cho bạn định nghĩa các phần tử tùy chỉnh của riêng bạn và bắt đầu nhúng các thuộc tính tùy chỉnh trong các trang web. Ở một mức độ cao, microdata bao gồm một nhóm các cặp tên-giá trị.
Các nhóm này được gọi là các item – mục, và mỗi cặp tên-giá trị là một thuộc tính (property). Các item và các thuộc tính được biểu diễn bởi các phần tử chính quy.
Ví dụ
Để tạo một item, thuộc tính itemscope được sử dụng.
Để thêm một thuộc tính tới một item, thuộc tính itemprop được sử dụng trên một trong những item con.
Ở đây có hai item, mỗi item có thuộc tính "name":
My name is Zara.
My name is Nuha.
Nói chung các thuộc tính có các giá trị mà là các chuỗi nhưng nó có thể có các kiểu dữ liệu sau:
Các thuộc tính Global
Microdata giới thiệu 5 thuộc tính Global sẽ có sẵn cho bất kỳ phần tử nào để sử dụng và cung cấp ngữ cảnh cho các thiết bị về dữ liệu của bạn:
| Thuộc tính | Miêu tả |
|---|---|
| itemscope | Được sử dụng để tạo một item. Thuộc tính này là một thuộc tính logic mà nói rằng có Microdata trên trang này, và đây là nơi nó bắt đầu. |
| itemtype | Thuộc tính này là một URL hợp lệ mà định nghĩa item và cung cấp ngữ cảnh cho các thuộc tính. |
| itemid | Thuộc tính này là bộ nhận diện global cho item |
| itemprop | Thuộc tính này định nghĩa một thuộc tính của item |
| itemref | Thuộc tính này cung cấp một danh sách các phần tử bổ sung để tìm các cặp tên-giá trị của item. |
Các kiểu dữ liệu của thuộc tính
Nói chung các thuộc tính có các giá trị mà là các chuỗi được đề cập trong ví dụ trên, nhưng chúng cũng có thể có các giá trị là các URL. Ví dụ sau có một thuộc tính, "image", giá trị của nó là một URL:
Các thuộc tính cũng có thể có các giá trị là ngày, thời gian hoặc ngày và thời gian. Điều này được thực hiện bởi sử dụng phần tử time và thuộc tính datetime của nó.
My birthday is:
Các thuộc tính chính nó cũng có thể là nhóm các cặp tên-giá trị, bằng việc đặt thuộc tính itemscope trên phần tử mà khai báo thuộc tính đó.
Hỗ trợ Microdata API
Nếu một trình duyệt hỗ trợ HTML5 Microdata API, nó sẽ là hàm getItem() trên đối tượng tài liệu global. Nếu trình duyệt không hỗ trợ Microdata, hàm getItem() sẽ không được định nghĩa.
function supports_microdata_api() {
return !!document.getItems;
}
Modernizr vẫn không hỗ trợ việc kiểm tra cho Microdata API, vì thế bạn sẽ cần sử dụng hàm đó như đã liệt kê ở trên.
HTML5 Microdata chuẩn bao gồm cả HTML Markup (chủ yếu cho phương tiện tìm kiếm) và tập hợp các hàm DOM (chủ yếu cho trình duyệt).
Bạn có thể bao gồm Microdata Markup trong các trang web của bạn, và các phương tiện tìm kiếm mà không hiểu các thuộc tính microdata sẽ bỏ qua chúng. Nhưng nếu bạn cần truy cập hoặc thao tác microdata thông qua DOM, bạn sẽ cần kiểm tra có hay không trình duyệt hỗ trợ Microdata DOM API.
Định nghĩa Microdata Vocabulary
Để định nghĩa Microdata Vocabulary, bạn cần một URL không gian tên mà chỉ tới một trang web đang làm việc. Ví dụ: http://data-vocabulary.org/Person có thể được sử dụng như là không gian tên cho một Microdata Vocabulary cá nhân với các thuộc tính được đặt tên như sau:
name - Tên người như là một chuỗi đơn.
Photo - Một URL tới một hình ảnh của người đó.
URL - Một Website thuộc về người đó.
Sử dụng các thuộc tính trên như sau:
Andy Runie
My Blog
Google hỗ trợ Microdata như là một phần của chương trình Rich Snippets của họ. Khi Crawler phân tích trang web của bạn và tìm thấy thuộc tính microdata mà phù hợp với http://data-vocabulary.org/Person, nó phân tích những thuộc tính này và lưu chúng cùng với phần còn lại của dữ liệu trang.
Bạn có thể kiểm tra ví dụ trên sử dụng Rich Snippets Testing Tool.
Bài học HTML5 phổ biến khác tại hoconline.club: