dataタグ -データを埋め込む｜HTML辞典
<data>タグとは？
<data> タグは、マシンが処理しやすい形でデータを埋め込むためのタグです。
例えば、価格情報や商品 ID など、人間が読みやすいテキストとともに、コンピュータが利用しやすいデータを含めることができます。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）。
閉じタグの有無
<data> は 開始タグ（<data>）と閉じタグ（</data>）の両方が必要 です。
基本的な記述方法
<p>この商品の価格は <data value="1980">1,980円</data> です。</p>
使用できる主な属性
<data> タグには、コンピュータが処理しやすいデータを提供するための value 属性があります。
| 属性名 | 説明 | 例 |
|---|---|---|
value | マシンが読み取るデータ | <data value="12345">商品ID: 12345</data> |
CSSを使ったデザイン変更
<data> タグのテキストは通常のテキストと同じ扱いですが、スタイルを適用できます。
data {
font-weight: bold;
color: green;
}
適切な使用例
✅ 商品 ID を埋め込む
<p>注文番号: <data value="A12345">A12345</data></p>
✅ 価格情報を含める
<p>この商品の価格は <data value="2980">2,980円</data> です。</p>
✅ ランキング情報を含める
<p>この映画の評価は <data value="4.5">4.5/5</data> です。</p>
適切でない使用例（誤った使い方）
❌ value 属性を指定しないとマシンがデータを取得できない
<!-- NG: value 属性なし -->
<p>この商品の価格は <data>2,980円</data> です。</p>
✅ 正しい書き方（value を指定）
<p>この商品の価格は <data value="2980">2,980円</data> です。</p>
❌ <data> を単なるスタイル目的で使用する
<!-- NG: 単なる装飾目的で使用 -->
<p><data>強調されたテキスト</data></p>
✅ 正しい書き方（データとして使用）
<p>注文番号: <data value="A12345">A12345</data></p>
<data>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<data> | マシン可読なデータを埋め込む | value 属性でデータを指定 | 商品 ID、価格情報、数値データ |
<span> | インラインテキストの装飾 | 方向制御なし | スタイリングのみ |
<time> | 日時データを提供 | datetime で指定 | スケジュール、タイムスタンプ |
使用上の注意点
✅ value 属性を正しく設定する
valueのデータは数値やコードなど、マシンが解釈できる形式にする。
✅ <data> は単なる装飾タグではなく、意味を持たせて使用する
- スタイリング目的なら
<span>を使用する。
関連タグ
まとめ
<data> タグは、HTML文書内で マシン可読なデータを埋め込むためのタグ です。value 属性を適切に設定し、商品 ID、価格、数値データなどをより適切に表現できます。
