Custom data attributes for elements are “[attributes] in no namespace whose name starts with the string ‘data-’, has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).” Thanks W3C. That definition is bookish, so let’s break it down and look at some examples.
<div data-name="Philip">Mr. Thompson is an okay guy.</div> <a href="softlayer.com" data-company-name="SoftLayer" data-company-state="TX">SoftLayer</a> <li data-color="blue">Smurfs</li>
// This attribute is not prefixed with 'data-' <h2 database-id="244">Food</h2> // These 2 attributes contain capital letters in the attribute names <p data-firstName="Ashley" data-lastName="Thompson">...</p> // This attribute does not have any valid characters following 'data-' <img src="/images/pizza.png" data-="Sausage" />