ใช้แอตทริบิวต์ data-* เพื่อฝังแอตทริบิวต์ข้อมูลกำหนดเอง (custom data attributes) ประกอบด้วยแอตทริบิวต์ที่ไม่ควรมีตัวอักษรใหญ่ และขึ้นต้นด้วย data-
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<script>
function display(rank) {
var myRank = rank.getAttribute("data-rank-type");
alert("อันดับ " + rank.innerHTML + " มี " + myRank + " คะแนน");
}
</script>
</head>
<body>
<h1>อันดับและคะแนน</h1>
<p>คลิกที่อันดับเพื่อดูรายละเอียด:</p>
<ul>
<li onclick="display(this)" id="fifth" data-rank-type="500">อันดับ 5</li>
<li onclick="display(this)" id="sixth" data-rank-type="600">อันดับ 6</li>
</ul>
</body>
</html>
การเข้าถึงผ่าน JavaScript:
element.dataset.rankType- เข้าถึงผ่าน dataset (camelCase)element.getAttribute('data-rank-type')- วิธีดั้งเดิมelement.setAttribute('data-rank-type', '700')- ตั้งค่าใหม่
data-* attributes เป็นมาตรฐาน HTML5 สำหรับเก็บข้อมูลส่วนตัวบน DOM
