HTML and CSS Reference
In-Depth Information
These attribute values should not be used by a user agent to style the page and are
solely for developer use. In many ways, the attribute is the direct consequence of people just
inventing attributes and forgoing validation,
<p id="p1" author="Thomas A. Powell"> This is a fake attribute example </p>
or using class values in a similar manner:
<p id="p1" class="author-Thomas-A.-Powell"> This is a class data example </p>
This inappropriate use of markup is common since it is often useful to bury configuration
data in an element. Now, with the data- style attributes, we have a standard way of doing this
that will validate and hopefully reduce the conclusions that often ensue when overloading the
class attribute.
HTML5 adds the concept of microdata, which adds the ability to annotate content in such
a way that a custom program will be able to parse the HTML page and retrieve items
consisting of name/value pairs of desired data. To create an item, the attribute itemscope
is added to a parent tag:
<div itemscope>
Dog's Name: Angus <br>
Dog's Age: 7 <br>
Dog's Birthday: July 22 <br>
Dog's Picture: <img src="angus.jpg">
Simply creating an item doesn't do much without any name/value pairs. The attribute
itemprop is used to create the name/value pairs on the desired data. The itemprop
attribute is set to the name of the pair, and the value depends on what type of element
itemprop is set on. If the element is an audio , embed , iframe , img , source , or video
element, then the value is set to the src of that tag. If the element is an a , area , or link tag,
then the value is set to the href of that tag. If the element is a time tag, then the value is set
to the datetime attribute of that tag. If the element is a meta tag, then the value is set to the
content attribute of that tag. Otherwise, the value is set to the text of the tag.
As an example,
<div itemscope>
Dog's Name: <span itemprop="name"> Angus </span><br>
Dog's Age: <span itemprop="age"> 7 </span><br>
Dog's Birthday: <time itemprop="birthday" datetime="2002-07-22"> July 22 </
Dog's Picture: <img itemprop="picture" src="angus.jpg">
<meta itemprop="entryID" content="498274">
would set the following name/value pairs:
name: Angus
age: 7
birthday: 2002-07-22
entryID: 498274
Search WWH ::

Custom Search