Custom Data Attributes
One of the fundamental building blocks for dynamic websites is data. If you want the user to be able to click on an image, and have a pop-up appear with more detailed information about whatever they clicked on, that “more detailed information” has to be stored somewhere.
Prior to HTML5, that data would have either been stored in hidden input elements, stuffed into arbitrary class/rel attributes, or required an ajax call to query a database.
How exactly does one get on this custom data gravy train you ask? Per the HTML5 spec (link):
188.8.131.52 Embedding custom non-visible data with the data-* attributes A custom data attribute is an attribute in no namespace whose name starts with the string “data-”, has at least one character after the hyphen, is XML-compatible, and contains no uppercase ASCII letters.
What does the above mean? It means that you can add an attribute to ANY HTML element that begins with “data-” and doesn’t include any capital letters or invalid XML characters.
Invalid XML characters are mostly control characters used by lower level programing languages to mark things like the beginning and end of files. More plainly, valid XML characters are valid Unicode Characters, which are defined by the Unicode Glossary as:
Character. (1) The smallest component of written language that has semantic value; refers to the abstract meaning and/or shape, rather than a specific shape (see also glyph), though in code tables some form of visual representation is essential for the reader’s understanding. (2) Synonym for abstract character. (3) The basic unit of encoding for the Unicode character encoding. (4) The English name for the ideographic written elements of Chinese origin. [See ideograph (2).]
Google them if you want a deeper understanding, but the basic gist is that if you can type it on a standard english keyboard without hitting the shift key and would use it if you were writing an essay for an English class, it’s safe to use.