Data Attributes and Web Storage APIs Overview

HTML5 also introduced ways for markup to carry custom data and for pages to store information in the browser, without any backend involved.

Custom data attributes (data-*) let you attach any custom information directly to an element, readable by JavaScript:

<button data-product-id="1024" data-in-stock="true">Add to Cart</button>

<li data-status="completed" data-priority="high">Finish the report</li>

Any attribute prefixed with data- is valid HTML by specification and won't affect rendering — it's purely a hook for JavaScript (element.dataset.productId) or CSS attribute selectors to read. This is far more maintainable than stuffing custom info into class names or ids.

Web Storage (a JavaScript API introduced alongside HTML5, though not an HTML tag itself) lets pages save data directly in the browser:

<script>
  // Persists even after closing the browser
  localStorage.setItem("theme", "dark");

  // Cleared when the browser tab is closed
  sessionStorage.setItem("draftText", "Hello!");
</script>

localStorage keeps data indefinitely until explicitly cleared (useful for saved preferences), while sessionStorage clears automatically when the tab closes (useful for temporary form drafts). Both only store simple string data and are read/written entirely through JavaScript — HTML itself has no tag for this, but it's worth knowing about since data-* attributes and Web Storage are often used together in real projects, such as remembering a user's selected filter or theme preference across page reloads.