HTML5HTML5 タグリファレンス

data

 HTML5で追加

<data>要素は、その内容をvalue属性でコンピュータが判読可能な書式による値を表します。value属性がなくてはなりません。

<data>要素は、いくつかの目的のために使用することができます。例えばmicroformatsmicrodataなどの構造化データでは、マシンが判読可能な書式のvalue属性と人間が判読可能な内容の両方を提供することもできます。この場合、value属性で使用されるフォーマットは、使用中の構造化データのボキャブラリによって決まります。

値が日付や時刻などに関連する場合は、より具体的な<time>要素を使用できます。

カテゴリ
フロー・コンテンツ、フレージング・コンテンツ、パルパブル・コンテンツ
配置場所
フレージング・コンテンツが置ける場所。
内容
フレージング・コンテンツ
属性
value="マシンが判読可能な値"
コンピュータが読み取り可能なフォーマットの値を指定します。
グローバル属性

サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>HTML5 › data</title>
</head>
<body>
<h1>HTML5 › data</h1>
<article itemscope itemtype="http://n.example.org/rfc4287">
<h2 itemprop="title">求む、ステロイド軟膏</h2>
<footer>
公開:<time itemprop="published" datetime="2017-08-28">2日前</time>

<span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img src="https://emwai.jp/assets/img/avatar.png" alt="筆者画像">
<data value="url">https://emwai.jp/assets/img/avatar.png</data>
<data value="width">128</data>
<data value="height">128</data>
</span>

</footer>
<p itemprop="content">いやぁ、今日は股間がカユくてドコにも行きたくないよ。</p>
</article>
</body>
</html>