DATA要素

編集

<data>要素は、マシンリーダブルなデータを人間が読めるテキストに関連付けるために使用されます。通常、value属性を利用して、データの意味や値をマークアップします。

定義

編集
  • <data>要素は、コンテンツに関連するマシンリーダブルなデータを埋め込むために使用されます。
  • このデータは、プログラムやスクリプトによる処理を可能にします。

使用方法

編集

以下は、<data>要素の基本的な使用例です。

<p>現在の気温: <data value="25">25度</data></p>

この例では、value属性にマシンリーダブルな値が指定され、人間が読める形式の「25度」と関連付けられています。

属性

編集

<data>要素は次の属性をサポートします:

  • この属性には、マシンリーダブルなデータを指定します。
  • 指定された値はスクリプトやアプリケーションで使用されます。
<data value="12345">商品番号: 12345</data>

使用例

編集

商品データの記述

編集

以下の例では、商品に関するマシンリーダブルなデータを提供しています。

<p>商品の価格: <data value="980">980円</data></p>

この場合、980円という人間向けの情報に対して、value="980"としてデータが提供されています。

機械学習用データ

編集

機械学習モデルにデータを提供するための例です。

<p>レビュー評価: <data value="4.5">4.5/5</data></p>

この例では、value属性に評価スコアが格納され、モデルやスクリプトによって利用可能です。

注意事項

編集
  1. <data>要素は、マシンリーダブルなデータが必要な場面で有用です。ただし、代替としてカスタムデータ属性(data-*属性)が使用される場合もあります。
  2. <data>要素を使用する際は、必ずvalue属性を設定してください。設定しない場合、マシンリーダブルなデータとしての機能を果たしません。

利点

編集
  • <data>要素は、検索エンジンやデータ解析ツールにとって有益です。
  • 人間にとって可読性を損なわずにデータを埋め込むことができます。

スタイリング

編集

<data>要素はインライン要素として扱われます。CSSでスタイルを適用できます。

data {
  font-weight: bold;
  color: #007bff;
}

使用上のヒント

編集
  • 機械処理やデータの意味づけが必要な場面で積極的に使用してください。
  • data-*属性とは異なり、<data>要素は表示されるコンテンツとマシンリーダブルなデータの明確な対応関係を提供します。

関連項目

編集

関連仕様

編集