【HTML】data 要素の使い方｜value 属性で機械可読な値を持たせる方法

Webページには、人が読むための文字列と、スクリプトが処理しやすい値がずれる場面がよくあります。たとえば商品名に「金メダル」と表示しつつ、内部では並び替え用に順位「1」を持たせたい、といったケースです。こうした「表示は人向け、値は機械向け」を1つの要素で結びつけるのが <data> 要素です。この記事では、<data> 要素の基本構文と value 属性、JavaScript から値を取り出す方法、そして混同しやすい <time> 要素や data-* 属性との違いまで、初心者向けに解説します。

data 要素は「表示用の文字」と「機械用の値」をつなぐ

<data> 要素は、画面に表示する内容（要素の中身のテキスト）に対して、機械が読み取りやすい値を value 属性で紐づけるための要素です。人間向けの表記とプログラム向けの値が一致しないとき、その両方を1か所にまとめておけるのが役割です。

たとえば商品リストで、画面には「りんご」と見せながら、内部では商品ID「398」を持たせたいとします。テキストだけだと「りんご」という文字からIDを復元できませんし、逆にIDだけを書くと人が読めません。<data> なら、表示は「りんご」、値は「398」というふうに、意味を保ったまま両立できます。

基本の書き方は value 属性に値を入れるだけ

使い方はとてもシンプルです。<data> タグで表示したいテキストを囲み、value 属性に機械可読な値を書きます。

<!-- 画面には「りんご」、value には商品ID「398」 -->
<data value="398">りんご</data>

<!-- 表示は「金」、value には順位「1」 -->
<data value="1">金</data>

<!-- 表示は「在庫あり」、value には数値の在庫数 -->
<data value="24">在庫あり</data>

ブラウザの画面には、タグで囲んだテキスト（「りんご」「金」「在庫あり」）だけが表示されます。value 属性の値は画面には出ず、スクリプトから読み取るために存在します。<data> はインライン要素なので、文章中や <span> のような感覚で使えます。

JavaScript から value を読み取ってみる

<data> 要素の値は、JavaScript から element.value というプロパティで取り出せます（getAttribute("value") でも取得できますが、value プロパティのほうが簡潔です）。取り出した値は文字列なので、数値として計算したいときは Number() などで変換します。

次のデモは、果物のリストにそれぞれ価格を value として持たせ、ボタンを押すと全部の value を合計して表示する例です。画面には「お買い得」「高級」といったラベルだけが見えていますが、内部では価格を扱えているのがポイントです。「合計金額を計算」ボタンを押して動きを確かめてみてください。

<ul id="fruits" class="fruit-list">
  <li>りんご <data value="398">お買い得</data></li>
  <li>バナナ <data value="248">お買い得</data></li>
  <li>メロン <data value="1980">高級</data></li>
</ul>
<button id="sum" type="button">合計金額を計算</button>
<p id="result" class="result">ボタンを押すと合計を表示します</p>

body {
  font-family: sans-serif;
  padding: 16px;
}

.fruit-list {
  list-style: none;
  padding: 0;
}

.fruit-list li {
  padding: 8px 12px;
  margin-bottom: 8px;
  background: #f2f5f8;
  border-radius: 6px;
}

/* data要素は画面には「お買い得」などの文字だけを見せる */
.fruit-list data {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.85em;
  color: #fff;
  background: #007bff;
  border-radius: 999px;
}

button {
  padding: 8px 16px;
  color: #fff;
  background: #28a745;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.result {
  margin-top: 12px;
  font-weight: bold;
  font-size: 1.2em;
}

const button = document.getElementById("sum");
const result = document.getElementById("result");

button.addEventListener("click", () => {
  // リスト内のすべての data 要素を取得
  const items = document.querySelectorAll("#fruits data");

  let total = 0;
  items.forEach((item) => {
    // value 属性の値は element.value で取り出せる（文字列）
    total += Number(item.value);
  });

  result.textContent = `合計: ${total.toLocaleString()} 円`;
});

document.querySelectorAll("#fruits data") でリスト内の <data> 要素をまとめて取得し、それぞれの item.value を Number() で数値に変換して合計しています。表示上は「お買い得」などのラベルしか見えていないのに、価格の合計を計算できるのは、値を value 属性に持たせているおかげです。同じ仕組みで、value をキーにした並び替えや在庫数の集計もできます。

日時なら data ではなく time を使う

<data> と役割が近い要素に <time> があります。どちらも「表示用テキスト＋機械可読な値」という構造ですが、使い分けは明確です。日付や時刻を表すときは <time>、それ以外の機械可読な値は <data> を使います。

<time> は datetime 属性に、決められた日時フォーマット（例: 2026-07-23）で値を書きます。ブラウザやツールが日時として解釈できる特別な要素です。一方 <data> の value にはフォーマットの決まりがなく、商品IDでも順位でも在庫数でも、任意の文字列を入れられます。

<!-- 日時は time 要素（datetime に日時フォーマット） -->
<time datetime="2026-07-23">2026年7月23日</time>

<!-- 日時以外の機械可読値は data 要素 -->
<data value="398">りんご</data>

迷ったら「その値は日付・時刻か？」で判断してください。日時なら <time>、それ以外は <data> です。

data-* 属性（カスタムデータ属性）との違い

名前が似ているため混同しやすいのが data-* 属性（カスタムデータ属性）です。data-id="398" のように、任意の要素へ独自のデータをぶら下げる仕組みで、JavaScript からは element.dataset で読み書きします。<data> は「要素そのもの」、data-* は「どんな要素にも付けられる属性」で、まったくの別物です。

違いを整理すると次のようになります。

「画面に見せるテキストと、それに対応する1つの値をセットで持たせたい」なら <data>、「要素に複数の補助データを自由に付けたい」なら data-* 属性、と考えると選びやすくなります。なお、単に値を格納するだけで表示を伴わないなら、<meta> や data-* 属性のほうが向く場面もあります。<data> はあくまで「表示テキストとその機械可読値を対にする」用途で使うのが自然です。

value を書き忘れると意味がなくなる

<data> を使うときにつまずきやすいのが、value 属性の扱いです。

value 属性は必須

<data> にとって value は必須の属性です。<data>りんご</data> のように value を書かないと、機械可読な値を持たないただの要素になってしまい、<data> を使う意味がなくなります。JavaScript の element.value も空文字になります。表示テキストと値が同じでよいなら <span> で十分なので、<data> を選ぶ以上は必ず value に機械向けの値を入れましょう。

取得した value は文字列である

element.value で取り出せる値は、数値を入れていても文字列として返ってきます。そのまま + で足すと文字列連結になってしまうため、計算に使うときは Number(item.value) や parseInt(item.value, 10) で数値へ変換してください。デモのコードで Number() を挟んでいるのはこのためです。

まとめ

<data> 要素は、画面に見せる表示用テキストと、スクリプトが扱いやすい機械可読な値を value 属性で結びつける要素です。<data value="398">りんご</data> のように書き、JavaScript からは element.value で値を取り出せます（取得値は文字列なので数値計算時は変換が必要）。日付・時刻には <time> を使い、それ以外の機械可読値に <data> を使うと覚えておきましょう。また、任意の要素に複数のデータを付けたいときはカスタムデータ属性 data-* の出番で、要素そのものである <data> とは役割が異なります。商品リストの並び替えや在庫の集計など、「表示とは別に値を持たせたい」場面でぜひ活用してみてください。

参考ページ

• <data>: データ要素 – HTML | MDN
• HTMLDataElement: value プロパティ – Web API | MDN
• <time>: 時刻要素 – HTML | MDN