【HTML】data要素の使い方【テキストにデータ情報を付与します】

Program

data要素を使えば、テキストにデータ情報を付与できます。

data要素の使い方

data要素を使用して、テキストにデータ情報を付与する例を紹介します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>data要素</title>
</head>
<body>
    <p>こちらの商品は最新のディスプレイを備えた<data value="ES1234XX">スマートフォンX</data>です。</p>
    <p>商品の価格は<data value="9800">九千八百円</data>になります。</p>
</body>
</html>

body要素の中に、data要素およびvalue属性を使った2つのp要素を記述しました。

上から1つ目のp要素は、data要素の内容を「スマートフォンX」とし、data要素の中のvalue属性について「ES1234XX」とする値を記述してます。

このため、ブラウザでの表示は「スマートフォンX」となり、ユーザーは商品名である「スマートフォンX」という商品の名称を知ることができます。なお、商品の型番である「ES1234XX」まで表示する必要はないため、value属性としてデータ情報を付与する程度にしております。

ここで、Web上の実際のLPページ(商品紹介ページ)などでは、ユーザーの操作により商品の詳細ページを表示する場合もあるため、その際に、JaveScript等を用いた内部処理により、テキスト「スマートフォンX」に付与されたデータ情報「ES1234XX」が参照(取得)され、ブラウザに表示されることになります。

次に、上から2つ目のp要素は、data要素の内容を「九千八百円」とし、data要素の中のvalue属性として「9800」とする内容を記述しました。

このため、1つ目のp要素と同様に、実際のLPページ等において、ユーザーの操作により商品の価格に関する計算を行う際に、JaveScript等を用いた内部処理によって、テキスト「九千八百円」に付与されたデータ情報「9800」が参照(取得)され、計算の後にWeb上に表示されることとなります。

これらの例では、value属性の値として、商品の型番や商品の価格を紹介しましたが、当然のことながら、その他の様々なデータ情報を付与することもできます。

各種ブラウザでの表示結果

data要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。

【HTML】Internet ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
data要素
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、data要素の使い方について、ご参考になさってください。

タイトルとURLをコピーしました