＜data要素＞ - データ

公開日: 2017/02/09

data属性は、ユーザーエージェントが読める形式のデータをコンテンツに紐付けるための要素です。data-*属性と役割は同じです。2017年2月現在、主要なブラウザはまだこの要素をサポートしていません。

概要

名前: data
カテゴリー: Flow content; Phrasing content; Palpable content
配置できる場所: Phrasing contentが期待される場所。
コンテンツモデル: Phrasing content。
タグの省略: 開始タグも終了タグも省略できません。
DOM Interface: HTMLDataElement
仕様書: https://html.spec.whatwg.org/multipage/semantics.html#the-data-element

属性

value

紐付けるデータの値。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜data要素＞ - データ</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/data/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>data属性は、コンテンツにユーザーエージェントが解釈できるデータを付けるための要素です。下記は、それぞれの名前と点数に、ユーザーエージェントが解釈できる形の値を紐付けました。ソースコードを見て下さい。これを材料にして、JavaScriptでソートしたりできるでしょう。</p>


<table>
	<thead>
		<tr>
			<th>名前</th>
			<th>点数</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><data value="yamada">山田</data></td>
			<td><data value="1030">1,030点</data></td>
		</tr>
		<tr>
			<td><data value="suzuki">鈴木</data></td>
			<td><data value="930">930点</data></td>
		</tr>
		<tr>
			<td><data value="tanaka">田中</data></td>
			<td><data value="1112">1,112点</data></td>
		</tr>
	</tbody>
</table>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/610/"> <meta charset="utf-8"> <title>【デモ】＜data要素＞ - データ</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/data/"> </head> <body>

<p>data属性は、コンテンツにユーザーエージェントが解釈できるデータを付けるための要素です。下記は、それぞれの名前と点数に、ユーザーエージェントが解釈できる形の値を紐付けました。ソースコードを見て下さい。これを材料にして、JavaScriptでソートしたりできるでしょう。</p> <table> <thead> <tr> <th>名前</th> <th>点数</th> </tr> </thead> <tbody> <tr> <td><data value="yamada">山田</data></td> <td><data value="1030">1,030点</data></td> </tr> <tr> <td><data value="suzuki">鈴木</data></td> <td><data value="930">930点</data></td> </tr> <tr> <td><data value="tanaka">田中</data></td> <td><data value="1112">1,112点</data></td> </tr> </tbody> </table>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>