HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>data-* Attributes</title>

  <style>

    body { font-family: system-ui, sans-serif; padding: 1.5rem; line-height: 1.6; max-width: 520px; }

    article { border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem; }

    .meta { color: #64748b; font-size: 0.85rem; margin-top: 0.5rem; }

    button { margin-top: 1rem; padding: 0.5rem 1rem; border-radius: 6px; border: none; background: #0f766e; color: #fff; cursor: pointer; }

  </style>

</head>

<body>

  <article id="post" data-id="42" data-category="tutorial" data-level="beginner">

    <h2 style="margin:0 0 0.5rem;font-size:1.1rem">HTML Attributes Overview</h2>

    <p style="margin:0">Custom <code>data-*</code> attributes hold values for scripts without invalid HTML.</p>

    <p class="meta" id="meta"></p>

  </article>

  <button type="button" id="readBtn">Read data attributes</button>

  <script>

    document.getElementById('readBtn').addEventListener('click', function () {

      var el = document.getElementById('post');

      document.getElementById('meta').textContent =

        'id=' + el.dataset.id + ', category=' + el.dataset.category + ', level=' + el.dataset.level;

    });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

HTML Attributes — data-* on article