Data gives human-readable text a machine-readable value. For example, a product name can map to an internal stock code.
What You Need to Know
Choose time for dates and times. Data makes a relationship explicit but does not store information on a server.
The goal is not to collect as many tags as possible. Pick the element that best describes what the content really is.
Example: See It in Action
Take a look at this small piece of HTML. You can use it in a practice document and change the text to make it your own.
This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.
<p>Product: <data value="SKU-42">Blue Notebook</data>
</p>
<p>The label is readable, while the value identifies the item.</p>
<p>Do not use data for dates; use time instead.</p>Let’s Understand the Example
- Data connects a readable label with a machine-readable value.
- A p groups a paragraph of related text. Start another paragraph for a new thought.
- Value is the value represented or submitted by a control or data element.
Look for the text “Product:” in the page. If the visible result surprises you, inspect the rendered elements to see what the browser actually built.
What Should You See?
The page should include “Product:”. If it looks different from what you expected, open developer tools and compare the source with the elements the browser created.
Try removing one piece of markup in a scratch copy, refresh the page, and compare the behavior. This is often the fastest way to understand what that piece contributes.
Try It Yourself
- Give a second product a different machine code.
- Save your changes, open or refresh the page, and compare the result with the original example.
- Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.
Common Beginner Mistakes
- Using data value as if it automatically changes product data in a database.
- Avoid picking tags just for their default bold, italic or spaced appearance. Use CSS for presentation.
Key Takeaways
- Data gives human-readable text a machine-readable value.
- Data connects a readable label with a machine-readable value.
- Choose time for dates and times. Data makes a relationship explicit but does not store information on a server.