HTML5-Microdata

Microdataは、Webページに追加のセマンティクスを提供するための標準化された方法です。

Microdataを使用すると、独自にカスタマイズした要素を定義して、Webページにカスタムプロパティを埋め込み始めることができます。大まかに言えば、microdataは名前と値のペアのグループで構成されます。

グループは呼ばれます items、および各名前と値のペアは property。アイテムとプロパティは通常の要素で表されます。

例

アイテムを作成するには、 itemscope 属性が使用されます。
アイテムにプロパティを追加するには、 itemprop 属性は、アイテムの子孫の1つで使用されます。

ここには2つのアイテムがあり、それぞれにプロパティ「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>

次の結果が得られます-

プロパティには通常、文字列の値がありますが、次のデータ型を持つことができます-

グローバル属性

Microdataは、任意の要素が使用できる5つのグローバル属性を導入し、データに関するマシンのコンテキストを提供します。

シニア番号	属性と説明
1	itemscope これは、アイテムを作成するために使用されます。itemscope属性は、このページにMicrodataがあることを示すブール属性であり、ここから開始されます。
2	itemtype この属性は、アイテムを定義し、プロパティのコンテキストを提供する有効なURLです。
3	itemid この属性は、アイテムのグローバル識別子です。
4	itemprop この属性は、アイテムのプロパティを定義します。
5	itemref この属性は、アイテムの名前と値のペアを見つけるためにクロールする追加の要素のリストを提供します。

プロパティデータ型

プロパティには通常、上記の例で説明したように文字列の値がありますが、URLの値を持つこともできます。次の例には、値がURL-である1つのプロパティ "image"があります。

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

プロパティには、日付、時刻、または日付と時刻の値を含めることもできます。これは、time 要素とその datetime 属性。

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

次の結果が得られます-

プロパティを宣言する要素にitemscope属性を設定することにより、プロパティ自体を名前と値のペアのグループにすることもできます。

MicrodataAPIのサポート

ブラウザがHTML5microdata APIをサポートしている場合、グローバルドキュメントオブジェクトにgetItems（）関数があります。ブラウザがmicrodataをサポートしていない場合、getItems（）関数は未定義になります。

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

ModernizrはまだmicrodataAPIのチェックをサポートしていないため、上記のような関数を使用する必要があります。

HTML5 microdata標準には、HTMLマークアップ（主に検索エンジン用）と一連のDOM関数（主にブラウザー用）の両方が含まれています。

Webページにmicrodataマークアップを含めることができ、microdata属性を理解しない検索エンジンはそれらを無視します。ただし、DOMを介してmicrodataにアクセスまたは操作する必要がある場合は、ブラウザーがmicrodata DOMAPIをサポートしているかどうかを確認する必要があります。

Microdata語彙の定義

microdataの語彙を定義するには、機能するWebページを指す名前空間URLが必要です。たとえば、https：//data-vocabulary.org/Personは、次の名前付きプロパティを持つ個人のmicrodataボキャブラリの名前空間として使用できます-

name −単純な文字列としての人名
Photo −人物の写真へのURL。
URL −その人が所有するウェブサイト。

約プロパティを使用すると、個人のmicrodataは次のようになります。

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

次の結果が得られます-

Googleは、RichSnippetsプログラムの一部としてmicrodataをサポートしています。Googleのウェブクローラーがページを解析し、http：//datavocabulary.org/Personボキャブラリーに準拠するmicrodataプロパティを見つけると、それらのプロパティを解析して、残りのページデータと一緒に保存します。

http://www.tutorialspoint.com/html5/microdata.htmを使用してRichSnippets Testing Toolを使用して、上記の例をテストできます。

ミクロのさらなる発展のために、いつでも参照することができHTML5ミクロ。