HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのdataタグとは？機械可読なデータを紐付ける使い方を解説

HTMLの<data>タグは、表示するコンテンツに機械が読み取り可能な形式の値（machine-readable value）を関連付けるために使用される要素です。人間には見やすいテキストを表示しながら、ブラウザやスクリプト、検索エンジンなどに対しては数値やコードといった処理しやすいデータを提供できます。

基本構文

<data>タグの基本的な書き方は以下の通りです。

<data value="">表示するテキスト</data>

value属性には、コンテンツの内容に対応する機械可読な値を指定します。この属性は必須であり、省略した場合には<data>要素としての意味を持たなくなります。

使用例

ここで、学校の科目一覧に各科目の識別番号を紐付ける実装例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h2>学校で学ぶ科目一覧</h2>
<p>科目名に番号を関連付けた例：</p>
<ul>
<li><data value="1000">数学</data></li>
<li><data value="1003">理科</data></li>
<li><data value="1009">英語</data></li>
<li><data value="1030">政治経済</data></li>
<li><data value="1045">フランス語</data></li>
</ul>
</body>
</html>

出力結果

上記のコードを実行すると、画面には次のように科目名の一覧が表示されます。

HTMLのdataタグとは？機械可読なデータを紐付ける使い方を解説

コードの解説

この例では、リスト内の各科目名に対して識別用の番号を割り当てています。

<ul>
<li><data value="1000">数学</data></li>
<li><data value="1003">理科</data></li>
<li><data value="1009">英語</data></li>
<li><data value="1030">政治経済</data></li>
<li><data value="1045">フランス語</data></li>
</ul>

ポイントは、<data>要素を使ってコンテンツに機械可読な形式を設定している部分です。

<data value="1000">
数学
</data>

画面上には「数学」というテキストがそのまま表示されますが、内部的には「1000」という番号が紐付いているため、JavaScriptによるデータ処理やフォーム送信時にこの値を活用できます。

<data>タグの主な用途

<data>タグは以下のような場面で特に役立ちます。

  • 商品名と商品コードの関連付け
  • 日付や時刻にIDを紐付ける場合（日時専用には<time>タグも利用可能）
  • スクリプトで扱いやすい数値や識別子をHTML内に埋め込む場合

なお、単純に日付や時刻を表す場合は<time>タグの方が適しており、<data>タグはより汎用的なデータ関連付けに向いています。

  1. HTMLのembedタグとは？使い方と主な属性をわかりやすく解説

    <embed>タグとは<embed>タグは、HTML文書の中に外部アプリケーションやプラグインコンテンツ（PDFファイル、動画、音声など）を埋め込むための要素です。開始タグのみで構成され、基本的に終了タグは不要です。<embed>タグで使用できる主な属性は以下の通りです。height：埋め込むコンテンツの高さをピクセル単位で指定します。src：埋め込む外部ファイルのアドレス（URL）を指定します。type：埋め込みコンテンツのメディアタイプ（MIMEタイプ）を指定します。例：「application/pdf」など。width：埋め込むコンテンツの幅をピクセル

  2. HTMLの<dfn>タグとは？定義用語のマークアップ方法を実例付きで解説

    HTMLの<dfn>タグは、専門用語や略語など「定義の対象となる語」が文書内で最初に登場する箇所を示すための要素です。多くのブラウザでは、<dfn>タグで囲まれた部分は斜体（イタリック体）で表示されます。 それでは、<dfn>タグの具体的な実装例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <body> <h2>MCAの科目一覧</h2> <p><dfn title="Master of Computer Applications"