【HTML Living Standard】data要素の使い方
data要素の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
data要素は、ユーザーに表示されるテキストコンテンツに、機械が読み取り可能な形式の値を関連付けるために使用される要素です。この要素の主な目的は、ウェブページ上の特定の情報を、検索エンジンやスクリプトなどのプログラムがより正確に、かつ容易に解釈・処理できるようにすることです。
例えば、ウェブページで商品名が「Apple Watch Series 9」と表示されている場合でも、その裏には「AW-S9-GPS-45MM」のような内部的な商品コードが存在することがあります。data要素を使用すると、「Apple Watch Series 9」という人間が読むテキストと、「AW-S9-GPS-45MM」という機械が処理する値を明確に紐づけることができます。
この要素は必須のvalue属性を持ち、この属性に機械が読み取るべき具体的な値を指定します。一方、data要素の開始タグと終了タグの間に記述されるコンテンツは、ユーザーが画面上で確認する人間が理解できるテキストとなります。
日付や時刻に特化したtime要素とは異なり、data要素はより汎用的なデータを扱います。製品のSKU（Stock Keeping Unit）コード、内部的なID、カテゴリ識別子など、表示されるテキストと内部的な表現を区別したいあらゆる種類のデータに適用可能です。
data要素を適切に利用することで、ウェブコンテンツのセマンティック（意味論的）なマークアップが強化され、データの構造が明確になります。これにより、ウェブサイトのアクセシビリティ向上や、自動処理によるデータ活用の効率化に貢献します。
公式リファレンス: <data>: The Data element
構文(syntax)
1<data value="2024-07-26">2024年7月26日</data>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません