【HTML Living Standard】itemref属性の使い方
itemref属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
itemrefプロパティは、Microdata（マイクロデータ）の文脈において、itemscope属性で定義されたアイテムに、そのアイテムのプロパティとなる情報を、HTMLドキュメント内の別の場所に存在する要素から参照させるためのIDリストを保持するプロパティです。これは、HTML Living Standardで定義されるグローバル属性の一つとして提供されています。
通常、Microdataを使用してWebページ内の情報を構造化する場合、itemscope属性を持つ要素の子孫要素として、そのアイテムのプロパティを直接記述します。しかし、itemref属性を用いることで、物理的に離れた場所にある要素を、あたかもそのアイテムのプロパティであるかのように関連付けることが可能になります。
具体的には、itemref属性の値として、参照したい要素のid属性値をスペース区切りで複数指定します。これにより、Webページのレイアウト上の制約から、関連する情報がドキュメントの異なるセクションに配置されている場合でも、それらを論理的に一つのまとまり（アイテム）として定義し、検索エンジンやその他の機械可読なシステムがWebページのコンテンツをより正確に理解できるようになります。この属性は、既存のHTML構造に大きな変更を加えることなく、セマンティックな情報を追加する柔軟な手段を提供します。
構文(syntax)
1<div itemscope itemtype="http://schema.org/Person" itemref="contact-info"> 2 <span itemprop="name">John Doe</span> 3</div> 4 5<p id="contact-info"> 6 Email: <span itemprop="email">john.doe@example.com</span> 7</p>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
itemrefで別要素のプロパティを参照する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>itemref サンプル</title> 7</head> 8<body> 9 10 <!-- 11 itemscope と itemprop を使用して、アイテム（ここでは「商品」）の情報をマークアップします。 12 itemref 属性は、itemscope で定義されたアイテムのプロパティを、 13 そのアイテムを定義している要素の外側にある要素から参照するために使用します。 14 itemref の値は、参照したいプロパティを持つ要素の ID をスペース区切りで指定します。 15 --> 16 <div itemscope itemtype="http://schema.org/Product" itemref="product-description-ref product-identifier-ref"> 17 <!-- この div が「商品」アイテムのスコープを定義します --> 18 19 <h2 itemprop="name">HTML基礎入門</h2> 20 <p>価格: <span itemprop="offers" itemscope itemtype="http://schema.org/Offer"><span itemprop="priceCurrency" content="JPY">¥</span><span itemprop="price" content="2500">2,500</span></span></p> 21 22 <!-- 23 以下の p 要素は、itemscope を持つ div の外側にありますが、 24 itemref="product-description-ref" によってこの "Product" アイテムの説明として関連付けられます。 25 --> 26 </div> 27 28 <!-- itemref で参照される要素は、通常、アイテムのスコープの外側に配置されます --> 29 <p id="product-description-ref" itemprop="description"> 30 システムエンジニアを目指す初心者向けに、Webページの構造を理解するためのHTMLの基礎をわかりやすく解説します。 31 </p> 32 33 <!-- 複数のプロパティを itemref で参照することも可能です --> 34 <p id="product-identifier-ref" itemprop="productID">ISBN: 978-4802512345</p> 35 36</body> 37</html>
HTMLのitemref属性は、すべてのHTML要素に指定できるグローバル属性の一つです。これは主にitemscopeやitempropといった「マイクロデータ」を扱う際に使用されます。itemref属性の役割は、itemscope属性で定義されたアイテム（例えば、商品やイベントなど）のプロパティを、そのアイテムのスコープを定義している要素の外側にある別の要素から参照できるようにすることです。
具体的な利用方法としては、itemref属性の値に、参照したいプロパティを持つHTML要素のidをスペース区切りで指定します。これにより、HTMLの視覚的な構造を大きく変更することなく、関連する情報を意味的にグループ化し、検索エンジンなどの機械がWebページの内容をより正確に理解できるようになります。
サンプルコードでは、div要素がitemscopeで「商品」というアイテムのスコープを定義しています。そして、そのdivのitemref属性にproduct-description-refとproduct-identifier-refというIDを指定することで、外部にある商品説明と商品IDのp要素を、この商品アイテムのプロパティとして関連付けています。itemref属性には引数はなく、何らかの戻り値もありません。Webページの構造と意味情報の記述を柔軟に行うための重要な属性です。
itemref属性は、itemscopeで定義された情報のプロパティを、その情報を持つ要素（スコープ）の外側から関連付ける際に使います。参照したいプロパティを持つ要素には、必ず一意のid属性を付与し、そのid名をitemrefの値としてスペース区切りで指定します。
注意点として、itemrefが参照する側の要素には、必ずitemprop属性を記述する必要があります。itemrefはプロパティの関連付けを行うのみで、プロパティ自体を定義するものではありません。これにより、Webページの構造が複雑でも検索エンジンなどが情報を正確に理解できるようになります。idの重複を避け、プロパティの関連性を明確に保つことが、コードの安全性と可読性を高める上で重要です。
itemref属性で外部情報を参照する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>itemref属性のサンプルコード</title> 7</head> 8<body> 9 10 <!-- 11 itemscope属性とitemtype属性は、このdiv要素が「Person（人物）」という種類の 12 Microdataアイテムを定義することを示します。 13 itemref属性は、このアイテムのプロパティを、このdiv要素の子要素ではない 14 外部の要素（ここではIDが "person-additional-info" の要素）から参照するために使用します。 15 --> 16 <div itemscope itemtype="http://schema.org/Person" itemref="person-additional-info"> 17 <h2>人物情報</h2> 18 <!-- itemprop="name" で人物の名前プロパティを定義 --> 19 <p>名前: <span itemprop="name">山田 太郎</span></p> 20 <!-- itemprop="age" で人物の年齢プロパティを定義 --> 21 <p>年齢: <span itemprop="age">30</span>歳</p> 22 </div> 23 24 <!-- 25 このdiv要素は、上記のitemscopeを持つdiv要素の直接の子孫ではありません。 26 しかし、itemref属性によってID="person-additional-info"として参照されているため、 27 "Person" アイテムのプロパティの一部として扱われます。 28 --> 29 <div id="person-additional-info"> 30 <h3>追加情報（外部情報）</h3> 31 <!-- itemprop="jobTitle" で人物の職業プロパティを定義 --> 32 <p>職業: <span itemprop="jobTitle">ソフトウェアエンジニア</span></p> 33 <!-- itemprop="email" で人物のメールアドレスプロパティを定義 --> 34 <p>メール: <a href="mailto:taro.yamada@example.com" itemprop="email">taro.yamada@example.com</a></p> 35 </div> 36 37</body> 38</html>
itemref属性は、HTMLのMicrodata（構造化データ）という仕組みで使用されるグローバル属性です。Microdataは、ウェブページの内容がどのような意味を持つか（例：これは人物の情報、これはイベントの詳細など）を検索エンジンなどのコンピューターに伝えるために用いられます。
通常、itemscope属性を持つ要素が「アイテム」（意味のまとまり）を定義し、そのアイテムに含まれるプロパティ（具体的な情報、例：名前、年齢）は、itemscopeを持つ要素の直接の子孫要素にitemprop属性を使って記述されます。
しかし、ウェブページのデザインやレイアウトの都合上、アイテムに含めたいプロパティがitemscopeを持つ要素の直接の子孫ではない、別の場所に配置されている場合があります。このようなときにitemref属性が非常に役立ちます。
itemref属性は、itemscopeを持つ要素に記述され、値として参照したい外部要素のIDを半角スペース区切りで指定します。これにより、指定されたIDを持つ要素（およびその子孫）に含まれるitemprop属性も、itemscopeを定義したアイテムのプロパティとして扱われるようになります。
サンプルコードでは、最初のdiv要素がitemscopeとitemtype="http://schema.org/Person"で「人物」のアイテムを定義し、その中に名前と年齢のプロパティがあります。ここにitemref="person-additional-info"と記述することで、IDが"person-additional-info"の別のdiv要素もこの「人物」アイテムの一部として認識されます。したがって、そのdiv内にある職業やメールアドレスのプロパティも、同じ人物のデータとして関連付けられます。
この属性は引数や戻り値を持たず、値として参照する要素のIDを指定することで、物理的に離れた場所にある情報を論理的に一つのデータとして関連付ける役割を果たします。
itemref属性は、itemscope属性で定義されたMicrodataアイテムのプロパティが、そのアイテムを定義する要素の直接の子孫ではない別の場所に配置されている場合に、それらを論理的に紐づけるために使用します。
初心者が注意すべき点は、itemrefが必ずitemscope属性と組み合わせて使われることです。itemrefに指定する値は、参照したい要素のid属性値であり、複数のIDをスペース区切りで指定できます。参照された外部要素内のitemprop属性は、あたかも元のitemscopeを持つ要素の子孫であるかのように、そのアイテムのプロパティとして解釈されます。
この属性はHTMLの物理的なレイアウトと意味的な構造を分離する際に便利ですが、要素間の関係が視覚的に分かりにくくなるため、コードの可読性を保つためにもむやみに広範囲な要素を参照しないよう注意が必要です。また、指定するIDがページ内に存在しない場合や重複している場合は正しく機能しませんので、IDの正確な指定と一意性を確認してください。