<data> elementThe <data> element represents its visible contents together with a machine-readable value. It is useful when the human wording is friendly, but a script or data processor needs a stricter value behind it.
For example, a page might show the word Large, while the underlying value is L. A table might show Eight, while the underlying value is 8. The reader sees the natural text; the page still carries the precise data.
The machine-readable value is placed in the value attribute. This attribute is required for valid markup. Its value is a string whose meaning depends on the application; it does not have to be a number.
The <data> element can supply values for sorting, filtering, product codes, catalogue references, or scoring labels. It does not sort or filter content itself: application code must read the value and perform those operations. JavaScript can read the string through the element's value property.
If the value is a date, time, or duration, the more specific <time> element is usually the better choice. The <data> element is more general: it says, "this visible thing has this machine value."
It should not be confused with data-* attributes. Custom data-* attributes attach application-specific information to almost any element. This information is visible in the page's markup; it is not secret or access-protected. The <data> element is itself part of the visible text and deliberately pairs that text with a value.
Attributes: value, GLOBALS.
Typical layout: <p> Size: <data value="L">Large</data> </p>
Visual representation:
Size: Large