The <data> element in HTML links the text displayed for humans with machine-readable values like numbers or identifiers, making it possible to handle information in a more semantic way.
<data>要素 は、HTML5で導入された比較的新しい要素の一つで、「人間に見せるテキスト情報」と「機械が処理できるデータ値」を紐づけるために使用されます。具体的には、以下のようなシーンが想定されます。
1000 という数値情報を持たせたいとき<data>要素を使うことで、可視テキスト（ユーザが見るテキスト） と 機械可読なデータ値（value属性など） を一貫性をもって管理できます。
HTML
<data value="機械可読なデータ">
ユーザが見るテキスト
</data>value属性
<data>要素の最も重要な属性です。ここに機械的に解釈される値を指定します。<data>要素の要素内容（開始タグと終了タグの間のテキスト）は、人間にとって分かりやすい表示用のテキストを入れます。最も単純な例を挙げると、商品価格を表示するケースが分かりやすいでしょう。
HTML
<p>
商品価格:
<data value="1000">
¥1,000
</data>
</p>商品価格: ¥1,000
この例では、ユーザには「¥1,000」と表示されますが、HTMLソースコード上は value="1000" として数値が明示されています。
検索エンジンやスクリプトなどの機械処理で「この値は 1000 という数値である」と解釈させやすくなります。
<data>要素が重要なのか？HTML上で数値や識別子をそのまま出力すると、それがどういった意味を持つ値なのか機械側で判断しづらい場合があります。一方、<data>要素を用いると、機械可読 (machine-readable) な値を value に設定しつつ、ユーザにはよりわかりやすいフォーマットで表示が可能になります。
検索エンジンなどのクローラにとって、<data>要素の value 属性情報はデータを整理・解析するうえでヒントになります。また、セマンティックWebやマイクロデータを使って構造化データを埋め込む際にも、<data>要素は相性が良いです。
たとえば Schema.org の語彙を使って商品情報やレビューなどをマークアップする場合、<data>要素で数値情報を指定することで、より明示的に機械に伝えることができます。
ユーザがスクリーンリーダーを利用している場合などでも、<data>要素の適切な使用が、値に対する説明をしやすくする可能性があります。
ただし、まだスクリーンリーダーが <data>要素を完全に特別扱いするケースは多くないため、ARIA属性などの利用や、表示テキストの工夫で補完する必要があります。
<data>要素と類似のアプローチ<span> + data-* 属性HTML5では、独自のデータを要素に紐づける方法として、data-xxx 属性（カスタムデータ属性） もよく使われます。
たとえば、以下のように data-price という属性を独自に定義して数値を保持し、見た目上は整形された通貨表記を出すといった方法です。
HTML
<p>
商品価格:
<span data-price="1000">
¥1,000
</span>
</p>商品価格: ¥1,000
JavaScriptからは
JavaScript
const spanEl = document.querySelector('[data-price]');
const price = spanEl.dataset.price; // "1000"という形で取り出せます。
<data>要素との違い は、data-* 属性の場合、HTML仕様のセマンティックな要素としては特に決まった意味を持たないことです。一方、<data>は「機械可読な値を持つ要素」であるというセマンティクスがあります。
<meter> 要素や <progress> 要素数値を扱うHTML要素としては、<meter>（メーター）や <progress>（進捗）なども存在します。これらは特定の範囲内の値を表示することを目的としており、ビジュアル的にゲージやプログレスバーを表すことができます。
ただ単純に任意のテキストに対して機械可読値を紐づけたいだけであれば、<data>や<span data-*>などが向いています。
<data>要素の応用例たとえば、社員名簿やユーザー一覧などを表示するときに、ユーザーIDを value 属性として持たせることで、ユーザーに表示するときはわかりやすい名前を出しつつ、内部でのIDをしっかりと機械に渡すことが可能です。
HTML
<ul>
<li>
<data value="U12345">
山田 太郎
</data>
</li>
<li>
<data value="U67890">
佐藤 花子
</data>
</li>
</ul>このようにしておくと、JavaScriptやサーバーサイドで処理するときに、表示名と裏のIDが一対一対応の関係で管理しやすくなります。
日付や時刻の情報を機械可読形式で持たせたいときは、通常**<time>要素**がよく使われますが、場合によっては<data>要素でもよいケースがあります。ただし、日付・時刻を扱うなら<time>の方がよりセマンティックで推奨度が高いです。
どうしても<data>で特定のフォーマットを示したいなら、次のように利用できます。
HTML
<p>
イベント開始:
<data value="2025-01-01T10:00:00">
1月1日 午前10時
</data>
</p>イベント開始: 1月1日 午前10時
<time>要素であれば、<time datetime="2025-01-01T10:00:00">1月1日 午前10時</time> のように、より明確な属性名 datetime を使います。用途に応じて使い分けましょう。
数値に通貨単位や重さ・長さの単位が付随する場合、表示上は「○○ kg」「$○○」などの書式を使う一方で、機械が読むときには純粋な数値だけを参照できる形にしておくと便利です。
HTML
<p>
重量:
<data value="2.5">
2.5 kg
</data>
</p>重量: 2.5 kg
検索エンジンが数値解析を行っている場合、value が数値として処理されることが期待できます。また、JavaScriptで parseFloat() などを使って、ユーザが入力したデータに対しリアルタイムでバリデーションや計算を行う際にも役立ちます。
<data>要素の value 属性は、.value プロパティで簡単に取得が可能です。また、getAttribute() で生の属性値として取得する方法もあります。
HTML
<data id="price" value="1000">¥1,000</data>
<script>
const dataEl = document.getElementById('price');
// 1. JavaScriptのプロパティを利用する
console.log(dataEl.value);
// "1000" (文字列として返る)
// 2. あるいは getAttribute() で取得
console.log(dataEl.getAttribute('value'));
// "1000"
</script><data>要素の値をJavaScriptから更新することも可能です。value プロパティに対して代入すると、HTML上の属性値も更新されます。
HTML
<data id="stock" value="20">在庫: 20</data>
<script>
const stockEl = document.getElementById('stock');
// 在庫数を5に更新する
stockEl.value = "5";
// 画面上に見せるテキストも更新する
stockEl.textContent = "在庫: 5";
</script>このようにすると、value が "5" に変わり、要素の中身のテキスト（ユーザが閲覧できる部分）も "在庫: 5" となります。
ユーザに見せる表示と、裏で管理する値を別々に制御することで、より柔軟なUIを作れます。
<data>要素のブラウザ対応状況<data>要素を使用していても、単に未知の要素として扱われるだけなので、表示自体は壊れにくいです。
セマンティックな情報を最大限活かすためには、モダンブラウザをターゲットとするのが望ましいです。
<data>要素を使う際のベストプラクティス<data>要素が適切か検討する<time>、範囲表示なら<meter>/<progress>など、より適切な要素がないか確認する。<data>のvalue属性と要素内容の整合性を保つvalue属性に数値が入っているのに、要素内容がまったく別の情報になっていると混乱を招くため、常に意味が通るようにする。<data value="1000" itemprop="price">¥1,000</data> のようにすることで、検索エンジンにも「商品価格情報」として認識されやすくなる。aria-label 属性などで補足情報を与える。<data>要素がどの程度アクセシビリティツールでサポートされているか把握する。value 属性がずれてしまうと混乱を生むので、どちらかを変更したらもう一方も追随する仕組みが必要。<data>要素は、セマンティックに「機械可読な値を有するテキスト」をマークアップできる便利な要素です。まだまだ <span data-*> や <time> など他の要素に比べるとマイナーではありますが、使いこなすと次のようなメリットを享受できます。
一方で、実案件に導入するときは、要素のサポート状況や代替要素との役割などを十分理解し、適材適所で使うことが重要です。
カスタムデータ属性（data-*）との住み分けや、<time>・<meter>・<progress>など類似用途の要素も確認したうえで、最適な要素を選択しましょう。
最後に、本記事の要点を踏まえたサンプルWebページ例を示します。<data>要素を利用して、商品一覧と在庫管理を簡単にマークアップしたページを想定してみましょう。
HTML
<h2>商品一覧</h2>
<ul>
<li>
<strong>商品名:</strong> 高級コーヒー豆
<br>
<strong>価格:</strong>
<data id="coffee-price" value="1200">¥1,200</data>
<br>
<strong>在庫:</strong>
<data id="coffee-stock" value="15">15袋</data>
</li>
<li>
<strong>商品名:</strong> 紅茶ティーバッグ
<br>
<strong>価格:</strong>
<data id="tea-price" value="800">¥800</data>
<br>
<strong>在庫:</strong>
<data id="tea-stock" value="10">10箱</data>
</li>
</ul>
<button id="buy-coffee">コーヒー豆を1袋購入</button>
<button id="buy-tea">紅茶を1箱購入</button>
<script>
// 在庫を1つ減らすサンプルスクリプト
function buyProduct(dataElementId) {
const dataEl = document.getElementById(dataElementId);
// 現在のvalue属性を取得 (文字列として返るので数値に変換する)
let stockValue = parseInt(dataEl.value, 10);
if (stockValue > 0) {
stockValue--;
// value属性を更新
dataEl.value = stockValue.toString();
// 表示テキストも更新
dataEl.textContent = stockValue + (dataElementId === 'coffee-stock' ? '袋' : '箱');
} else {
alert('在庫がありません。');
}
}
document.getElementById('buy-coffee').addEventListener('click', () => {
buyProduct('coffee-stock');
});
document.getElementById('buy-tea').addEventListener('click', () => {
buyProduct('tea-stock');
});
</script>商品一覧
上記のサンプルページでは、商品名・価格・在庫を表示しつつ、<data>要素の value 属性で在庫数を管理しています。購入ボタンを押すと在庫数が1つ減り、表示上も更新される仕組みです。これにより、ユーザに見せるテキスト と システムが扱う数値 が分離されつつ、一貫した管理が可能となります。
<data>要素はまだあまり普及していませんが、「表示内容に対して裏で機械可読な値をもたせたい」 というニーズに合致する場合、とても有効に使えます。
ぜひ、普段のWebアプリケーション開発やSEO対策、マイクロデータとの連携などの場面で、適宜活用してみてください。そうすることで、よりセマンティックで拡張性の高いHTMLを実現できます。