data要素を使えば、テキストにデータ情報を付与できます。
data要素の使い方
data要素を使用して、テキストにデータ情報を付与する例を紹介します。
<body>
<p>こちらの商品は最新のディスプレイを備えた<data value="ES1234XX">スマートフォンX</data>です。</p>
<p>商品の価格は<data value="9800">九千八百円</data>になります。</p>
</body>
body要素の中に、data要素およびvalue属性を使った2つのp要素を記述しました。
上から1つ目のp要素は、data要素の内容を「スマートフォンX」とし、data要素の中のvalue属性について「ES1234XX」とする値を記述してます。
このため、ブラウザの表示は「スマートフォンX」となり、ユーザーは商品名である「スマートフォンX」という商品の名称を知ることができます。なお、商品の型番である「ES1234XX」まで表示する必要はないため、value属性としてデータ情報を付与する程度にしてます。
ここで、Web上の実際のLPページ(商品紹介ページ)などでは、ユーザーの操作により商品の詳細ページを表示する場合もあるため、その際に、JaveScript等を用いた内部処理により、テキスト「スマートフォンX」に付与されたデータ情報「ES1234XX」が参照(取得)され、ブラウザに表示されることになります。
次に、上から2つ目のp要素は、data要素の内容を「九千八百円」とし、data要素の中のvalue属性として「9800」とする内容を記述しました。
このため、1つ目のp要素と同様に、実際のLPページ等において、ユーザーの操作により商品の価格に関する計算を行う際に、JaveScript等を用いた内部処理によって、テキスト「九千八百円」に付与されたデータ情報「9800」が参照(取得)され、計算の後にWeb上に表示されることになります。
これらの例では、value属性の値として、商品の型番や商品の価格を紹介しましたが、当然のことながら、その他の様々なデータ情報を付与することもできます。
【カテゴリー】パルパブル・コンテンツ、フロー・コンテンツ、フレージング・コンテンツ
data要素が属するカテゴリーは、パルパブル・コンテンツ、フロー・コンテンツ、フレージング・コンテンツになります。
パルパブル・コンテンツに属する要素は、その要素の中にhidden属性が指定されていない要素を１つ以上含める必要があります。
また、フロー・コンテンツに属する要素は、body要素の中に記述される必要があります。フレージング・コンテンツに属する要素は、テキストをマークアップするために記述される必要があります。
つまり、data要素は、以下のプログラムに示す通り、body要素の中においてテキストをマークアップするために記述され、data要素の中にhidden属性が指定されていない要素を１つ以上含めるように記述する必要があります。
<body>
<p>こちらの商品は最新のディスプレイを備えた<data value="ES1234XX">スマートフォンX</data>です。</p>
</body>
data要素は、上のプログラムに示す通り、body要素の中でマークアップしたテキストについて、情報を付与を行いつつ表示するために用いる必要があります。
また、プログラムに示す通り、data要素にhidden属性を指定することなく、data要素の内容「スマートフォンX」がブラウザに表示された状態とする必要があります。
【コンテンツ・モデル】フレージング・コンテンツ
data要素のコンテンツ・モデルは、フレージング・コンテンツです。
フレージング・コンテンツに属する要素は、文章内のテキストをマークアップするための要素です。そして、ブラウザに表示される「テキスト」も、フレージング・コンテンツに属する要素と同じように扱うことができます。
つまり、コンテンツ・モデルをフレージング・コンテンツとする要素（例えばdata要素）は、その要素の中にフレージング・コンテンツに属する要素またはテキストを含めるように記述する必要があります。
このため、data要素は、以下のプログラムに示す通り、data要素の中にフレージング・コンテンツに属する要素（例えばstrong要素）を含めるように記述する必要があります。
<body>
<p>商品の価格は<data value="9800"><strong>九千八百円</strong></data>になります。</p>
</body>
上に示したプログラムでは、body要素の中のdata要素において、「九千八百円」のフレーズがdata要素でマークアップされています。そして、data要素の中において「九千八百円」のテキストがstrong要素でマークアップされています。
このため、ブラウザの表示結果の通り、「九千八百円」のフレーズについて、value属性により「9800」という数字情報が付与されると共に、重要性を付与した状態で表示することができています。
各種ブラウザでの表示結果
data要素について、主要なブラウザにおけるサポート状況は、以下の通りです。
| Google Chrome | Microsoft Edge | Safari | Firefox | Opera | |
| 【data要素】 | ◯ | ◯ | ◯ | ◯ | ◯ |
以上、data要素の使い方について、ご参考になさってください。