HTML5 - Vi dữ liệu

Vi dữ liệu là một cách tiêu chuẩn hóa để cung cấp ngữ nghĩa bổ sung trong các trang web của bạn.

Vi dữ liệu cho phép bạn xác định các phần tử tùy chỉnh của riêng mình và bắt đầu nhúng các thuộc tính tùy chỉnh vào các trang web của bạn. Ở cấp độ cao, vi dữ liệu bao gồm một nhóm các cặp tên-giá trị.

Các nhóm được gọi là itemsvà mỗi cặp tên-giá trị là một property. Các mục và thuộc tính được biểu diễn bằng các phần tử thông thường.

Thí dụ

Để tạo một mục, itemscope thuộc tính được sử dụng.
Để thêm một thuộc tính vào một mục, itemprop thuộc tính được sử dụng trên một trong những con của mặt hàng.

Ở đây có hai mục, mỗi mục có thuộc tính "name" -

<html>
   <body>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Zara</span>.</p>
      </div>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Nuha</span>.</p>
      </div>
      
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Các thuộc tính thường có các giá trị là chuỗi nhưng nó có thể có các kiểu dữ liệu sau:

Thuộc tính toàn cầu

Microdata giới thiệu năm thuộc tính toàn cục 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 máy về dữ liệu của bạn.

Sr.No.	Thuộc tính & Mô tả
1	itemscope Điều này được sử dụng để tạo một mục. Thuộc tính itemscope là thuộc tính Boolean cho biết rằng có Vi dữ liệu trên trang này và đây là nơi nó bắt đầu.
2	itemtype Thuộc tính này là một URL hợp lệ xác định mục và cung cấp ngữ cảnh cho các thuộc tính.
3	itemid Thuộc tính này là định danh toàn cầu cho mặt hàng.
4	itemprop Thuộc tính này xác định một thuộc tính của mặt hàng.
5	itemref Thuộc tính này cung cấp danh sách các phần tử bổ sung cần thu thập thông tin để tìm các cặp tên-giá trị của mặt hàng.

Các kiểu dữ liệu thuộc tính

Các thuộc tính thường có giá trị là chuỗi như đã đề cập trong ví dụ trên nhưng chúng cũng có thể có giá trị là URL. Ví dụ sau có một thuộc tính, "image", có giá trị là một URL -

<div itemscope>
   <img itemprop = "image" src = "tp-logo.gif" alt = "TutorialsPoint">
</div>

Thuộc tính cũng có thể có các giá trị là ngày, giờ hoặc ngày và giờ. Điều này đạt được bằng cách sử dụngtime nguyên tố và nó datetime thuộc tính.

<html>
   <body>
      
      <div itemscope>
         My birthday is:
         <time itemprop = "birthday" datetime = "1971-05-08">
            Aug 5th 1971
         </time>
      </div>
      
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Bản thân các thuộc tính cũng có thể là nhóm các cặp tên-giá trị, bằng cách đặt thuộc tính itemscope vào phần tử khai báo thuộc tính.

Hỗ trợ API vi dữ liệu

Nếu trình duyệt hỗ trợ API vi dữ liệu HTML5, sẽ có một hàm getItems () trên đối tượng tài liệu chung. Nếu trình duyệt không hỗ trợ vi dữ liệu, thì hàm getItems () sẽ không được xác định.

function supports_microdata_api() {
   return !!document.getItems;
}

Modernizr chưa hỗ trợ kiểm tra API vi dữ liệu, vì vậy bạn sẽ cần sử dụng chức năng như chức năng được liệt kê ở trên.

Tiêu chuẩn vi dữ liệu HTML5 bao gồm cả đánh dấu HTML (chủ yếu dành cho công cụ tìm kiếm) và một tập hợp các hàm DOM (chủ yếu dành cho trình duyệt).

Bạn có thể bao gồm đánh dấu vi dữ liệu trong các trang web của mình và các công cụ tìm kiếm không hiểu các thuộc tính vi dữ liệu sẽ bỏ qua chúng. Nhưng nếu bạn cần truy cập hoặc thao tác vi dữ liệu thông qua DOM, bạn sẽ cần kiểm tra xem trình duyệt có hỗ trợ API DOM vi dữ liệu hay không.

Định nghĩa từ vựng vi dữ liệu

Để xác định từ vựng vi dữ liệu, bạn cần một URL không gian tên trỏ đến một trang web đang hoạt động. Ví dụ: https://data-vocabulary.org/Person có thể được sử dụng làm không gian tên cho từ vựng vi dữ liệu cá nhân với các thuộc tính được đặt tên sau:

name - Tên người dưới dạng một chuỗi đơn giản
Photo - Một URL đến ảnh của một người.
URL - Một trang web thuộc về một người.

Việc sử dụng về thuộc tính vi dữ liệu của một người có thể như sau:

<html>
   <body>
   
      <div itemscope>
         <section itemscope itemtype = "http://data-vocabulary.org/Person">
            <h1 itemprop = "name">Gopal K Varma</h1>
         
            <p>
               <img itemprop = "photo" 
                  src = "http://www.tutorialspoint.com/green/images/logo.png">
            </p>
            
            <a itemprop = "url" href = "#">Site</a>
         </section>
      </div>
      
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Google hỗ trợ vi dữ liệu như một phần của chương trình Rich Snippets của họ. Khi trình thu thập dữ liệu web của Google phân tích cú pháp trang của bạn và tìm thấy các thuộc tính vi dữ liệu phù hợp với từ vựng http://datavocabulary.org/Person, nó sẽ phân tích cú pháp các thuộc tính đó và lưu trữ 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 bằng Công cụ kiểm tra đoạn mã chi tiết bằng cách sử dụng http://www.tutorialspoint.com/html5/microdata.htm

Để phát triển thêm về Microdata, bạn luôn có thể tham khảo Microdata HTML5 .