HTML Living Standard/itemscope属性
itemref属性
[編集]itemref属性は、HTMLにおいて文書内の他の場所にある関連プロパティを参照するために使用されるグローバル属性です。この属性は、要素が直接含まないプロパティを別の場所から関連付ける際に使用されます。指定する値は、スペース区切りでIDのリストを指定します。
基本構文
[編集]<element itemscope itemref="id1 id2"></element>
element: 属性を適用するHTML要素。id1,id2: 関連付けたい要素のID。
使用例
[編集]- 別の場所のプロパティを参照
<div itemscope itemtype="http://schema.org/Product" itemref="details moreInfo"> <h1 itemprop="name">サンプル商品</h1> </div> <div id="details"> <p itemprop="description">この商品はデモ用です。</p> </div> <div id="moreInfo"> <span itemprop="price">1200</span>円 </div>
この例では、itemref属性により、id="details"およびid="moreInfo"の要素が関連付けられ、Productエンティティの一部として認識されます。
動作の概要
[編集]- プロパティの参照:
- アイテムが持つプロパティを文書内の他の場所から参照します。
- マイクロデータの柔軟性:
itemrefにより、直接の子要素に含まれないプロパティもエンティティに関連付けることができます。
- 複数IDの指定:
- スペース区切りで複数のIDを指定でき、それぞれのIDが参照されます。
itemref属性の利用シーン
[編集]- 大規模なページの構造化:
- ページ内の異なる場所に分散した情報を一つのエンティティにまとめる際に役立ちます。
- 動的コンテンツ:
- JavaScriptで動的に生成された要素を参照する場合にも活用できます。
- コンテンツの再利用:
- 他のエンティティと共有するプロパティを定義する際に使用します。
注意点
[編集]- 参照するIDの管理:
itemrefに指定するIDは、文書内で一意である必要があります。
- ブラウザサポート:
- 属性自体はHTMLの一部としてサポートされていますが、マイクロデータの解釈はツールや検索エンジンに依存します。
- アクセシビリティ:
- 属性はアクセシビリティに直接影響しませんが、マークアップの構造が複雑になる場合、適切に整理することが重要です。
互換性
[編集]互換性 ブラウザ サポート状況 Chrome 対応 Edge 対応 Firefox 対応 Safari 対応 Opera 対応