【HTML Living Standard】itemscope属性の使い方
itemscope属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
itemscopeプロパティは、HTML要素が構造化データの一種であるマイクロデータにおける「アイテム」であることを示すグローバル属性です。この属性が設定されたHTML要素は、特定の「もの」や「事柄」（例えば、人物、イベント、商品、記事など）に関するまとまった情報ブロックとして扱われます。
Webページのコンテンツを機械が理解しやすい形式でマークアップするために使用され、特に検索エンジンがページの内容を深く把握するのに役立ちます。itemscopeは単独で利用されることもありますが、一般的にはitemtype属性と組み合わせて使用されます。itemtype属性は、そのアイテムが具体的にどのような種類の「もの」であるかを、例えばhttp://schema.org/Personのように定義します。
さらに、itemprop属性を使用することで、そのアイテムが持つ具体的なプロパティ（例えば、人物の名前、イベントの場所、商品の価格など）をHTML要素に関連付けることが可能です。これにより、検索エンジンはWebサイトの情報をより正確に解釈し、検索結果に豊富な情報（リッチスニペット）として表示できるようになります。
itemscopeは、HTML Living Standardで定義されているグローバル属性の一つであり、原則としてすべてのHTML要素に指定することができます。Webサイトのセマンティックな意味付けを強化し、ユーザーや検索エンジンにとってより価値のある情報提供を実現するための重要な役割を担っています。
構文(syntax)
1<div itemscope></div>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML itemscope, itemtypeで構造化データを作成する
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>HTML Microdata Example</title> 7</head> 8<body> 9 <!-- itemscope属性は、このdiv要素が新しいアイテムのスコープであることを示します。 --> 10 <!-- つまり、このブロック内の情報が「一つのまとまったエンティティ」として扱われます。 --> 11 <!-- itemtype属性は、そのエンティティの種類（ここでは「Product」＝商品）を定義します。 --> 12 <!-- http://schema.org/Product は、商品の構造化データに関する標準的な語彙です。 --> 13 <div itemscope itemtype="http://schema.org/Product"> 14 <!-- itemprop属性は、アイテムの特定のプロパティ（ここでは商品名）を定義します。 --> 15 <h2 itemprop="name">革新的なワイヤレスイヤホン</h2> 16 <p> 17 <!-- itemprop属性は、アイテムのプロパティ（ここでは商品説明）を定義します。 --> 18 <span itemprop="description"> 19 このワイヤレスイヤホンは、最高の音質と快適な装着感を提供します。 20 長時間のバッテリー寿命とノイズキャンセリング機能で、あなたの音楽体験を次のレベルへ。 21 </span> 22 </p> 23 <p> 24 <!-- 価格と通貨をitempropで指定します。content属性で機械が読み取りやすい値を設定できます。 --> 25 価格: <span itemprop="priceCurrency" content="JPY">円</span><span itemprop="price">15,000</span> 26 </p> 27 <p> 28 <!-- 在庫状況をitempropで指定します。schema.orgの語彙を使用しています。 --> 29 在庫状況: <link itemprop="availability" href="http://schema.org/InStock">在庫あり 30 </p> 31 </div> 32</body> 33</html>
itemscope属性は、HTML要素に対して、その要素とその子孫要素が「一つのまとまったアイテム（エンティティ）」に関する情報であることを示すために使用されるグローバル属性です。引数や戻り値は持ちません。この属性自体が存在することで意味を持ち、ウェブページのコンテンツ構造を機械が理解しやすい形式でマークアップする「構造化データ」の定義に利用されます。
通常、itemscope属性はitemtype属性と組み合わせて使用されます。itemtype属性は、itemscopeで定義されたアイテムが具体的に「どのような種類」のエンティティであるかを指定します。例えば、itemtype="http://schema.org/Product"と指定することで、そのまとまりが商品に関する情報であることを明確にします。これにより、検索エンジンなどのクローラが、そのページのコンテンツをより正確に理解し、検索結果の表示を改善することに役立ちます。
サンプルコードでは、<div itemscope itemtype="http://schema.org/Product">という形でdiv要素が「商品」というアイテムであることを宣言しています。このdiv要素の内部では、itemprop="name"、itemprop="description"、itemprop="price"などの属性を使って、その商品に関する具体的なプロパティ（商品名、説明、価格など）を定義しています。このようにitemscope、itemtype、itempropを連携させることで、ウェブページのコンテンツが持つ意味を機械に伝えることができます。
itemscope属性は、その要素以下の内容が特定の「まとまり」を示すことを定義します。通常はitemtype属性と組み合わせて使用し、そのまとまりが「どのような種類」のデータであるかをschema.orgなどの標準的な語彙で正確に指定する必要があります。itemprop属性は、このまとまりの中の個別の情報（プロパティ）を定義する際に利用し、itemscopeで定義された範囲内で有効です。これらの属性は、検索エンジンやその他のプログラムがウェブページのコンテンツをより正確に理解するために重要であり、視覚的な表示には影響しません。content属性は、表示されるテキストとは別に、機械が解釈しやすい値を指定する場合に役立ちます。記述後は、Googleの構造化データテストツールなどで正しく認識されているか必ず確認することをおすすめします。
itemscope属性でアイテムを定義する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>itemscope属性のサンプル</title> 6</head> 7<body> 8 <h1>Microdataを使用した書籍情報</h1> 9 10 <!-- 11 itemscope属性は、この<div>要素が新しい「アイテム」（ここでは書籍）のルートであることを示します。 12 これにより、検索エンジンなどのクローラーがWebページ上の特定の情報塊を識別しやすくなります。 13 通常、itemtype属性（アイテムの種類を定義）やitemprop属性（アイテムのプロパティを定義）と組み合わせて使用されます。 14 --> 15 <div itemscope itemtype="http://schema.org/Book"> 16 <h2 itemprop="name">プログラミング入門</h2> 17 <p>著者: <span itemprop="author">山田 太郎</span></p> 18 <p>出版社: <span itemprop="publisher">ABC出版</span></p> 19 <p>発行年: <time itemprop="datePublished" datetime="2023-01-15">2023年1月15日</time></p> 20 <p itemprop="description">プログラミングの基礎をゼロから学べる一冊です。</p> 21 </div> 22</body> 23</html>
HTMLのitemscope属性は、Webページ上の特定のHTML要素が新しい「アイテム」の開始点であることを示すグローバル属性です。これは、検索エンジンなどの自動プログラム（クローラー）がWebページの内容をより正確に理解し、構造化されたデータとして認識するために非常に重要な役割を果たします。itemscope属性が指定された要素とその子孫要素は、特定の情報（例えば、一つの書籍、人物、イベントなど）に関するまとまりとして扱われます。
この属性は引数や戻り値を持たず、単に「ここから新しい情報の塊が始まる」という目印として機能します。通常は、そのアイテムの種類を定義するitemtype属性と、アイテムの個々のプロパティ（例：名前、著者、価格など）を定義するitemprop属性と組み合わせて使用されます。
サンプルコードでは、div要素にitemscope属性が付与されています。これは、このdiv要素の中身が「書籍」という一つの情報アイテムであることを示しています。具体的にはitemtype="http://schema.org/Book"と組み合わせることで、この情報がschema.orgで定義された「書籍」の構造データであることを明示しています。そして、その内部にあるh2要素のitemprop="name"は書籍の名前、span要素のitemprop="author"は著者といった具合に、個々の情報が何を示すかを示しています。このようにitemscopeを使用することで、Webページのコンテンツがより意味のある形で構造化され、検索エンジンによる認識や表示の改善に貢献します。
itemscope属性は、その要素が「新しい情報のかたまり（アイテム）」の始まりであることを示すHTMLのグローバル属性です。この属性は単独で使われることは少なく、通常はitemtype属性と組み合わせて使用します。itemtype属性では「このアイテムは何の種類の情報か」（例：書籍、人物、イベントなど）を定義し、さらにitemprop属性で各プロパティ（名前、著者など）を指定します。これらのMicrodataのマークアップは、検索エンジンなどのクローラーがWebページの内容をより正確に理解し、検索結果にリッチな情報（リッチスニペット）を表示するために利用されます。Webサイトの見た目には影響しませんが、SEO対策として重要ですので、利用する際はschema.orgなどの標準的な語彙を参考に、正しい構造で記述するように心がけましょう。