HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<data>
データ要素。人間が読めるコンテンツに、機械が処理しやすい値を関連付けるために使用されます。
info
概要
<data> 要素は、その内容の**機械可読**な（プログラムが読み取りやすい）値を value 属性を使って提供します。
例えば、ユーザーには製品名を表示しつつ、JavaScriptやサーバー側の処理にはその製品のIDを渡したい場合などに役立ちます。
日付や時刻の場合は、よりセマンティックな **<time> 要素** の使用が推奨されます。
play_circle
デモ (静的表示)
HTML (Source)
<ul>
<li>
<data value="48201">究極のキーボード V1</data>
</li>
<li>
<data value="48202">快適マウス Pro</data>
</li>
</ul>
<p>
<data value="usd">米ドル</data>の今日のレート...
</p>
Preview (Result)
- 究極のキーボード V1
- 快適マウス Pro
米ドルの今日のレート...
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| value | 要素の内容に対応する、機械可読な値を指定します。この属性は**必須**です。 |
| Global Attributes | 全てのHTML要素で利用可能なグローバル属性（例: id, class, style, titleなど）。 |
code
実用例
1. 商品リストでの使用
<p>在庫中の商品一覧：</p>
<ul>
<li><data value="prod-a-123">特選コーヒー豆A</data></li>
<li><data value="prod-b-456">香り高い紅茶B</data></li>
</ul>
2. JavaScriptでのデータ利用
<p>あなたが選んだオプションは、<data value="option_lg" id="size-data">Lサイズ</data>です。</p>
// JavaScriptから機械可読な値を取得する
<script>
const sizeData = document.getElementById('size-data');
console.log(sizeData.value); // 出力: "option_lg"
</script>
3. 数値データと単位の分離
<p>
商品の重さ：<data value="250">250グラム</data>
</p>
lightbulb
知っておくべき重要事項
update
<time> 要素との使い分け
日付、時刻、または期間に関連するコンテンツ（例: 2025年12月14日、10:30am、3週間）に対して機械可読な値を付与する場合は、
日付、時刻、または期間に関連するコンテンツ（例: 2025年12月14日、10:30am、3週間）に対して機械可読な値を付与する場合は、
<data> ではなく **<time> 要素** の使用がセマンティクス的に適切です。
accessibility_new
ブラウザ表示とCSS
<data> 要素は、インライン要素であり、特別なスタイルが適用されない限り、その内容は通常のテキストとして表示されます。表示上の効果は value 属性に左右されません。