タイトル: data要素
SEOタイトル: HTML data要素 完全ガイド（機械可読な値を value 属性で持たせる / time との違い）
| この記事の要点 |
|
data 要素とは
data 要素は、HTML5 で追加されたインライン要素で、テキスト（人間向けの表示）に機械可読な値を関連付けるためのものです。value 属性に内部値、要素内容に表示テキストを書きます。
基本構文
人間向けの表示典型的なユースケース
1. 商品 ID と表示名
本日のおすすめ:
プレミアム コーヒー豆 200g
表示は「プレミアム コーヒー豆 200g」だが、JavaScript からは SKU-12345 が取り出せます。
2. 数値とフォーマット表示
在庫: 3,142 個
獲得スコア: 87.5%
カンマ区切りやパーセント表示は人間向け、計算用には数値そのものが使えます。
3. 列挙値の人間化
ステータス: 公開中
優先度: 高
JavaScript からの値取得
// HTMLDataElement.value で取得
const el = document.querySelector('data');
console.log(el.value); // "SKU-12345"
console.log(el.textContent); // "プレミアム コーヒー豆 200g"
// 全 data 要素の値を一括取得
const skus = [...document.querySelectorAll('data')].map(d => ({
display: d.textContent.trim(),
value: d.value,
}));time 要素との使い分け
| 要素 | 用途 | 属性 | 例 |
|---|---|---|---|
data | 日時 以外 の機械可読値 | value | 商品 ID / 数量 / 列挙 |
time | 日時専用 | datetime | 2026-06-11T14:30+09:00 |
日時の場合は time 要素のほうがセマンティックがより正確です。検索エンジンやカレンダー連携も time の方が認識しやすい。
カスタムデータ属性 (data-*) との違い
| 方法 | 例 | 用途 |
|---|---|---|
| 100点 | 「表示と機械値のペア」が要素自体の意味 |
data-* 属性 | | 任意の要素に補助情報を付加 |
data 要素は「表示テキストとそれに対応する機械値」を意味的に結びつけるための要素。data-* 属性は要素の補助情報を任意に持たせるため。役割は異なります。
マイクロフォーマット・構造化データとの連携
プレミアム コーヒー豆
SKU:
COFFEE-001
在庫:
42 個
itemprop + data + value の組み合わせで、検索エンジンが理解できる構造化データを提供できます。
data 要素を使うべき場面を見極める
data 要素は HTML5 で追加されたものの、実務での認知度はそれほど高くなく、多くの開発者が data-* カスタム属性で代用しています。しかし両者には明確な役割の違いがあり、「表示テキストと、それに対応する機械可読な値が、ともに重要な意味を持つ」場面では data 要素のほうが意味的に正確です。たとえば商品カードに表示される SKU や、ランキングのスコア、ECサイトの在庫数のように、見た目と内部値の両方を保持したいケースが典型例です。
逆に、要素そのものは見出しや本文として独立した意味を持ち、補足的に ID やデータ属性を持たせたいだけなら data-* カスタム属性のほうが軽量です。data 要素は「これは値である」という宣言そのものに意味があるため、構造化データやマイクロフォーマット、JavaScript からの値取得を頻繁に行う UI 部品で価値を発揮します。
data 要素と構造化データの相乗効果
近年、Google や他の検索エンジンはページの構造化データを積極的に解析し、検索結果に商品情報・レビュー評価・在庫状況などのリッチリザルトを表示するようになりました。schema.org の語彙と data 要素を組み合わせると、人間が読むテキストと検索エンジンが読む機械値を同じ HTML の中で両立できるため、メンテナンスコストが大幅に下がります。
たとえば商品ページで「在庫: 残り 3 個」という表示は、人間にはわかりやすい日本語ですが、検索エンジンにとっては「3」という数値だけを認識したいケースです。data 要素なら 残り 3 個 と書くことで、HTML をひとつだけ持たせれば両方の要求を満たせます。これは JSON-LD で別途構造化データを書く方式と比べて、表示と機械値の整合性が保証される大きな利点です。
data 要素を業務システムで使うアイデア
業務系の Web アプリケーションでは、画面に表示される値の裏側に内部コードや管理 ID を保持する必要が頻繁にあります。たとえば顧客マスタの一覧では「東京都品川区」と表示しつつ、内部的には「13109」のような市区町村コードを扱う、といったケースです。これらを data-* 属性で持たせる方法も主流ですが、data 要素を使えばセマンティックな構造を保ったまま記述でき、テストや UI 自動化ツールからも認識しやすくなります。
また、JavaScript フレームワーク（Vue.js や React など）と組み合わせる場合も data 要素は便利です。テンプレートに {{ item.label }} のように書くことで、表示用テキストと機械値が常にペアで管理され、リスト操作やイベントハンドラからのアクセスが直感的になります。実装パターンを整理しておくと、開発チームのコードレビュー時の議論もスムーズになり、機能拡張時の認知コストも下がります。
特にレポート系のダッシュボード UI では、画面上に「売上 1,234,567 円」「達成率 87.5%」のような表示と、グラフ描画に必要な生数値の両方を持ちたい要件が出てきます。data 要素を使えば、表示部分は人間向け、value 属性は機械可読、と一箇所のマークアップに集約でき、別の場所で同じ値を二重管理する事故を減らせます。データ可視化のフロントエンド開発でも、地味ながら効果的な選択肢です。
data 要素を使う際の落とし穴とその回避
data 要素は便利ですが、運用上いくつかの注意点があります。まずvalue 属性の値は文字列として扱われるため、JavaScript で取り出した値は数値が必要な場合には Number() や parseInt() で変換する必要があります。これを忘れると文字列同士の比較や連結になって、想定外の結果を招くことがあります。テストコードで型まで確認する習慣をつけておくと安心です。
また、data 要素はインライン要素なので、ブロックレベルの装飾を直接当てると思った通りに動かないことがあります。テーブル内のセルやフレックスアイテムとして扱いたい場合は、外側に div や td を挟んでから data 要素を内側に置くなど、レイアウト的な工夫が必要になります。data 要素の意味は「値を運ぶ」ことであり、レイアウト責任は持たないと割り切ったほうがクリーンな設計になります。基本に忠実に使う限り、data 要素は HTML の表現力を確実に底上げしてくれる小さな良いツールです。
CSS でスタイリング
/* data 要素は既定では装飾なし。必要なら属性セレクタで */
data {
font-variant-numeric: tabular-nums; /* 等幅数字 */
}
/* 在庫切れを赤色に */
data[value="0"] {
color: #e74c3c;
font-weight: bold;
}ブラウザサポート
主要モダンブラウザは全て対応 (Chrome / Edge / Firefox / Safari)。HTMLDataElement インターフェースを実装しているので JS から el.value で型安全にアクセスできます。
FAQ
Q: span に data-* 属性でいいのでは？
A: data-* で十分なケースも多いですが、「表示と機械値が両方主役」の文脈では data 要素のほうが意味的に正確。スクレイピングや検索エンジンへの伝達力も上。
Q: data 要素は SEO に効く？
A: 直接の SEO ブーストはありません。しかし schema.org と組み合わせればリッチリザルトに貢献できます。
Q: value 属性は必須？
A: はい、必須です (HTML5 仕様)。省略するとブラウザは要素として描画はしますが、意味的には無効。
Q: input の value とは違う？
A: 別物。input の value は編集可能なフォーム値、data の value は読み取り専用の機械可読値。