Custom Data Attributes (data-*)

Er. Manoj Kumar•Nextsem Academy Curriculum

1. data-* stores custom private metadata on elements.

2. Prefix must always start with data-.

3. Does not affect visual display styling.

4. Readable via JavaScript dataset API object.

5. Keeps HTML completely valid and standardized.

<!DOCTYPE html>

<html>

<head>

<title>Custom Data Attributes</title>

</head>

<body>

<h1>Course Catalog</h1>

<article

id="course101"

data-category="frontend"

data-lessons="101"

data-difficulty="beginner">

<h2>HTML5 Complete Guide</h2>

<p>Learn web markup from scratch.</p>

</article>

</body>

</html>

Loading course layout...