HTML5 adds a new element to the mix of semantic elements: the DATA element. This element represents data with a machine-readable value attribute attached so that computers can understand that it is data as well. This means that content that is stored in a DATA element can be used by a computer to adjust scripts or provide additional information to scripts.
The CODE element is, in contrast, just a semantic element. It defines blocks of programming code that are displayed on the web page. The CODE element is not intended to be read by a computer and have the information stored within it used in some fashion other than as displayed on a web page.
There are two primary ways the DATA element can be used:
- In conjunction with microdata, the
DATAelement provides both a machine-readable format for computers to work with as well as a human-readable value that displays in the web browser. - Scripts can use the
DATAelement to store information that the script needs while displaying that information directly to the user.
How to Use the DATA Element
The DATA element can be used to mark up dates so that the reader can read it and a computer using microformats or microdata will also know what the date is. For example:
<data class="dtstart" value="2011-12-02">December 2</data> –
<data class="dtend" value="2011-12-10">10</data>
This example shows an event with a start date of December 2nd and an end date of the 10th. A computer that can read the hCalendar microdata will recognize the classes dtstart and dtend and be able to include that event in a calendar program.
You can also include data for use with a script on the page, for example:
My birthday is on a <data id=myBirthday value="2011-12-16”>Friday</data> this year.
A script could then access the element with the “myBirthday” id and use the value attribute to work with the date.
But you aren’t stuck with just using dates for the DATA element. Any information that has a standard computer-readable format (that may or may not be different from the human readable format) can be enclosed in a DATA element to tell the browser that this bit of text is actual data.
You can define:
- colors—Use hex or RGB for the
value - time—Use the standard date/time format: hh:mm:ssZ+tz
- numbers—Use computer-readable numbers rather than the written-out words, i.e. 8 instead of eight
- Anything with a computer-readable format
How is the DATA Element Different from the CODE Element?
The CODE element is only a semantic element. It is used to define blocks of text that are computer code. It is not intended for the code to be computer-readable, just that computers understand that the enclosed text is code. The DATA element can also be used programmatically, with the required value attribute.
While it is possible to define the computer language represented in a CODE block using a class attribute with the language defined after a “language-“ prefix, i.e. class=language-html. But computers are not expected to be able to compile or run the language in the code block.
The DATA Element Expands on the TIME Element
The HTML5 specification also includes the TIME element. This element has been reduced in importance in the specification in favor of the DATA element because the DATA element is more flexible. The TIME element can still be used, but for other data values beyond times and dates, you should use the DATA element. Rather than being limited to only defining dates for computer-readable semantic code, you can now define any type of data with a computer-readable value. This makes the DATA element more generic and thus more flexible.
If you had been using the TIME element to define the dates and times in your HTML5 documents, you should now switch to the DATA element.
Browser Support for the DATA Element
This element was only added to the specification after it had become a Working Draft. In fact, as of this writing, it is still only in the Editor’s draft, but because of its usefulness, I am confident that it will be added to the working draft fairly quickly.
But because of this, browser support is limited. However, it is still possible to use the DATA element with scripts and microdata. Browsers that don’t explicitly recognize the tags will simply ignore them, and you can still find the element in the DOM for use within scripts.
If you are trying to write semantic HTML with machine-readable data points, then this element is an important one to learn.
