HTML Data Attributes — Expanding What Markup Can Do

Supercharging semantics through customizable data injection

Photo by Florian Olivo on Unsplash

With the rise of complex web applications and expanded interface capabilities, the generic HTML elements defined decades ago increasingly struggle to cover all modern use cases out-of-box.

However, one flexible way custom semantics and behaviors can get incorporated into existing tags is through HTML data attributes.

Data attributes allow developers to assign extensible, customizable data payloads to standard elements without breaking validation or requiring other frameworks. This lightweight mechanism supercharges what markup can convey in a standards-compliant way.

Defining data attributes only requires following a simple naming convention using the data- prefix like:

<div data-widget-type=”media”>
 <img data-src=”image.jpg”>
</div>

Values inside data attributes can be anything — strings, JSON, numbers, etc. These payloads then become readable/actionable through interfaces and scripts:

let widgetType = $(‘div’).attr(‘data-widget-type’); // “media”
let imageSrc = $('img').data('src'); // "image.jpg"

Without data attributes, representing this conceptual binding requires less…