【HTML】dataタグ - コンピュータの読み取り可能データ

HTMLのdataタグについて解説します。

検証環境

HTML

macOS

14.1

dataタグ

dataタグは“コンピュータが読み取り可能なデータ”を意味するタグです。

例えば、ECサイトにおいて、商品の識別IDなどを関連づけるために使用します。

基本構文

<data value="値">コンテンツ</data>

属性

主な属性は次の通りです。

属性名	必須	内容
data	-	データ

サンプル

sample.html

<div>商品</div>
<ul>
    <li>
        ___ih_hl_start
        <data value="item001">リンゴ</data>
        ___ih_hl_end
    </li>
    <li>
        ___ih_hl_start
        <data value="item002">パイナップル</data>
        ___ih_hl_end
    </li>
    <li>
        ___ih_hl_start
        <data value="item003">ブドウ</data>
        ___ih_hl_end
    </li>
</ul>

プレビュー