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.
Microdata
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">
</div>
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
</
time><br>
Dog's Picture:
<img itemprop="picture" src="angus.jpg">
<meta itemprop="entryID" content="498274">
</div>
would set the following name/value pairs:
name: Angus
age: 7
birthday: 2002-07-22
picture:angus.jpg
entryID: 498274
