You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2131 lines
125 KiB
2131 lines
125 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html lang="en-US-x-Hixie"><title>HTML Microdata</title><style type="text/css">
|
|
pre { margin-left: 2em; white-space: pre-wrap; }
|
|
h2 { margin: 3em 0 1em 0; }
|
|
h3 { margin: 2.5em 0 1em 0; }
|
|
h4 { margin: 2.5em 0 0.75em 0; }
|
|
h5, h6 { margin: 2.5em 0 1em; }
|
|
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
|
|
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
|
|
p { margin: 1em 0; }
|
|
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
|
|
dl, dd { margin-top: 0; margin-bottom: 0; }
|
|
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
|
|
dt + dt { margin-top: 0; }
|
|
dd dt { margin-top: 0.25em; margin-bottom: 0; }
|
|
dd p { margin-top: 0; }
|
|
dd dl + p { margin-top: 1em; }
|
|
dd table + p { margin-top: 1em; }
|
|
p + * > li, dd li { margin: 1em 0; }
|
|
dt, dfn { font-weight: bold; font-style: normal; }
|
|
dt dfn { font-style: italic; }
|
|
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
|
|
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
|
|
pre em { font-weight: bolder; font-style: normal; }
|
|
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
|
|
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
|
|
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
|
|
table thead, table tbody { border-bottom: solid; }
|
|
table tbody th:first-child { border-left: solid; }
|
|
table tbody th { text-align: left; }
|
|
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
|
|
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
|
|
|
|
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
|
|
.matrix, .matrix td { border: none; text-align: right; }
|
|
.matrix { margin-left: 2em; }
|
|
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
|
|
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
|
|
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
|
|
|
|
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
|
|
img.extra { float: right; }
|
|
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
|
|
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
|
|
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
|
|
pre.css:first-line { color: #AAAA50; }
|
|
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; }
|
|
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
|
|
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
|
|
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
|
|
dl.domintro dd p { margin: 0.5em 0; }
|
|
dl.switch { padding-left: 2em; }
|
|
dl.switch > dt { text-indent: -1.5em; }
|
|
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
|
|
dl.triple { padding: 0 0 0 1em; }
|
|
dl.triple dt, dl.triple dd { margin: 0; display: inline }
|
|
dl.triple dt:after { content: ':'; }
|
|
dl.triple dd:after { content: '\A'; white-space: pre; }
|
|
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
|
|
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
|
|
a .diff-new { border-bottom: 1px blue solid; }
|
|
|
|
h2 { page-break-before: always; }
|
|
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
|
|
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
|
|
|
|
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]),
|
|
li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), { border-bottom: solid #9999CC; }
|
|
|
|
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
|
|
div.head p { margin: 0; }
|
|
div.head h1 { margin: 0; }
|
|
div.head .logo { float: right; margin: 0 1em; }
|
|
div.head .logo img { border: none } /* remove border from top image */
|
|
div.head dl { margin: 1em 0; }
|
|
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
|
|
|
|
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
|
|
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
|
|
body > .toc > li > * { margin-bottom: 0.5em; }
|
|
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
|
|
.toc, .toc li { list-style: none; }
|
|
|
|
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
|
|
.brief li { margin: 0; padding: 0; }
|
|
.brief li p { margin: 0; padding: 0; }
|
|
|
|
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
|
|
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
|
|
.category-list li { display: inline; }
|
|
.category-list li:not(:last-child)::after { content: ', '; }
|
|
.category-list li > span, .category-list li > a { text-transform: lowercase; }
|
|
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
|
|
|
|
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
|
|
.XXX > :first-child { margin-top: 0; }
|
|
p .XXX { line-height: 3em; }
|
|
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
|
|
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
|
|
.annotation :link, .annotation :visited { color: inherit; }
|
|
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
|
|
.annotation span { border: none ! important; }
|
|
.note { color: green; background: transparent; font-family: sans-serif; }
|
|
.warning { color: red; background: transparent; }
|
|
.note, .warning { font-weight: bolder; font-style: italic; }
|
|
p.note, div.note { padding: 0.5em 2em; }
|
|
span.note { padding: 0 2em; }
|
|
.note p:first-child, .warning p:first-child { margin-top: 0; }
|
|
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
|
|
.warning:before { font-style: normal; }
|
|
p.note:before { content: 'Note: '; }
|
|
p.warning:before { content: '\26A0 Warning! '; }
|
|
|
|
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
|
|
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
|
|
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
|
|
.bookkeeping dt { margin: 0.5em 2em 0; }
|
|
.bookkeeping dd { margin: 0 3em 0.5em; }
|
|
|
|
h4 { position: relative; z-index: 3; }
|
|
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
|
|
.element {
|
|
background: #EEEEFF;
|
|
color: black;
|
|
margin: 0 0 1em 0.15em;
|
|
padding: 0 1em 0.25em 0.75em;
|
|
border-left: solid #9999FF 0.25em;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.element:before {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 0;
|
|
left: -1.15em;
|
|
height: 2em;
|
|
width: 0.9em;
|
|
background: #EEEEFF;
|
|
content: ' ';
|
|
border-style: none none solid solid;
|
|
border-color: #9999FF;
|
|
border-width: 0.25em;
|
|
}
|
|
|
|
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
|
|
td > .example:only-child { margin: 0 0 0 0.1em; }
|
|
|
|
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
|
|
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
|
|
ul.domTree li li { list-style: none; }
|
|
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
|
|
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
|
|
ul.domTree span { font-style: italic; font-family: serif; }
|
|
ul.domTree .t1 code { color: purple; font-weight: bold; }
|
|
ul.domTree .t2 { font-style: normal; font-family: monospace; }
|
|
ul.domTree .t2 .name { color: black; font-weight: bold; }
|
|
ul.domTree .t2 .value { color: blue; font-weight: normal; }
|
|
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
|
|
ul.domTree .t7 code, .domTree .t8 code { color: green; }
|
|
ul.domTree .t10 code { color: teal; }
|
|
|
|
body.dfnEnabled dfn { cursor: pointer; }
|
|
.dfnPanel {
|
|
display: inline;
|
|
position: absolute;
|
|
z-index: 10;
|
|
height: auto;
|
|
width: auto;
|
|
padding: 0.5em 0.75em;
|
|
font: small sans-serif, Droid Sans Fallback;
|
|
background: #DDDDDD;
|
|
color: black;
|
|
border: outset 0.2em;
|
|
}
|
|
.dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
|
|
.dfnPanel :link, .dfnPanel :visited { color: black; }
|
|
.dfnPanel p { font-weight: bolder; }
|
|
.dfnPanel * + p { margin-top: 0.25em; }
|
|
.dfnPanel li { list-style-position: inside; }
|
|
|
|
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
|
|
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
|
|
#configUI p label { display: block; }
|
|
#configUI #updateUI, #configUI .loginUI { text-align: center; }
|
|
#configUI input[type=button] { display: block; margin: auto; }
|
|
|
|
fieldset { margin: 1em; padding: 0.5em 1em; }
|
|
fieldset > legend + * { margin-top: 0; }
|
|
fieldset > :last-child { margin-bottom: 0; }
|
|
fieldset p { margin: 0.5em 0; }
|
|
|
|
.stability {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0; right: 0;
|
|
margin: 0 auto 0 auto;
|
|
width: 50%;
|
|
background: maroon; color: yellow;
|
|
-webkit-border-radius: 1em 1em 0 0;
|
|
-moz-border-radius: 1em 1em 0 0;
|
|
border-radius: 1em 1em 0 0;
|
|
-moz-box-shadow: 0 0 1em #500;
|
|
-webkit-box-shadow: 0 0 1em #500;
|
|
box-shadow: 0 0 1em red;
|
|
padding: 0.5em 1em;
|
|
text-align: center;
|
|
}
|
|
.stability strong {
|
|
display: block;
|
|
}
|
|
.stability input {
|
|
appearance: none; margin: 0; border: 0; padding: 0.25em 0.5em; background: transparent; color: black;
|
|
position: absolute; top: -0.5em; right: 0; font: 1.25em sans-serif; text-align: center;
|
|
}
|
|
.stability input:hover {
|
|
color: white;
|
|
text-shadow: 0 0 2px black;
|
|
}
|
|
.stability input:active {
|
|
padding: 0.3em 0.45em 0.2em 0.55em;
|
|
}
|
|
.stability :link, .stability :visited,
|
|
.stability :link:hover, .stability :visited:hover {
|
|
background: transparent;
|
|
color: white;
|
|
}
|
|
|
|
</style>
|
|
<link href="data:text/css,.impl%20{%20display:%20none;%20}%0Ahtml%20{%20border:%20solid%20yellow;%20}%20.domintro:before%20{%20display:%20none;%20}" id="author" rel="alternate stylesheet" title="Author documentation only">
|
|
<link href="data:text/css,.impl%20{%20background:%20%23FFEEEE;%20}%20.domintro:before%20{%20background:%20%23FFEEEE;%20}" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements">
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet" type="text/css"><style type="text/css">
|
|
|
|
.applies thead th > * { display: block; }
|
|
.applies thead code { display: block; }
|
|
.applies tbody th { whitespace: nowrap; }
|
|
.applies td { text-align: center; }
|
|
.applies .yes { background: yellow; }
|
|
|
|
.matrix, .matrix td { border: hidden; text-align: right; }
|
|
.matrix { margin-left: 2em; }
|
|
|
|
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
|
|
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
|
|
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
|
|
|
|
td.eg { border-width: thin; text-align: center; }
|
|
|
|
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
|
|
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
|
|
#table-example-1 caption { padding-bottom: 0.5em; }
|
|
#table-example-1 thead, #table-example-1 tbody { border: none; }
|
|
#table-example-1 th, #table-example-1 td { border: solid thin; }
|
|
#table-example-1 th { font-weight: normal; }
|
|
#table-example-1 td { border-style: none solid; vertical-align: top; }
|
|
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
|
|
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
|
|
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
|
|
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
|
|
#table-example-1 tbody td:first-child::after { content: leader(". "); }
|
|
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
|
|
#table-example-1 tbody td:first-child + td { width: 10em; }
|
|
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
|
|
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
|
|
|
|
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
|
|
.apple-table-examples * { font-family: "Times", serif; }
|
|
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
|
|
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
|
|
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
|
|
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
|
|
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
|
|
.apple-table-examples td { text-align: right; vertical-align: top; }
|
|
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
|
|
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
|
|
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
|
|
.apple-table-examples sup { line-height: 0; }
|
|
|
|
.details-example img { vertical-align: top; }
|
|
|
|
#base64-table {
|
|
white-space: nowrap;
|
|
font-size: 0.6em;
|
|
column-width: 6em;
|
|
column-count: 5;
|
|
column-gap: 1em;
|
|
-moz-column-width: 6em;
|
|
-moz-column-count: 5;
|
|
-moz-column-gap: 1em;
|
|
-webkit-column-width: 6em;
|
|
-webkit-column-count: 5;
|
|
-webkit-column-gap: 1em;
|
|
}
|
|
#base64-table thead { display: none; }
|
|
#base64-table * { border: none; }
|
|
#base64-table tbody td:first-child:after { content: ':'; }
|
|
#base64-table tbody td:last-child { text-align: right; }
|
|
|
|
#named-character-references-table {
|
|
white-space: nowrap;
|
|
font-size: 0.6em;
|
|
column-width: 30em;
|
|
column-gap: 1em;
|
|
-moz-column-width: 30em;
|
|
-moz-column-gap: 1em;
|
|
-webkit-column-width: 30em;
|
|
-webkit-column-gap: 1em;
|
|
}
|
|
#named-character-references-table > table > tbody > tr > td:first-child + td,
|
|
#named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
|
|
#named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; }
|
|
#named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; }
|
|
|
|
.glyph.control { color: red; }
|
|
|
|
@font-face {
|
|
font-family: 'Essays1743';
|
|
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf');
|
|
}
|
|
@font-face {
|
|
font-family: 'Essays1743';
|
|
font-weight: bold;
|
|
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf');
|
|
}
|
|
@font-face {
|
|
font-family: 'Essays1743';
|
|
font-style: italic;
|
|
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf');
|
|
}
|
|
@font-face {
|
|
font-family: 'Essays1743';
|
|
font-style: italic;
|
|
font-weight: bold;
|
|
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf');
|
|
}
|
|
|
|
</style><style type="text/css">
|
|
.domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
|
|
</style>
|
|
<script type="text/javascript">
|
|
function getCookie(name) {
|
|
var params = location.search.substr(1).split("&");
|
|
for (var index = 0; index < params.length; index++) {
|
|
if (params[index] == name)
|
|
return "1";
|
|
var data = params[index].split("=");
|
|
if (data[0] == name)
|
|
return unescape(data[1]);
|
|
}
|
|
var cookies = document.cookie.split("; ");
|
|
for (var index = 0; index < cookies.length; index++) {
|
|
var data = cookies[index].split("=");
|
|
if (data[0] == name)
|
|
return unescape(data[1]);
|
|
}
|
|
return null;
|
|
}
|
|
</script><div class="head" id="head">
|
|
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
|
|
|
|
<h1>HTML Microdata</h1>
|
|
<h2 class="no-num no-toc" id="generatedID"></h2>
|
|
<h2 class="no-num no-toc" id="w3c-working-draft-25-may-2011">W3C Working Draft 25 May 2011</h2>
|
|
<dl><dt>This Version:</dt>
|
|
<dd><a href="http://www.w3.org/TR/2011/WD-microdata-20110525/">http://www.w3.org/TR/2011/WD-microdata-20110525/</a></dd>
|
|
<dt>Latest Published Version:</dt>
|
|
<dd><a href="http://www.w3.org/TR/microdata/">http://www.w3.org/TR/microdata/</a></dd>
|
|
<dt>Latest Editor's Draft:</dt>
|
|
<dd><a class="latest-link" href="http://dev.w3.org/html5/md/Overview.html">http://dev.w3.org/html5/md/Overview.html</a></dd>
|
|
|
|
<dt>Previous Versions:</dt>
|
|
<dd><a href="http://www.w3.org/TR/2011/WD-microdata-20110405/">http://www.w3.org/TR/2011/WD-microdata-20110405/</a></dd>
|
|
<dd><a href="http://www.w3.org/TR/2011/WD-microdata-20110113/">http://www.w3.org/TR/2011/WD-microdata-20110113/</a></dd>
|
|
<dd><a href="http://www.w3.org/TR/2010/WD-microdata-20101019/">http://www.w3.org/TR/2010/WD-microdata-20101019/</a></dd>
|
|
<dd><a href="http://www.w3.org/TR/2010/WD-microdata-20100624/">http://www.w3.org/TR/2010/WD-microdata-20100624/</a></dd>
|
|
<dd><a href="http://www.w3.org/TR/2010/WD-microdata-20100304/">http://www.w3.org/TR/2010/WD-microdata-20100304/</a></dd>
|
|
<dd><a href="http://www.w3.org/TR/2009/WD-html5-20090825/">http://www.w3.org/TR/2009/WD-html5-20090825/</a></dd>
|
|
<!-- :ZZZ -->
|
|
<dt>Editor:</dt>
|
|
<dd><a href="mailto:ian@hixie.ch">Ian Hickson</a>, Google, Inc.</dd>
|
|
</dl><p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a>
|
|
© 2011 <a href="http://www.w3.org/"><abbr title="World Wide
|
|
Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts
|
|
Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.org/"><abbr title="European Research
|
|
Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C
|
|
<a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
|
|
<a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
|
|
and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|
use</a> rules apply.</p>
|
|
|
|
|
|
<!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST -->
|
|
<p class="alt">The bulk of the text of this specification is also
|
|
available in the WHATWG <a href="http://www.whatwg.org/specs/web-apps/current-work/complete.html#microdata">Web Applications 1.0</a> specification, under a license that permits
|
|
reuse of the specification text.</p>
|
|
<!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST -->
|
|
|
|
|
|
</div><hr class="top"><h2 class="no-num no-toc" id="abstract">Abstract</h2><p>This specification defines the HTML microdata mechanism. This
|
|
mechanism allows machine-readable data to be embedded in HTML
|
|
documents in an easy-to-write manner, with an unambiguous parsing
|
|
model. It is compatible with numerous other data formats including
|
|
RDF and JSON.<h2 class="no-num no-toc" id="status-of-this-document">Status of This document</h2><p><em>This section describes the status of this document at the
|
|
time of its publication. Other documents may supersede this
|
|
document. A list of current W3C publications and the most recently
|
|
formally published revision of this technical report can be found in
|
|
the <a href="http://www.w3.org/TR/">W3C technical reports index</a>
|
|
at http://www.w3.org/TR/.</em></p><p>If you wish to make comments regarding this document in a manner
|
|
that is tracked by the W3C, please submit them via using <a href="http://www.w3.org/Bugs/Public/enter_bug.cgi?product=HTML%20WG">our
|
|
public bug database</a>. If you do not have an account then you can
|
|
enter feedback using this form:<form action="http://www.whatwg.org/specs/web-apps/current-work/file-spam.cgi" method="post">
|
|
<fieldset><legend>Feedback Comments</legend>
|
|
<input name="id" type="hidden" value="top"><input name="component" type="hidden" value="HTML Microdata (editor: Ian Hickson)"><input name="response" type="hidden" value="html"><p><label for="feedbackBox">Please enter your feedback, carefully
|
|
indicating the title of the section for which you are submitting
|
|
feedback, quoting the text that's wrong today if appropriate. If
|
|
you're suggesting a new feature, it's really important to say
|
|
<em>what</em> the problem you're trying to solve is. That's more
|
|
important than the solution, in fact.</label></p>
|
|
<p><textarea cols="79" id="feedbackBox" name="text" rows="10"></textarea></p>
|
|
<p class="note">Please don't use section numbers as these tend to
|
|
change rapidly and make your feedback harder to understand.</p>
|
|
<script type="text/javascript">
|
|
function checkFeedbackForm(form) {
|
|
if (form.elements.text.value.match(/^ *</)) {
|
|
alert('Please don\'t start your feedback with an angle bracket, instead explain what topic your feedback is about first.');
|
|
return true;
|
|
} else if (form.elements.text.value.match(/ [^ ]+ [^ ]+ [^ ]+ [^ ]+ /)) {
|
|
if (form.elements.text.value.match(/^Please enter your feedback, carefully/)) {
|
|
alert('Please enter your feedback, explaining what is wrong, and without repeating the instructions. Thanks!');
|
|
return true;
|
|
} else if (form.elements.text.value.match(/ [^ ]+ [^ ]+ [^ ]+ [^ ]+ /)) {
|
|
form.action = "http://www.whatwg.org/specs/web-apps/current-work/file-bug.cgi";
|
|
return true;
|
|
} else {
|
|
alert('Please include significantly more detail about exactly what problem you are trying to solve.');
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
</script><p>
|
|
<input onclick="return checkFeedbackForm(form)" type="submit" value="Submit feedback"><small>(Note: Your IP address and user agent will be publicly recorded for spam prevention purposes.)</small>
|
|
</p>
|
|
</fieldset></form><p>If you cannot do this then you can also e-mail feedback to <a href="mailto:public-html-comments@w3.org">public-html-comments@w3.org</a>
|
|
(<a href="mailto:public-html-comments-request@w3.org?subject=subscribe">subscribe</a>,
|
|
<a href="http://lists.w3.org/Archives/Public/public-html-comments/">archives</a>),
|
|
and arrangements will be made to transpose the comments to our
|
|
public bug database.
|
|
|
|
<!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING SENTENCE TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST -->
|
|
Alternatively, you can e-mail feedback to <a href="mailto:whatwg@whatwg.org">whatwg@whatwg.org</a> (<a href="http://lists.whatwg.org/listinfo.cgi/whatwg-whatwg.org">subscribe</a>,
|
|
<a href="http://lists.whatwg.org/pipermail/whatwg-whatwg.org/">archives</a>).
|
|
The editor guarantees that all substantive feedback sent to this
|
|
list will receive a reply. However, such feedback is not considered
|
|
formal feedback for the W3C process.
|
|
<!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING SENTENCE TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST -->
|
|
|
|
All feedback is welcome.</p><!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>The working groups maintains <a href="http://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&short_desc_type=allwordssubstr&short_desc=&long_desc_type=allwordssubstr&long_desc=&bug_file_loc_type=allwordssubstr&bug_file_loc=&status_whiteboard_type=allwordssubstr&status_whiteboard=&keywords_type=allwords&keywords=&bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&emailassigned_to1=1&emailtype1=exact&email1=ian%40hixie.ch&emailtype2=substring&email2=&bugidtype=include&bug_id=&votes=&chfieldfrom=&chfieldto=Now&chfieldvalue=&cmdtype=doit&order=Reuse+same+sort+as+last+time&field0-0-0=noop&type0-0-0=noop&value0-0-0=">a
|
|
list of all bug reports that the editor has not yet tried to
|
|
address</a> and <a href="http://www.w3.org/html/wg/tracker/products/1">a list of issues
|
|
for which the chairs have not yet declared a decision</a>. The
|
|
editor also maintains <a href="http://www.whatwg.org/issues/">a list
|
|
of all e-mails that he has not yet tried to address</a>. These bugs,
|
|
issues, and e-mails apply to multiple HTML-related specifications,
|
|
not just this one.</p><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>Implementors should be aware that this specification is not
|
|
stable. <strong>Implementors who are not taking part in the
|
|
discussions are likely to find the specification changing out from
|
|
under them in incompatible ways.</strong> Vendors interested in
|
|
implementing this specification before it eventually reaches the
|
|
Candidate Recommendation stage should join the aforementioned
|
|
mailing lists and take part in the discussions.<div id="multipage-common">
|
|
|
|
|
|
<p class="stability" id="wip"><strong>This is a work in
|
|
progress!</strong> For the latest updates from the HTML WG, possibly
|
|
including important bug fixes, please look at the <a href="http://dev.w3.org/html5/md/Overview.html">editor's draft</a> instead.
|
|
There may also be a more
|
|
<a href="http://www.w3.org/TR/microdata/">up-to-date Working Draft</a>
|
|
with changes based on resolution of Last Call issues.
|
|
<input onclick="closeWarning(this.parentNode)" type="button" value="╳⃝"></p>
|
|
<script type="text/javascript">
|
|
function closeWarning(element) {
|
|
element.parentNode.removeChild(element);
|
|
var date = new Date();
|
|
date.setDate(date.getDate()+4);
|
|
document.cookie = 'hide-obsolescence-warning=1; expires=' + date.toGMTString();
|
|
}
|
|
if (getCookie('hide-obsolescence-warning') == '1')
|
|
setTimeout(function () { document.getElementById('wip').parentNode.removeChild(document.getElementById('wip')); }, 2000);
|
|
</script></div><p>The publication of this document by the W3C as a
|
|
W3C Last Call Working Draft does not imply that all of the participants in the W3C HTML
|
|
working group endorse the contents of the specification. Indeed, for
|
|
any section of the specification, one can usually find many members
|
|
of the working group or of the W3C as a whole who object strongly to
|
|
the current text, the existence of the section at all, or the idea
|
|
that the working group should even spend time discussing the concept
|
|
of that section.</p>
|
|
|
|
<p>The W3C Technical Architecture Group has sent the HTML Working Group a
|
|
<a href="http://lists.w3.org/Archives/Public/public-html/2011May/0336.html">note regarding a technical issue in this document</a>;
|
|
there is also a related bug open:
|
|
<a href="http://www.w3.org/Bugs/Public/show_bug.cgi?id=12713">12713 (Mapping microdata in RDF)</a>.</p>
|
|
|
|
<p>W3C anticipates that there will be changes to this specification as a
|
|
result of the resolution of Last Call issues. Per the usual W3C Process,
|
|
any significant changes to the specification will trigger a subsequent Last
|
|
Call.</p>
|
|
|
|
<!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST -->
|
|
<p>The latest stable version of the editor's draft of this
|
|
specification is always available on <a href="http://dev.w3.org/html5/">the W3C CVS server</a> and in the <a href="http://svn.whatwg.org/webapps/">WHATWG Subversion
|
|
repository</a>. The <a href="http://www.whatwg.org/specs/web-apps/current-work/complete.html">latest
|
|
editor's working copy</a> (which may contain unfinished text in the
|
|
process of being prepared) contains the latest draft text of this
|
|
specification (amongst others). For more details, please see the <a href="http://wiki.whatwg.org/wiki/FAQ#What_are_the_various_versions_of_the_spec.3F">WHATWG
|
|
FAQ</a>.</p><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING LIST TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>There are various ways to follow the change history for the
|
|
HTML specifications:<dl><dt>E-mail notifications of changes</dt>
|
|
<dd>HTML-Diffs mailing list (diff-marked HTML versions for each change): <a href="http://lists.w3.org/Archives/Public/public-html-diffs/latest">http://lists.w3.org/Archives/Public/public-html-diffs/latest</a></dd>
|
|
<dd>Commit-Watchers mailing list (complete source diffs): <a href="http://lists.whatwg.org/listinfo.cgi/commit-watchers-whatwg.org">http://lists.whatwg.org/listinfo.cgi/commit-watchers-whatwg.org</a></dd>
|
|
<dt>Real-time notifications of changes:</dt>
|
|
<dd>Generated diff-marked HTML versions for each change: <a href="http://twitter.com/HTML5">http://twitter.com/HTML5</a></dd>
|
|
<dt>Browsable version-control record of all changes:</dt>
|
|
<dd>CVSWeb interface with side-by-side diffs: <a href="http://dev.w3.org/cvsweb/html5/">http://dev.w3.org/cvsweb/html5/</a></dd>
|
|
<dd>Annotated summary with unified diffs: <a href="http://html5.org/tools/web-apps-tracker">http://html5.org/tools/web-apps-tracker</a></dd>
|
|
<dd>Raw Subversion interface: <code>svn checkout http://svn.whatwg.org/webapps/</code></dd>
|
|
</dl><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING LIST TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>The W3C <a href="http://www.w3.org/html/wg/">HTML Working
|
|
Group</a> is the W3C working group responsible for this
|
|
specification's progress along the W3C Recommendation
|
|
track.
|
|
This specification is the 25 May 2011 Last Call Working Draft.
|
|
The Last Call period ends 03 August 2011.
|
|
</p><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>Work on this specification is also done at the <a href="http://www.whatwg.org/">WHATWG</a>. The W3C HTML working group
|
|
actively pursues convergence with the WHATWG, as required by the <a href="http://www.w3.org/2007/03/HTML-WG-charter">W3C HTML working
|
|
group charter</a>.</p><!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>This document was produced by a group operating under the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5
|
|
February 2004 W3C Patent Policy</a>. W3C maintains a <a href="http://www.w3.org/2004/01/pp-impl/40318/status" rel="disclosure">public list of
|
|
any patent disclosures</a> made in connection with the deliverables
|
|
of the group; that page also includes instructions for disclosing a
|
|
patent. An individual who has actual knowledge of a patent which the
|
|
individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
|
|
Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
|
|
6 of the W3C Patent Policy</a>.<h2 class="no-num no-toc" id="contents">Table of Contents</h2>
|
|
<ol class="toc">
|
|
<li><a href="#common-infrastructure"><span class="secno">1 </span>Common infrastructure</a>
|
|
<ol>
|
|
<li><a href="#conformance-requirements"><span class="secno">1.1 </span>Conformance requirements</a></li>
|
|
<li><a href="#htmlpropertiescollection-0"><span class="secno">1.2 </span>HTMLPropertiesCollection</a></ol></li>
|
|
<li><a href="#introduction"><span class="secno">2 </span>Introduction</a>
|
|
<ol>
|
|
<li><a href="#overview"><span class="secno">2.1 </span>Overview</a></li>
|
|
<li><a href="#the-basic-syntax"><span class="secno">2.2 </span>The basic syntax</a></li>
|
|
<li><a href="#typed-items"><span class="secno">2.3 </span>Typed items</a></li>
|
|
<li><a href="#global-identifiers-for-items"><span class="secno">2.4 </span>Global identifiers for items</a></li>
|
|
<li><a href="#selecting-names-when-defining-vocabularies"><span class="secno">2.5 </span>Selecting names when defining vocabularies</a></li>
|
|
<li><a href="#using-the-microdata-dom-api"><span class="secno">2.6 </span>Using the microdata DOM API</a></ol></li>
|
|
<li><a href="#encoding-microdata"><span class="secno">3 </span>Encoding microdata</a>
|
|
<ol>
|
|
<li><a href="#the-microdata-model"><span class="secno">3.1 </span>The microdata model</a></li>
|
|
<li><a href="#items"><span class="secno">3.2 </span>Items</a></li>
|
|
<li><a href="#names:-the-itemprop-attribute"><span class="secno">3.3 </span>Names: the <code>itemprop</code> attribute</a></li>
|
|
<li><a href="#values"><span class="secno">3.4 </span>Values</a></li>
|
|
<li><a href="#associating-names-with-items"><span class="secno">3.5 </span>Associating names with items</a></ol></li>
|
|
<li><a href="#microdata-dom-api"><span class="secno">4 </span>Microdata DOM API</a>
|
|
<ol>
|
|
<li><a href="#drag-and-drop"><span class="secno">4.1 </span>Drag-and-drop</a></ol></li>
|
|
<li><a href="#converting-html-to-other-formats"><span class="secno">5 </span>Converting HTML to other formats</a>
|
|
<ol>
|
|
<li><a href="#json"><span class="secno">5.1 </span>JSON</a></li>
|
|
<li><a href="#rdf"><span class="secno">5.2 </span>RDF</a>
|
|
<ol>
|
|
<li><a href="#examples"><span class="secno">5.2.1 </span>Examples</a></ol></ol></li>
|
|
<li><a href="#iana"><span class="secno">6 </span>IANA considerations</a>
|
|
<ol>
|
|
<li><a href="#application-microdata-json"><span class="secno">6.1 </span><code>application/microdata+json</code></a></ol></li>
|
|
<li><a class="no-num" href="#references">References</a></li>
|
|
<li><a class="no-num" href="#acknowledgements">Acknowledgements</a></ol>
|
|
<hr><h2 id="common-infrastructure"><span class="secno">1 </span>Common infrastructure</h2><p>This specification is designed to be used with a <dfn id="host-language">host
|
|
language</dfn> that defines the following terms:<ul class="brief"><li>DOM <dfn id="collections">collections</dfn>
|
|
<li>The <dfn id="htmlcollection-interface"><code>HTMLCollection</code> interface</dfn>
|
|
<li><dfn id="reflect" title="reflect">Reflection</dfn> of IDL attributes
|
|
<li><dfn id="tree-order">Tree order</dfn> in a DOM tree
|
|
<li>A node's <dfn id="home-subtree">home subtree</dfn>
|
|
<li><dfn id="url">URL</dfn>
|
|
<li><dfn id="valid-url">Valid URL</dfn>
|
|
<li><dfn id="absolute-url">Absolute URL</dfn>
|
|
<li><dfn id="resolve-a-url">Resolve a URL</dfn>.
|
|
<li><dfn id="alphanumeric-ascii-characters">Alphanumeric ASCII characters</dfn>
|
|
<li><dfn id="space-characters">Space characters</dfn>
|
|
<li><dfn id="split-a-string-on-spaces">Split a string on spaces</dfn>
|
|
<li><dfn id="converted-to-ascii-uppercase">Converted to ASCII uppercase</dfn>
|
|
<li><dfn id="prefix-match">Prefix match</dfn>
|
|
<li><dfn id="html-elements">HTML elements</dfn>
|
|
<li>The <dfn id="htmlelement"><code>HTMLElement</code></dfn> interface
|
|
<li>The <dfn id="htmldocument"><code>HTMLDocument</code></dfn> interface
|
|
<li><dfn id="the-title-element">The <code>title</code> element</dfn> in the context of an <code><a href="#htmldocument">HTMLDocument</a></code>
|
|
<li><dfn id="flow-content">Flow content</dfn>
|
|
<li><dfn id="phrasing-content">Phrasing content</dfn>
|
|
<li>An element's <dfn id="concept-id" title="concept-ID">ID</dfn>
|
|
<li>An element's <dfn id="language">language</dfn>
|
|
<li>A set of <dfn id="global-attributes">global attributes</dfn>
|
|
<li><dfn id="boolean-attribute">Boolean attribute</dfn>
|
|
<li><dfn id="unordered-set-of-unique-space-separated-tokens">Unordered set of unique space-separated tokens</dfn>
|
|
<li><dfn id="valid-non-negative-integer">Valid non-negative integer</dfn>
|
|
<li><dfn id="concept-date" title="concept-date">Date</dfn>
|
|
<li><dfn id="concept-time" title="concept-time">Time</dfn>
|
|
<li><dfn id="concept-datetime" title="concept-datetime">Global date and time</dfn>
|
|
<li><dfn id="valid-date-string">Valid date string</dfn>
|
|
<li><dfn id="valid-global-date-and-time-string">Valid global date and time string</dfn>
|
|
<li><dfn id="the-document-s-current-address">The document's current address</dfn>
|
|
<li><dfn id="drag-and-drop-initialization-steps">Drag-and-drop initialization steps</dfn>
|
|
<li>The <dfn id="list-of-dragged-nodes">list of dragged nodes</dfn>
|
|
</ul><p>The <a href="#host-language">host language</a> also defines the elements used in
|
|
this specification.</p><h3 id="conformance-requirements"><span class="secno">1.1 </span>Conformance requirements</h3><p>All diagrams, examples, and notes in this specification are
|
|
non-normative, as are all sections explicitly marked non-normative.
|
|
Everything else in this specification is normative.<p>The key words "MUST", "MUST NOT", "REQUIRED", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and
|
|
"OPTIONAL" in the normative parts of this document are to be
|
|
interpreted as described in RFC2119. For readability, these words do
|
|
not appear in all uppercase letters in this specification. <a href="#refsRFC2119">[RFC2119]</a><div class="impl">
|
|
|
|
<p>Requirements phrased in the imperative as part of algorithms
|
|
(such as "strip any leading space characters" or "return false and
|
|
abort these steps") are to be interpreted with the meaning of the
|
|
key word ("must", "should", "may", etc) used in introducing the
|
|
algorithm.</p>
|
|
|
|
<p>Conformance requirements phrased as algorithms or specific steps
|
|
may be implemented in any manner, so long as the end result is
|
|
equivalent. (In particular, the algorithms defined in this
|
|
specification are intended to be easy to follow, and not intended to
|
|
be performant.)</p>
|
|
|
|
</div><h3 id="htmlpropertiescollection-0"><span class="secno">1.2 </span>HTMLPropertiesCollection</h3><p>The <code><a href="#htmlpropertiescollection">HTMLPropertiesCollection</a></code> interface represents a
|
|
<a href="#collections" title="collections">collection</a> of elements that add
|
|
name-value pairs to a particular <a href="#concept-item" title="concept-item">item</a> in the <span>microdata</span>
|
|
model.<pre class="idl">interface <dfn id="htmlpropertiescollection">HTMLPropertiesCollection</dfn> : <span>HTMLCollection</span> {
|
|
// inherits <span title="dom-HTMLCollection-length">length</span> and <span title="dom-HTMLCollection-item">item</span>()
|
|
caller getter <a href="#propertynodelist">PropertyNodeList</a> <a href="#dom-htmlpropertiescollection-nameditem" title="dom-HTMLPropertiesCollection-namedItem">namedItem</a>(in DOMString name); // overrides inherited namedItem()
|
|
readonly attribute <span>DOMStringList</span> <a href="#dom-htmlpropertiescollection-names" title="dom-HTMLPropertiesCollection-names">names</a>;
|
|
};
|
|
|
|
typedef sequence<any> <dfn id="propertyvaluearray">PropertyValueArray</dfn>;
|
|
|
|
interface <dfn id="propertynodelist">PropertyNodeList</dfn> : <span>NodeList</span> {
|
|
<a href="#propertyvaluearray">PropertyValueArray</a> <a href="#dom-propertynodelist-getvalues" title="dom-PropertyNodeList-getValues">getValues</a>();
|
|
};</pre><dl class="domintro"><dt><var title="">collection</var> . <code title="dom-HTMLCollection-length">length</code></dt>
|
|
<dd>
|
|
<p>Returns the number of elements in the collection.</p>
|
|
</dd>
|
|
|
|
<dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLCollection-item">item</code>(<var title="">index</var>)</dt>
|
|
<dt><var title="">collection</var>[<var title="">index</var>]</dt>
|
|
<dt><var title="">collection</var>(<var title="">index</var>)</dt>
|
|
<dd>
|
|
<p>Returns the element with index <var title="">index</var> from the collection. The items are sorted in <a href="#tree-order">tree order</a>.</p>
|
|
<p>Returns null if <var title="">index</var> is out of range.</p>
|
|
</dd>
|
|
|
|
<dt><var title="">propertyNodeList</var> = <var title="">collection</var> . <code title="dom-HTMLPropertiesCollection-namedItem"><a href="#dom-htmlpropertiescollection-nameditem">namedItem</a></code>(<var title="">name</var>)</dt>
|
|
<dt><var title="">collection</var>[<var title="">name</var>]</dt>
|
|
<dt><var title="">collection</var>(<var title="">name</var>)</dt>
|
|
<dd>
|
|
<p>Returns a <code><a href="#propertynodelist">PropertyNodeList</a></code> object containing any elements that add a property named <var title="">name</var>.</p>
|
|
</dd>
|
|
|
|
<dt><var title="">collection</var> . <code title="dom-HTMLPropertiesCollection-names"><a href="#dom-htmlpropertiescollection-names">names</a></code></dt>
|
|
<dd>
|
|
<p>Returns a <code>DOMStringList</code> with the <a href="#property-names">property names</a> of the elements in the collection.</p>
|
|
</dd>
|
|
|
|
<dt><var title="">propertyNodeList</var> . <code title="dom-PropertyNodeList-getVlues">getValues</code>()</dt>
|
|
<dd>
|
|
<p>Returns an array of the various values that the relevant elements have.</p>
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>The object's <span>supported property indices</span> are as
|
|
defined for <code>HTMLCollection</code> objects.</p>
|
|
|
|
<p>The <span>supported property names</span> consist of the
|
|
<a href="#property-names">property names</a> of all the elements <span>represented by
|
|
the collection</span>.</p>
|
|
|
|
<p>The <dfn id="dom-htmlpropertiescollection-names" title="dom-HTMLPropertiesCollection-names"><code>names</code></dfn>
|
|
attribute must return a <span>live</span> <code>DOMStringList</code>
|
|
object giving the <a href="#property-names">property names</a> of all the elements
|
|
<span>represented by the collection</span>, listed in <a href="#tree-order">tree
|
|
order</a>, but with duplicates removed, leaving only the first
|
|
occurrence of each name. The same object must be returned each
|
|
time.</p>
|
|
|
|
<p>The <dfn id="dom-htmlpropertiescollection-nameditem" title="dom-HTMLPropertiesCollection-namedItem"><code>namedItem(<var title="">name</var>)</code></dfn> method must return a
|
|
<code><a href="#propertynodelist">PropertyNodeList</a></code> object representing a
|
|
<span>live</span> view of the <code><a href="#htmlpropertiescollection">HTMLPropertiesCollection</a></code>
|
|
object, further filtered so that the only nodes in the
|
|
<code><a href="#propertynodelist">PropertyNodeList</a></code> object are those that have a <a href="#property-names" title="property names">property name</a> equal to <var title="">name</var>. The nodes in the <code><a href="#propertynodelist">PropertyNodeList</a></code>
|
|
object must be sorted in <a href="#tree-order">tree order</a>, and the same
|
|
object must be returned each time a particular <var title="">name</var> is queried.</p>
|
|
|
|
<hr><p>Members of the <code><a href="#propertynodelist">PropertyNodeList</a></code> interface inherited
|
|
from the <code>NodeList</code> interface must behave as they would
|
|
on a <code>NodeList</code> object.</p>
|
|
|
|
<p>The <dfn id="dom-propertynodelist-getvalues" title="dom-PropertyNodeList-getValues"><code>getValues</code></dfn>
|
|
method the <code><a href="#propertynodelist">PropertyNodeList</a></code> object must return a newly
|
|
constructed array whose values are the values obtained from the
|
|
<code title="dom-itemValue"><a href="#dom-itemvalue">itemValue</a></code> DOM property of each of
|
|
the elements represented by the object, in <a href="#tree-order">tree
|
|
order</a>.</p>
|
|
|
|
</div><h2 id="introduction"><span class="secno">2 </span>Introduction</h2><h3 id="overview"><span class="secno">2.1 </span>Overview</h3><p><i>This section is non-normative.</i><p>Sometimes, it is desirable to annotate content with specific
|
|
machine-readable labels, e.g. to allow generic scripts to provide
|
|
services that are customised to the page, or to enable content from
|
|
a variety of cooperating authors to be processed by a single script
|
|
in a consistent manner.<p>For this purpose, authors can use the microdata features
|
|
described in this section. Microdata allows nested groups of
|
|
name-value pairs to be added to documents, in parallel with the
|
|
existing content.<h3 id="the-basic-syntax"><span class="secno">2.2 </span>The basic syntax</h3><p><i>This section is non-normative.</i><p>At a high level, microdata consists of a group of name-value
|
|
pairs. The groups are called <a href="#concept-item" title="concept-item">items</a>, and each name-value pair is a
|
|
property. Items and properties are represented by regular
|
|
elements.<p>To create an item, the <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute is used.<p>To add a property to an item, the <code title="attr-itemprop"><a href="#names:-the-itemprop-attribute">itemprop</a></code> attribute is used on one of
|
|
the <a href="#concept-item" title="concept-item">item's</a> descendants.<div class="example">
|
|
|
|
<p>Here there are two items, each of which has the property "name":</p>
|
|
|
|
<pre><div itemscope>
|
|
<p>My name is <span itemprop="name">Elizabeth</span>.</p>
|
|
</div>
|
|
|
|
<div itemscope>
|
|
<p>My name is <span itemprop="name">Daniel</span>.</p>
|
|
</div></pre>
|
|
|
|
</div><p>Properties generally have values that are strings.<div class="example">
|
|
|
|
<p>Here the item has three properties:</p>
|
|
|
|
<pre><div itemscope>
|
|
<p>My name is <span itemprop="name">Neil</span>.</p>
|
|
<p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
|
|
<p>I am <span itemprop="nationality">British</span>.</p>
|
|
</div></pre>
|
|
|
|
</div><p>Properties can also have values that are <a href="#url" title="URL">URLs</a>. This is achieved using the <code>a</code>
|
|
element and its <code title="attr-hyperlink-href">href</code>
|
|
attribute, the <code>img</code> element and its <code title="attr-img-src">src</code> attribute, or other elements that
|
|
link to or embed external resources.<div class="example">
|
|
|
|
<p>In this example, the item has one property, "image", whose value
|
|
is a URL:</p>
|
|
|
|
<pre><div itemscope>
|
|
<img itemprop="image" src="google-logo.png" alt="Google">
|
|
</div></pre>
|
|
|
|
</div><p>Properties can also have values that are dates, times, or dates
|
|
and times. This is achieved using the <code>time</code> element and
|
|
its <code title="attr-time-datetime">datetime</code> attribute.<div class="example">
|
|
|
|
<p>In this example, the item has one property,
|
|
"birthday", whose value is a date:</p>
|
|
|
|
<pre><div itemscope>
|
|
I was born on <time itemprop="birthday" datetime="2009-05-10">May 10th 2009</time>.
|
|
</div></pre>
|
|
|
|
</div><p>Properties can also themselves be groups of name-value pairs, by
|
|
putting the <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute
|
|
on the element that declares the property.<p>Items that are not part of others are called <a href="#top-level-microdata-items">top-level
|
|
microdata items</a>.<div class="example">
|
|
|
|
<p>In this example, the outer item represents a person, and the
|
|
inner one represents a band:</p>
|
|
|
|
<pre><div itemscope>
|
|
<p>Name: <span itemprop="name">Amanda</span></p>
|
|
<p>Band: <span itemprop="band" itemscope> <span itemprop="name">Jazz Band</span> (<span itemprop="size">12</span> players)</span></p>
|
|
</div></pre>
|
|
|
|
<p>The outer item here has two properties, "name" and
|
|
"band". The "name" is "Amanda", and the
|
|
"band" is an item in its own right, with two
|
|
properties, "name" and "size". The
|
|
"name" of the band is "Jazz Band", and the
|
|
"size" is "12".</p>
|
|
|
|
<p>The outer item in this example is a top-level microdata
|
|
item.</p>
|
|
|
|
</div><p>Properties that are not descendants of the element with the <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute can be associated
|
|
with the <a href="#concept-item" title="concept-item">item</a> using the <code title="attr-itemref"><a href="#attr-itemref">itemref</a></code> attribute. This attribute takes
|
|
a list of IDs of elements to crawl in addition to crawling the
|
|
children of the element with the <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute.<div class="example">
|
|
|
|
<p>This example is the same as the previous one, but all the
|
|
properties are separated from their <a href="#concept-item" title="concept-item">items</a>:</p>
|
|
|
|
<pre><div itemscope id="amanda" itemref="a b"></div>
|
|
<p id="a">Name: <span itemprop="name">Amanda</span></p>
|
|
<div id="b" itemprop="band" itemscope itemref="c"></div>
|
|
<div id="c">
|
|
<p>Band: <span itemprop="name">Jazz Band</span></p>
|
|
<p>Size: <span itemprop="size">12</span> players</p>
|
|
</div></pre>
|
|
|
|
<p>This gives the same result as the previous example. The first
|
|
item has two properties, "name", set to "Amanda", and "band", set
|
|
to another item. That second item has two further properties,
|
|
"name", set to "Jazz Band", and "size", set to "12".</p>
|
|
|
|
</div><p>An <a href="#concept-item" title="concept-item">item</a> can have multiple
|
|
properties with the same name and different values.<div class="example">
|
|
|
|
<p>This example describes an ice cream, with two flavors:</p>
|
|
|
|
<pre><div itemscope>
|
|
<p>Flavors in my favorite ice cream:</p>
|
|
<ul>
|
|
<li itemprop="flavor">Lemon sorbet</li>
|
|
<li itemprop="flavor">Apricot sorbet</li>
|
|
</ul>
|
|
</div></pre>
|
|
|
|
<p>This thus results in an item with two properties, both
|
|
"flavor", having the values "Lemon sorbet" and "Apricot
|
|
sorbet".</p>
|
|
|
|
</div><p>An element introducing a property can also introduce multiple
|
|
properties at once, to avoid duplication when some of the properties
|
|
have the same value.<div class="example">
|
|
|
|
<p>Here we see an item with two properties,
|
|
"favorite-color" and "favorite-fruit", both
|
|
set to the value "orange":</p>
|
|
|
|
<pre><div itemscope>
|
|
<span itemprop="favorite-color favorite-fruit">orange</span>
|
|
</div></pre>
|
|
|
|
</div><p>It's important to note that there is no relationship between the
|
|
microdata and the content of the document where the microdata is
|
|
marked up.<div class="example">
|
|
|
|
<p>There is no semantic difference, for instance, between the
|
|
following two examples:</p>
|
|
|
|
<pre><figure>
|
|
<img src="castle.jpeg">
|
|
<figcaption><span itemscope><span itemprop="name">The Castle</span></span> (1986)</figcaption>
|
|
</figure></pre>
|
|
|
|
<pre><span itemscope><meta itemprop="name" content="The Castle"></span>
|
|
<figure>
|
|
<img src="castle.jpeg">
|
|
<figcaption>The Castle (1986)</figcaption>
|
|
</figure></pre>
|
|
|
|
<p>Both have a figure with a caption, and both, completely
|
|
unrelated to the figure, have an item with a name-value pair with
|
|
the name "name" and the value "The Castle". The only
|
|
difference is that if the user drags the caption out of the
|
|
document, in the former case, the item will be included in the
|
|
drag-and-drop data. In neither case is the image in any way
|
|
associated with the item.</p>
|
|
|
|
</div><h3 id="typed-items"><span class="secno">2.3 </span>Typed items</h3><p><i>This section is non-normative.</i><p>The examples in the previous section show how information could
|
|
be marked up on a page that doesn't expect its microdata to be
|
|
re-used. Microdata is most useful, though, when it is used in
|
|
contexts where other authors and readers are able to cooperate to
|
|
make new uses of the markup.<p>For this purpose, it is necessary to give each <a href="#concept-item" title="concept-item">item</a> a type, such as
|
|
"http://example.com/person", or "http://example.org/cat", or
|
|
"http://band.example.net/". Types are identified as <a href="#url" title="URL">URLs</a>.<p>The type for an <a href="#concept-item" title="concept-item">item</a> is given
|
|
as the value of an <code title="attr-itemtype"><a href="#attr-itemtype">itemtype</a></code>
|
|
attribute on the same element as the <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute.<div class="example">
|
|
|
|
<p>Here, the item's type is "http://example.org/animals#cat":</p>
|
|
|
|
<pre><section itemscope itemtype="http://example.org/animals#cat">
|
|
<h1 itemprop="name">Hedral</h1>
|
|
<p itemprop="desc">Hedral is a male american domestic
|
|
shorthair, with a fluffy black fur with white paws and belly.</p>
|
|
<img itemprop="img" src="hedral.jpeg" alt="" title="Hedral, age 18 months">
|
|
</section></pre>
|
|
|
|
<p>In this example the "http://example.org/animals#cat" item has three
|
|
properties, a "name" ("Hedral"), a "desc" ("Hedral is..."), and an
|
|
"img" ("hedral.jpeg").</p>
|
|
|
|
</div><p>An item can only have one type. The type gives the context for
|
|
the properties, thus defining a vocabulary: a property named "class"
|
|
given for an item with the type "http://census.example/person" might
|
|
refer to the economic class of an individual, while a property named
|
|
"class" given for an item with the type "http://example.com/school/teacher"
|
|
might refer to the classroom a teacher has been assigned.<h3 id="global-identifiers-for-items"><span class="secno">2.4 </span>Global identifiers for items</h3><p><i>This section is non-normative.</i><p>Sometimes, an <a href="#concept-item" title="concept-item">item</a> gives
|
|
information about a topic that has a global identifier. For example,
|
|
books can be identified by their ISBN number.<p>Vocabularies (as identified by the <code title="attr-itemtype"><a href="#attr-itemtype">itemtype</a></code> attribute) can be designed
|
|
such that <a href="#concept-item" title="concept-item">items</a> get associated
|
|
with their global identifier in an unambiguous way by expressing the
|
|
global identifiers as <a href="#url" title="URL">URLs</a> given in an
|
|
<code title="attr-itemid"><a href="#attr-itemid">itemid</a></code> attribute.<p>The exact meaning of the <a href="#url" title="URL">URLs</a> given in
|
|
<code title="attr-itemid"><a href="#attr-itemid">itemid</a></code> attributes depends on the
|
|
vocabulary used.<div class="example">
|
|
|
|
<p>Here, an item is talking about a particular book:</p>
|
|
|
|
<pre><dl itemscope
|
|
itemtype="http://vocab.example.net/book"
|
|
<strong>itemid="urn:isbn:0-330-34032-8"</strong>>
|
|
<dt>Title
|
|
<dd itemprop="title">The Reality Dysfunction
|
|
<dt>Author
|
|
<dd itemprop="author">Peter F. Hamilton
|
|
<dt>Publication date
|
|
<dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time>
|
|
</dl></pre>
|
|
|
|
<p>The "<code title="">http://vocab.example.net/book</code>"
|
|
vocabulary in this example would define that the <code title="attr-itemid"><a href="#attr-itemid">itemid</a></code> attribute takes a <code title="">urn:</code> <a href="#url">URL</a> pointing to the ISBN of the
|
|
book.</p>
|
|
|
|
</div><h3 id="selecting-names-when-defining-vocabularies"><span class="secno">2.5 </span>Selecting names when defining vocabularies</h3><p><i>This section is non-normative.</i><p>Using microdata means using a vocabulary. For some purposes, an
|
|
ad-hoc vocabulary is adequate. For others, a vocabulary will need to
|
|
be designed. Where possible, authors are encouraged to re-use
|
|
existing vocabularies, as this makes content re-use easier.<p>When designing new vocabularies, identifiers can be created
|
|
either using <a href="#url" title="URL">URLs</a>, or, for properties, as
|
|
plain words (with no dots or colons). For URLs, conflicts with other
|
|
vocabularies can be avoided by only using identifiers that
|
|
correspond to pages that the author has control over.<div class="example">
|
|
|
|
<p>For instance, if Jon and Adam both write content at <code title="">example.com</code>, at <code title="">http://example.com/~jon/...</code> and <code title="">http://example.com/~adam/...</code> respectively, then
|
|
they could select identifiers of the form
|
|
"http://example.com/~jon/name" and "http://example.com/~adam/name"
|
|
respectively.</p>
|
|
|
|
</div><p>Properties whose names are just plain words can only be used
|
|
within the context of the types for which they are intended;
|
|
properties named using URLs can be reused in items of any type. If
|
|
an item has no type, and is not part of another item, then if its
|
|
properties have names that are just plain words, they are not
|
|
intended to be globally unique, and are instead only intended for
|
|
limited use. Generally speaking, authors are encouraged to use
|
|
either properties with globally unique names (URLs) or ensure that
|
|
their items are typed.<div class="example">
|
|
|
|
<p>Here, an item is an "http://example.org/animals#cat", and most of the
|
|
properties have names that are words defined in the context of that
|
|
type. There are also a few additional properties whose names come
|
|
from other vocabularies.</p>
|
|
|
|
<pre><section itemscope itemtype="http://example.org/animals#cat">
|
|
<h1 itemprop="name http://example.com/fn">Hedral</h1>
|
|
<p itemprop="desc">Hedral is a male american domestic
|
|
shorthair, with a fluffy <span
|
|
itemprop="http://example.com/color">black</span> fur with <span
|
|
itemprop="http://example.com/color">white</span> paws and belly.</p>
|
|
<img itemprop="img" src="hedral.jpeg" alt="" title="Hedral, age 18 months">
|
|
</section></pre>
|
|
|
|
<p>This example has one item with the type "http://example.org/animals#cat"
|
|
and the following properties:</p>
|
|
|
|
<table><thead><tr><td>Property
|
|
<td>Value
|
|
<tbody><tr><td>name
|
|
<td>Hedral
|
|
<tr><td>http://example.com/fn
|
|
<td>Hedral
|
|
<tr><td>desc
|
|
<td>Hedral is a male american domestic shorthair, with a fluffy black fur with white paws and belly.
|
|
<tr><td>http://example.com/color
|
|
<td>black
|
|
<tr><td>http://example.com/color
|
|
<td>white
|
|
<tr><td>img
|
|
<td>.../hedral.jpeg
|
|
</table></div><h3 id="using-the-microdata-dom-api"><span class="secno">2.6 </span>Using the microdata DOM API</h3><p><i>This section is non-normative.</i><p>The microdata becomes even more useful when scripts can use it to
|
|
expose information to the user, for example offering it in a form
|
|
that can be used by other applications.<p>The <code title="dom-document-getItems"><a href="#dom-document-getitems">document.getItems(<var title="">typeNames</var>)</a></code> method provides access to the
|
|
<a href="#top-level-microdata-items">top-level microdata items</a>. It returns a
|
|
<code>NodeList</code> containing the items with the specified types,
|
|
or all types if no argument is specified.<p>Each <a href="#concept-item" title="concept-item">item</a> is represented in the
|
|
DOM by the element on which the relevant <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute is found. These
|
|
elements have their <code title="dom-itemScope"><a href="#dom-itemscope">element.itemScope</a></code> IDL attribute set to
|
|
true.<p>The type of <a href="#concept-item" title="concept-item">items</a> can be
|
|
obtained using the <code title="dom-itemType"><a href="#dom-itemtype">element.itemType</a></code> IDL attribute on the
|
|
element with the <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code>
|
|
attribute.<div class="example">
|
|
|
|
<p>This sample shows how the <code title="dom-document-getItems"><a href="#dom-document-getitems">getItems()</a></code> method can be used
|
|
to obtain a list of all the top-level microdata items of one type
|
|
given in the document:</p>
|
|
|
|
<pre>var cats = document.getItems("http://example.com/feline");</pre>
|
|
|
|
</div><p>Once an element representing an <a href="#concept-item" title="concept-item">item</a> has been obtained, its properties
|
|
can be extracted using the <code title="dom-properties"><a href="#dom-properties">properties</a></code> IDL attribute. This
|
|
attribute returns an <code><a href="#htmlpropertiescollection">HTMLPropertiesCollection</a></code>, which can
|
|
be enumerated to go through each element that adds one or more
|
|
properties to the item. It can also be indexed by name, which will
|
|
return an object with a list of the elements that add properties
|
|
with that name.<p>Each element that adds a property also has a <code title="dom-itemValue"><a href="#dom-itemvalue">itemValue</a></code> IDL attribute that returns
|
|
its value.<div class="example">
|
|
|
|
<p>This sample gets the first item of type "http://example.net/user" and
|
|
then pops up an alert using the "name" property from
|
|
that item.</p>
|
|
|
|
<pre>var user = document.getItems('http://example.net/user')[0];
|
|
alert('Hello ' + user.properties['name'][0].content + '!');</pre>
|
|
|
|
</div><p>The <code><a href="#htmlpropertiescollection">HTMLPropertiesCollection</a></code> object, when indexed by
|
|
name in this way, actually returns a <code><a href="#propertynodelist">PropertyNodeList</a></code>
|
|
object with all the matching properties. The
|
|
<code><a href="#propertynodelist">PropertyNodeList</a></code> object can be used to obtain all the
|
|
values at once using <em>its</em> <code title="dom-PropertyNodeList-getValues"><a href="#dom-propertynodelist-getvalues">getValues</a></code> method,
|
|
which returns an array of all the values.<div class="example">
|
|
|
|
<p>In an earlier example, a "http://example.org/animals#cat" item had two
|
|
"http://example.com/color" values. This script looks up the first such
|
|
item and then lists all its values.</p>
|
|
|
|
<pre>var cat = document.getItems('http://example.org/animals#cat')[0];
|
|
var colors = cat.properties['http://example.com/color'].getValues();
|
|
var result;
|
|
if (colors.length == 0) {
|
|
result = 'Color unknown.';
|
|
} else if (colors.length == 1) {
|
|
result = 'Color: ' + colors[0];
|
|
} else {
|
|
result = 'Colors:';
|
|
for (var i = 0; i < colors.length; i += 1)
|
|
result += ' ' + colors[i];
|
|
}</pre>
|
|
|
|
</div><p>It's also possible to get a list of all the <a href="#property-names">property
|
|
names</a> using the object's <code title="dom-HTMLPropertiesCollection-names"><a href="#dom-htmlpropertiescollection-names">names</a></code> IDL
|
|
attribute.<div class="example">
|
|
|
|
<p>This example creates a big list with a nested list for each item
|
|
on the page, each with of all the property names used in that
|
|
item.</p>
|
|
|
|
<pre>var outer = document.createElement('ul');
|
|
var items = document.getItems();
|
|
for (var item = 0; item < items.length; item += 1) {
|
|
var itemLi = document.createElement('li');
|
|
var inner = document.createElement('ul');
|
|
for (var name = 0; name < items[item].properties.names.length; name += 1) {
|
|
var propLi = document.createElement('li');
|
|
propLi.appendChild(document.createTextNode(items[item].properties.names[name]));
|
|
inner.appendChild(propLi);
|
|
}
|
|
itemLi.appendChild(inner);
|
|
outer.appendChild(itemLi);
|
|
}
|
|
document.body.appendChild(outer);</pre>
|
|
|
|
<p>If faced with the following from an earlier example:</p>
|
|
|
|
<pre><section itemscope itemtype="http://example.org/animals#cat">
|
|
<h1 itemprop="name http://example.com/fn">Hedral</h1>
|
|
<p itemprop="desc">Hedral is a male american domestic
|
|
shorthair, with a fluffy <span
|
|
itemprop="http://example.com/color">black</span> fur with <span
|
|
itemprop="http://example.com/color">white</span> paws and belly.</p>
|
|
<img itemprop="img" src="hedral.jpeg" alt="" title="Hedral, age 18 months">
|
|
</section></pre>
|
|
|
|
<p>...it would result in the following output:</p>
|
|
|
|
<ul><li>
|
|
<ul><li>name</li>
|
|
<li>http://example.com/fn</li>
|
|
<li>desc</li>
|
|
<li>http://example.com/color</li>
|
|
<li>img</li>
|
|
</ul></li>
|
|
</ul><p>(The duplicate occurrence of "http://example.com/color" is not included
|
|
in the list.)</p>
|
|
|
|
</div><h2 id="encoding-microdata"><span class="secno">3 </span>Encoding microdata</h2><p>The following attributes are added as <a href="#global-attributes">global
|
|
attributes</a> to <a href="#html-elements">HTML elements</a>:<ul class="brief"><li><code title="attr-itemid"><a href="#attr-itemid">itemid</a></code></li>
|
|
<li><code title="attr-itemprop"><a href="#names:-the-itemprop-attribute">itemprop</a></code></li>
|
|
<li><code title="attr-itemref"><a href="#attr-itemref">itemref</a></code></li>
|
|
<li><code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code></li>
|
|
<li><code title="attr-itemtype"><a href="#attr-itemtype">itemtype</a></code></li>
|
|
</ul><h3 id="the-microdata-model"><span class="secno">3.1 </span>The microdata model</h3><p>The microdata model consists of groups of name-value pairs known
|
|
as <a href="#concept-item" title="concept-item">items</a>.<p>Each group is known as an <a href="#concept-item" title="concept-item">item</a>. Each <a href="#concept-item" title="concept-item">item</a> can have an <a href="#item-type">item type</a>,
|
|
a <a href="#global-identifier">global identifier</a> (if the <a href="#item-type">item type</a>
|
|
<a href="#support-global-identifiers-for-items" title="support global identifiers for items">supports global
|
|
identifiers for its items</a>), and a list of name-value
|
|
pairs. Each name in the name-value pair is known as a <a href="#the-properties-of-an-item" title="the properties of an item">property</a>, and each <a href="#the-properties-of-an-item" title="the properties of an item">property</a> has one or more
|
|
<a href="#concept-property-value" title="concept-property-value">values</a>. Each <a href="#concept-property-value" title="concept-property-value">value</a> is either a string or itself a group of
|
|
name-value pairs (an <a href="#concept-item" title="concept-item">item</a>).<p>An <a href="#concept-item" title="concept-item">item</a> is said to be a
|
|
<dfn id="typed-item">typed item</dfn> when either it has an <a href="#item-type">item type</a>,
|
|
or it is the <a href="#concept-property-value" title="concept-property-value">value</a> of a <a href="#the-properties-of-an-item" title="the properties of an
|
|
item">property</a> of a <a href="#typed-item">typed item</a>. The
|
|
<dfn id="relevant-type">relevant type</dfn> for a <a href="#typed-item">typed item</a> is the <a href="#concept-item" title="concept-item">item</a>'s <a href="#item-type">item type</a>, if it has
|
|
one, or else is the <a href="#relevant-type">relevant type</a> of the <a href="#concept-item" title="concept-item">item</a> for which it is a <a href="#the-properties-of-an-item" title="the
|
|
properties of an item">property</a>'s <a href="#concept-property-value" title="concept-property-value">value</a>.<h3 id="items"><span class="secno">3.2 </span>Items</h3><p>Every <a href="#html-elements" title="HTML elements">HTML element</a> may have an
|
|
<dfn id="attr-itemscope" title="attr-itemscope"><code>itemscope</code></dfn> attribute
|
|
specified. The <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code>
|
|
attribute is a <a href="#boolean-attribute">boolean attribute</a>.<p>An element with the <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code>
|
|
attribute specified creates a new <dfn id="concept-item" title="concept-item">item</dfn>, a group of name-value pairs.<hr><p>Elements with an <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code>
|
|
attribute may have an <dfn id="attr-itemtype" title="attr-itemtype"><code>itemtype</code></dfn> attribute
|
|
specified, to give the <a href="#item-type">item type</a> of the <a href="#concept-item" title="concept-item">item</a>.<p>The <code title="attr-itemtype"><a href="#attr-itemtype">itemtype</a></code> attribute, if
|
|
specified, must have a value that is a <a href="#valid-url">valid URL</a> that
|
|
is an <a href="#absolute-url">absolute URL</a> for which the string "<code title="">http://www.w3.org/1999/xhtml/microdata#</code>" is not a
|
|
<a href="#prefix-match">prefix match</a>.</p><p>The <dfn id="item-type">item type</dfn> of an <a href="#concept-item" title="concept-item">item</a> is the value of its element's <code title="attr-itemtype"><a href="#attr-itemtype">itemtype</a></code> attribute, if it has one and
|
|
its value is not the empty string. If the <code title="attr-itemtype"><a href="#attr-itemtype">itemtype</a></code> attribute is missing or its
|
|
value is the empty string, the <a href="#concept-item" title="concept-item">item</a> is said to have no <a href="#item-type">item
|
|
type</a>.<p>The <a href="#item-type">item type</a> must be a type defined in an <span title="other applicable specifications">applicable
|
|
specification</span>.<div class="impl">
|
|
|
|
<p>Except if otherwise specified by that specification, the
|
|
<a href="#url">URL</a> given as the <a href="#item-type">item type</a> should not be
|
|
automatically dereferenced.</p>
|
|
|
|
<p class="note">A specification could define that its <a href="#item-type">item
|
|
type</a> can be derefenced to provide the user with help
|
|
information, for example. In fact, vocabulary authors are
|
|
encouraged to provide useful information at the given
|
|
<a href="#url">URL</a>.</p>
|
|
|
|
<p><a href="#item-type" title="item type">Item types</a> are opaque
|
|
identifiers, and user agents must not dereference unknown <a href="#item-type" title="item type">item types</a>, or otherwise deconstruct them,
|
|
in order to determine how to process <a href="#concept-item" title="concept-item">items</a> that use them.</p>
|
|
|
|
</div><p>The <code title="attr-itemtype"><a href="#attr-itemtype">itemtype</a></code> attribute must
|
|
not be specified on elements that do not have an <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute specified.<hr><p>Elements with an <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code>
|
|
attribute and an <code title="attr-itemtype"><a href="#attr-itemtype">itemtype</a></code>
|
|
attribute that references a vocabulary that is defined to
|
|
<dfn id="support-global-identifiers-for-items">support global identifiers for items</dfn> may also have an
|
|
<dfn id="attr-itemid" title="attr-itemid"><code>itemid</code></dfn> attribute
|
|
specified, to give a global identifier for the <a href="#concept-item" title="concept-item">item</a>, so that it can be related to other
|
|
<a href="#concept-item" title="concept-item">items</a> on pages elsewhere on the
|
|
Web.<p>The <code title="attr-itemid"><a href="#attr-itemid">itemid</a></code> attribute, if
|
|
specified, must have a value that is a <span>valid URL potentially
|
|
surrounded by spaces</span>.<p>The <dfn id="global-identifier">global identifier</dfn> of an <a href="#concept-item" title="concept-item">item</a> is the value of its element's <code title="attr-itemid"><a href="#attr-itemid">itemid</a></code> attribute, if it has one, <a href="#resolve-a-url" title="resolve a url">resolved</a> relative to the element on
|
|
which the attribute is specified. If the <code title="attr-itemid"><a href="#attr-itemid">itemid</a></code> attribute is missing or if
|
|
resolving it fails, it is said to have no <a href="#global-identifier">global
|
|
identifier</a>.<p>The <code title="attr-itemid"><a href="#attr-itemid">itemid</a></code> attribute must not be
|
|
specified on elements that do not have both an <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute and an <code title="attr-itemtype"><a href="#attr-itemtype">itemtype</a></code> attribute specified, and must
|
|
not be specified on elements with an <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute whose <code title="attr-itemtype"><a href="#attr-itemtype">itemtype</a></code> attribute specifies a
|
|
vocabulary that does not <a href="#support-global-identifiers-for-items">support global identifiers for
|
|
items</a>, as defined by that vocabulary's specification.<hr><p>Elements with an <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code>
|
|
attribute may have an <dfn id="attr-itemref" title="attr-itemref"><code>itemref</code></dfn> attribute specified,
|
|
to give a list of additional elements to crawl to find the
|
|
name-value pairs of the <a href="#concept-item" title="concept-item">item</a>.<p>The <code title="attr-itemref"><a href="#attr-itemref">itemref</a></code> attribute, if
|
|
specified, must have a value that is an <a href="#unordered-set-of-unique-space-separated-tokens">unordered set of
|
|
unique space-separated tokens</a> that are
|
|
<span>case-sensitive</span>, consisting of <a href="#concept-id" title="concept-ID">IDs</a> of elements in the same <a href="#home-subtree">home
|
|
subtree</a>.<p>The <code title="attr-itemref"><a href="#attr-itemref">itemref</a></code> attribute must not
|
|
be specified on elements that do not have an <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute specified.<h3 id="names:-the-itemprop-attribute"><span class="secno">3.3 </span>Names: the <dfn title="attr-itemprop"><code>itemprop</code></dfn> attribute</h3><p>Every <a href="#html-elements" title="HTML elements">HTML element</a> may have an
|
|
<code title="attr-itemprop"><a href="#names:-the-itemprop-attribute">itemprop</a></code> attribute specified, if
|
|
doing so <a href="#the-properties-of-an-item" title="the properties of an item">adds a
|
|
property</a> to one or more <a href="#concept-item" title="concept-item">items</a> (as defined below).<p>The <code title="attr-itemprop"><a href="#names:-the-itemprop-attribute">itemprop</a></code> attribute, if
|
|
specified, must have a value that is an <a href="#unordered-set-of-unique-space-separated-tokens">unordered set of
|
|
unique space-separated tokens</a> that are
|
|
<span>case-sensitive</span>, representing the names of the
|
|
name-value pairs that it adds. The attribute's value must have at
|
|
least one token.<p>Each token must be either:<ul><li>A <a href="#valid-url">valid URL</a> that is an <a href="#absolute-url">absolute URL</a>
|
|
for which the string "<code title="">http://www.w3.org/1999/xhtml/microdata#</code>" is not a
|
|
<a href="#prefix-match">prefix match</a>, or</li>
|
|
|
|
<li>If the item is a <a href="#typed-item">typed item</a>: a <dfn id="defined-property-name">defined
|
|
property name</dfn> allowed in this situation according to the
|
|
specification that defines the <a href="#relevant-type">relevant type</a> for the
|
|
item, or</li>
|
|
|
|
<li>If the item is not a <a href="#typed-item">typed item</a>: a string that
|
|
contains no U+002E FULL STOP characters (.) and no U+003A COLON
|
|
characters (:).</li>
|
|
|
|
</ul><p>Specifications that introduce <a href="#defined-property-name" title="defined property
|
|
name">defined property names</a> that are not <a href="#absolute-url" title="absolute URL">absolute URLs</a> must ensure all such
|
|
property names contain no U+002E FULL STOP characters (.), no U+003A
|
|
COLON characters (:), and no <span title="space character">space
|
|
characters</span>.<p>When an element with an <code title="concept-itemprop">itemprop</code> attribute <a href="#the-properties-of-an-item" title="the
|
|
properties of an item">adds a property</a> to multiple <a href="#concept-item" title="concept-item">items</a>, the requirement above regarding
|
|
the tokens applies for each <a href="#concept-item" title="concept-item">item</a>
|
|
individually.</p><p>The <dfn id="property-names">property names</dfn> of an element are the tokens that
|
|
the element's <code title="attr-itemprop"><a href="#names:-the-itemprop-attribute">itemprop</a></code> attribute
|
|
is found to contain when its value is <a href="#split-a-string-on-spaces" title="split a string on
|
|
spaces">split on spaces</a>, with the order preserved but with
|
|
duplicates removed (leaving only the first occurrence of each
|
|
name).<p>Within an <a href="#concept-item" title="concept-item">item</a>, the properties
|
|
are unordered with respect to each other, except for properties with
|
|
the same name, which are ordered in the order they are given by the
|
|
algorithm that defines <a href="#the-properties-of-an-item">the properties of an item</a>.<div class="example">
|
|
|
|
<p>In the following example, the "a" property has the values "1"
|
|
and "2", <em>in that order</em>, but whether the "a" property comes
|
|
before the "b" property or not is not important:</p>
|
|
|
|
<pre><div itemscope>
|
|
<p itemprop="a">1</p>
|
|
<p itemprop="a">2</p>
|
|
<p itemprop="b">test</p>
|
|
</div></pre>
|
|
|
|
<p>Thus, the following is equivalent:</p>
|
|
|
|
<pre><div itemscope>
|
|
<p itemprop="b">test</p>
|
|
<p itemprop="a">1</p>
|
|
<p itemprop="a">2</p>
|
|
</div></pre>
|
|
|
|
<p>As is the following:</p>
|
|
|
|
<pre><div itemscope>
|
|
<p itemprop="a">1</p>
|
|
<p itemprop="b">test</p>
|
|
<p itemprop="a">2</p>
|
|
</div></pre>
|
|
|
|
<p>And the following:</p>
|
|
|
|
<pre><div itemscope itemref="x">
|
|
<p itemprop="b">test</p>
|
|
<p itemprop="a">2</p>
|
|
</div>
|
|
<div id="x">
|
|
<p itemprop="a">1</p>
|
|
</div>
|
|
</pre>
|
|
|
|
</div><h3 id="values"><span class="secno">3.4 </span>Values</h3><p>The <dfn id="concept-property-value" title="concept-property-value">property value</dfn> of a
|
|
name-value pair added by an element with an <code title="attr-itemprop"><a href="#names:-the-itemprop-attribute">itemprop</a></code> attribute depends on the
|
|
element, as follows:<dl><dt>If the element also has an <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute</dt>
|
|
|
|
<dd><p>The value is the <a href="#concept-item" title="concept-item">item</a>
|
|
created by the element.</dd>
|
|
|
|
|
|
<dt>If the element is a <code>meta</code> element</dt>
|
|
|
|
<dd><p>The value is the value of the element's <code title="attr-content">content</code> attribute, if any, or the empty
|
|
string if there is no such attribute.</dd>
|
|
|
|
|
|
<dt>If the element is an <code>audio</code>, <code>embed</code>,
|
|
<code>iframe</code>, <code>img</code>, <code>source</code>,
|
|
<code>track</code>, or <code>video</code> element</dt>
|
|
|
|
<dd><p>The value is the <a href="#absolute-url">absolute URL</a> that results from
|
|
<a href="#resolve-a-url" title="resolve a url">resolving</a> the value of the
|
|
element's <code title="">src</code> attribute relative to the
|
|
element at the time the attribute is set, or the empty string if
|
|
there is no such attribute or if <a href="#resolve-a-url" title="resolve a
|
|
url">resolving</a> it results in an error.</dd>
|
|
|
|
|
|
<dt>If the element is an <code>a</code>, <code>area</code>, or
|
|
<code>link</code> element</dt>
|
|
|
|
<dd><p>The value is the <a href="#absolute-url">absolute URL</a> that results from
|
|
<a href="#resolve-a-url" title="resolve a url">resolving</a> the value of the
|
|
element's <code title="">href</code> attribute relative to the
|
|
element at the time the attribute is set, or the empty string if
|
|
there is no such attribute or if <a href="#resolve-a-url" title="resolve a
|
|
url">resolving</a> it results in an error.</dd>
|
|
|
|
|
|
<dt>If the element is an <code>object</code> element</dt>
|
|
|
|
<dd><p>The value is the <a href="#absolute-url">absolute URL</a> that results from
|
|
<a href="#resolve-a-url" title="resolve a url">resolving</a> the value of the
|
|
element's <code title="">data</code> attribute relative to the
|
|
element at the time the attribute is set, or the empty string if
|
|
there is no such attribute or if <a href="#resolve-a-url" title="resolve a
|
|
url">resolving</a> it results in an error.</dd>
|
|
|
|
|
|
<dt>If the element is a <code>time</code> element with a <code title="attr-time-datetime">datetime</code> attribute</dt>
|
|
|
|
<dd><p>The value is the value of the element's <code title="attr-time-datetime">datetime</code> attribute.</dd>
|
|
|
|
|
|
<dt>Otherwise</dt>
|
|
|
|
<dd><p>The value is the element's
|
|
<code>textContent</code>.</dd>
|
|
|
|
</dl><p>The <dfn id="url-property-elements">URL property elements</dfn> are the <code>a</code>,
|
|
<code>area</code>, <code>audio</code>, <code>embed</code>,
|
|
<code>iframe</code>, <code>img</code>, <code>link</code>,
|
|
<code>object</code>, <code>source</code>, <code>track</code>, and
|
|
<code>video</code> elements.<p>If a property's <a href="#concept-property-value" title="concept-property-value">value</a>
|
|
is an <a href="#absolute-url">absolute URL</a>, the property must be specified
|
|
using a <a href="#url-property-elements" title="URL property elements">URL property
|
|
element</a>.<p>If a property's <a href="#concept-property-value" title="concept-property-value">value</a>
|
|
represents a <a href="#concept-date" title="concept-date">date</a>, <a href="#concept-time" title="concept-time">time</a>, or <a href="#concept-datetime" title="concept-datetime">global date and time</a>, the property
|
|
must be specified using the <code title="attr-time-datetime">datetime</code> attribute of a
|
|
<code>time</code> element.<h3 id="associating-names-with-items"><span class="secno">3.5 </span>Associating names with items</h3><p>To find <dfn id="the-properties-of-an-item">the properties of an item</dfn> defined by the
|
|
element <var title="">root</var>, the user agent must try to
|
|
<a href="#crawl-the-properties">crawl the properties</a> of the element <var title="">root</var>, with an empty list as the value of <var title="">memory</var>: if this fails, then <a href="#the-properties-of-an-item" title="the
|
|
properties of an item">the properties of the item</a> defined by
|
|
the element <var title="">root</var> is an empty list; otherwise, it
|
|
is the returned list.<p>To <dfn id="crawl-the-properties">crawl the properties</dfn> of an element <var title="">root</var> with a list <var title="">memory</var>, the user
|
|
agent must run the following steps. These steps either fail or
|
|
return a list with a count of errors. The count of errors is used as
|
|
part of the authoring conformance criteria below.<ol><li><p>If <var title="">root</var> is in <var title="">memory</var>, then the algorithm fails; abort these
|
|
steps.</li>
|
|
|
|
<li><p><a href="#collect-all-the-elements-in-the-item">Collect all the elements in the item</a> <var title="">root</var>; let <var title="">results</var> be the
|
|
resulting list of elements, and <var title="">errors</var> be the
|
|
resulting count of errors.</li>
|
|
|
|
<li><p>Remove any elements from <var title="">results</var> that do
|
|
not have an <code title="attr-itemprop"><a href="#names:-the-itemprop-attribute">itemprop</a></code> attribute
|
|
specified.</li>
|
|
|
|
<li><p>Let <var title="">new memory</var> be a new list consisting
|
|
of the old list <var title="">memory</var> with the addition of
|
|
<var title="">root</var>.</li>
|
|
|
|
<li><p>For each element in <var title="">results</var> that has an
|
|
<code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute specified,
|
|
<a href="#crawl-the-properties">crawl the properties</a> of the element, with <var title="">new memory</var> as the memory. If this fails, then remove
|
|
the element from <var title="">results</var> and increment <var title="">errors</var>. (If it succeeds, the return value is
|
|
discarded.)</li>
|
|
|
|
<li><p>Sort <var title="">results</var> in <a href="#tree-order">tree
|
|
order</a>.</li>
|
|
|
|
<li><p>Return <var title="">results</var> and <var title="">errors</var>.</li>
|
|
|
|
</ol><p>To <dfn id="collect-all-the-elements-in-the-item">collect all the elements in the item</dfn> <var title="">root</var>, the user agent must run these steps. They
|
|
return a list of elements and a count of errors.<ol><li><p>Let <var title="">results</var> and <var title="">pending</var> be empty lists of elements.</li>
|
|
|
|
<li><p>Let <var title="">errors</var> be zero.</li>
|
|
|
|
<li><p>Add all the children elements of <var title="">root</var> to
|
|
<var title="">pending</var>.</li>
|
|
|
|
<li><p>If <var title="">root</var> has an <code title="attr-itemref"><a href="#attr-itemref">itemref</a></code> attribute, <a href="#split-a-string-on-spaces" title="split a
|
|
string on spaces">split the value of that <code title="attr-itemref">itemref</code> attribute on spaces</a>. For
|
|
each resulting token <var title="">ID</var>, if there is an element
|
|
in the <a href="#home-subtree">home subtree</a> of <var title="">root</var> with
|
|
the <a href="#concept-id" title="concept-ID">ID</a> <var title="">ID</var>, then
|
|
add the first such element to <var title="">pending</var>.</li>
|
|
|
|
<li><p><i>Loop</i>: Remove an element from <var title="">pending</var> and let <var title="">current</var> be that
|
|
element.</li>
|
|
|
|
<li><p>If <var title="">current</var> is already in <var title="">results</var>, increment <var title="">errors</var>.</li>
|
|
|
|
<li><p>If <var title="">current</var> is not already in <var title="">results</var> and <var title="">current</var> does not
|
|
have an <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute,
|
|
then: add all the child elements of <var title="">current</var> to
|
|
<var title="">pending</var>.</li>
|
|
|
|
<li><p>If <var title="">current</var> is not already in <var title="">results</var>, then: add <var title="">current</var> to
|
|
<var title="">results</var>.</li>
|
|
|
|
<li><p><i>End of loop</i>: If <var title="">pending</var> is not
|
|
empty, return to the step labeled <i>loop</i>.</li>
|
|
|
|
<li><p>Return <var title="">results</var> and <var title="">errors</var>.</li>
|
|
|
|
</ol><p>An <a href="#concept-item" title="concept-item">item</a> is a <dfn id="top-level-microdata-items" title="top-level microdata items">top-level microdata item</dfn> if
|
|
its element does not have an <code title="attr-itemprop"><a href="#names:-the-itemprop-attribute">itemprop</a></code> attribute.<p>An <a href="#concept-item" title="concept-item">item</a> is a <dfn id="used-microdata-items" title="used
|
|
microdata items">used microdata item</dfn> if it is a <a href="#top-level-microdata-items" title="top-level microdata items">top-level microdata item</a>,
|
|
or if it has an <code title="attr-itemprop"><a href="#names:-the-itemprop-attribute">itemprop</a></code>
|
|
attribute and would be <a href="#the-properties-of-an-item" title="the properties of an item">found
|
|
to be the property</a> of an <a href="#concept-item" title="concept-item">item</a> that is itself a <a href="#used-microdata-items" title="used
|
|
microdata items">used microdata item</a>.<p>All <a href="#concept-item" title="concept-item">items</a> in a document must be
|
|
<a href="#used-microdata-items">used microdata items</a>.<p>A document must not contain any elements that have an <code title="attr-itemprop"><a href="#names:-the-itemprop-attribute">itemprop</a></code> attribute that would not be
|
|
found to be a property of any of the <a href="#concept-item" title="concept-item">items</a> in that document were their <a href="#the-properties-of-an-item" title="the properties of an item">properties</a> all to be
|
|
determined.<p>A document must not contain any <a href="#concept-item" title="concept-item">items</a> for which <a href="#crawl-the-properties" title="crawl the
|
|
properties">crawling the properties</a> of the element, with an
|
|
empty list as the value of <var title="">memory</var>, either fails
|
|
or returns an error count other than zero.<p class="note">The algorithms in this section are especially
|
|
inefficient, in the interests of keeping them easy to
|
|
understand. Implementors are strongly encouraged to refactor and
|
|
optimize them in their user agents.<div class="example">
|
|
|
|
<p>In this example, a single license statement is applied to two
|
|
works, using <code title="attr-itemref"><a href="#attr-itemref">itemref</a></code> from the
|
|
items representing the works:</p>
|
|
|
|
<pre><!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>Photo gallery</title>
|
|
</head>
|
|
<body>
|
|
<h1>My photos</h1>
|
|
<figure itemscope itemtype="http://n.whatwg.org/work" itemref="licenses">
|
|
<img itemprop="work" src="images/house.jpeg" alt="A white house, boarded up, sits in a forest.">
|
|
<figcaption itemprop="title">The house I found.</figcaption>
|
|
</figure>
|
|
<figure itemscope itemtype="http://n.whatwg.org/work" itemref="licenses">
|
|
<img itemprop="work" src="images/mailbox.jpeg" alt="Outside the house is a mailbox. It has a leaflet inside.">
|
|
<figcaption itemprop="title">The mailbox.</figcaption>
|
|
</figure>
|
|
<footer>
|
|
<p id="licenses">All images licensed under the <a itemprop="license"
|
|
href="http://www.opensource.org/licenses/mit-license.php">MIT
|
|
license</a>.</p>
|
|
</footer>
|
|
</body>
|
|
</html></pre>
|
|
|
|
<p>The above results in two items with the type "<code title="">http://n.whatwg.org/work</code>", one with:</p>
|
|
|
|
<dl class="brief"><dt>work
|
|
<dd><code title="">images/house.jpeg</code>
|
|
<dt>title
|
|
<dd>The house I found.
|
|
<dt>license
|
|
<dd><code title="">http://www.opensource.org/licenses/mit-license.php</code>
|
|
</dl><p>...and one with:</p>
|
|
|
|
<dl class="brief"><dt>work
|
|
<dd><code title="">images/mailbox.jpeg</code>
|
|
<dt>title
|
|
<dd>The mailbox.
|
|
<dt>license
|
|
<dd><code title="">http://www.opensource.org/licenses/mit-license.php</code>
|
|
</dl></div><h2 id="microdata-dom-api"><span class="secno">4 </span>Microdata DOM API</h2><pre class="idl">[Supplemental] interface <a href="#htmldocument">HTMLDocument</a> {
|
|
NodeList <a href="#dom-document-getitems" title="dom-document-getItems">getItems</a>(in optional DOMString typeNames); // <span>microdata</span>
|
|
};
|
|
|
|
[Supplemental] interface <a href="#htmlelement">HTMLElement</a> {
|
|
// <span>microdata</span>
|
|
attribute boolean <a href="#dom-itemscope" title="dom-itemScope">itemScope</a>;
|
|
attribute DOMString <a href="#dom-itemtype" title="dom-itemType">itemType</a>;
|
|
attribute DOMString <a href="#dom-itemid" title="dom-itemId">itemId</a>;
|
|
[PutForwards=<span title="dom-DOMSettableTokenList-value">value</span>] readonly attribute <span>DOMSettableTokenList</span> <a href="#dom-itemref" title="dom-itemRef">itemRef</a>;
|
|
[PutForwards=<span title="dom-DOMSettableTokenList-value">value</span>] readonly attribute <span>DOMSettableTokenList</span> <a href="#dom-itemprop" title="dom-itemProp">itemProp</a>;
|
|
readonly attribute <a href="#htmlpropertiescollection">HTMLPropertiesCollection</a> <a href="#dom-properties" title="dom-properties">properties</a>;
|
|
attribute any <a href="#dom-itemvalue" title="dom-itemValue">itemValue</a>;
|
|
};</pre><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-getItems"><a href="#dom-document-getitems">getItems</a></code>( [ <var title="">types</var> ] )</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns a <code>NodeList</code> of the elements in the <code>Document</code> that create <a href="#concept-item" title="concept-item">items</a>, that are not part of other <a href="#concept-item" title="concept-item">items</a>, and that are of one of the types given in the argument, if any are listed.</p>
|
|
|
|
<p>The <var title="">types</var> argument is interpreted as a space-separated list of types.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">element</var> . <code title="dom-properties"><a href="#dom-properties">properties</a></code></dt>
|
|
|
|
<dd>
|
|
|
|
<p>If the element has an <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute, returns an
|
|
<code><a href="#htmlpropertiescollection">HTMLPropertiesCollection</a></code> object with all the element's
|
|
properties. Otherwise, an empty
|
|
<code><a href="#htmlpropertiescollection">HTMLPropertiesCollection</a></code> object.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">element</var> . <code title="dom-itemValue"><a href="#dom-itemvalue">itemValue</a></code> [ = <var title="">value</var> ]</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the element's <a href="#concept-property-value" title="concept-property-value">value</a>.</p>
|
|
|
|
<p>Can be set, to change the element's <a href="#concept-property-value" title="concept-property-value">value</a>. Setting the <a href="#concept-property-value" title="concept-property-value">value</a> when the element has
|
|
no <code title="attr-itemprop"><a href="#names:-the-itemprop-attribute">itemprop</a></code> attribute or when
|
|
the element's value is an <a href="#concept-item" title="concept-item">item</a>
|
|
throws an <code>INVALID_ACCESS_ERR</code> exception.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>The <dfn id="dom-document-getitems" title="dom-document-getItems"><code>document.getItems(<var title="">typeNames</var>)</code></dfn> method takes an optional
|
|
string that contains an <a href="#unordered-set-of-unique-space-separated-tokens">unordered set of unique
|
|
space-separated tokens</a> that are <span>case-sensitive</span>,
|
|
representing types. When called, the method must return a
|
|
<span>live</span> <code>NodeList</code> object containing all the
|
|
elements in the document, in <a href="#tree-order">tree order</a>, that are each
|
|
<a href="#top-level-microdata-items">top-level microdata items</a> with a <a href="#item-type" title="item
|
|
type">type</a> equal to one of the types specified in that
|
|
argument, having obtained the types by <a href="#split-a-string-on-spaces" title="split a string
|
|
on spaces">splitting the string on spaces</a>. If there are no
|
|
tokens specified in the argument, or if the argument is missing,
|
|
then the method must return a <code>NodeList</code> containing all
|
|
the <a href="#top-level-microdata-items">top-level microdata items</a> in the document. When the
|
|
method is invoked on a <code>Document</code> object again with the
|
|
same argument, the user agent may return the same object as the
|
|
object returned by the earlier call. In other cases, a new
|
|
<code>NodeList</code> object must be returned.</p>
|
|
|
|
<p>The <dfn id="dom-itemscope" title="dom-itemScope"><code>itemScope</code></dfn> IDL
|
|
attribute on <a href="#html-elements">HTML elements</a> must <a href="#reflect">reflect</a>
|
|
the <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> content attribute.
|
|
The <dfn id="dom-itemtype" title="dom-itemType"><code>itemType</code></dfn> IDL
|
|
attribute on <a href="#html-elements">HTML elements</a> must <a href="#reflect">reflect</a>
|
|
the <code title="attr-itemtype"><a href="#attr-itemtype">itemtype</a></code> content attribute,
|
|
as if it was a regular string attribute, not a <a href="#url">URL</a>
|
|
string attribute. The <dfn id="dom-itemid" title="dom-itemId"><code>itemId</code></dfn> IDL attribute on
|
|
<a href="#html-elements">HTML elements</a> must <a href="#reflect">reflect</a> the <code title="attr-itemid"><a href="#attr-itemid">itemid</a></code> content attribute. The <dfn id="dom-itemprop" title="dom-itemProp"><code>itemProp</code></dfn> IDL attribute on
|
|
<a href="#html-elements">HTML elements</a> must <a href="#reflect">reflect</a> the <code title="attr-itemprop"><a href="#names:-the-itemprop-attribute">itemprop</a></code> content attribute. The <dfn id="dom-itemref" title="dom-itemRef"><code>itemRef</code></dfn> IDL attribute on
|
|
<a href="#html-elements">HTML elements</a> must <a href="#reflect">reflect</a> the <code title="attr-itemref"><a href="#attr-itemref">itemref</a></code> content attribute.</p>
|
|
|
|
<p>The <dfn id="dom-properties" title="dom-properties"><code>properties</code></dfn> IDL
|
|
attribute on <a href="#html-elements">HTML elements</a> must return an
|
|
<code><a href="#htmlpropertiescollection">HTMLPropertiesCollection</a></code> rooted at the
|
|
<code>Document</code> node, whose filter matches only elements that
|
|
have <a href="#property-names">property names</a> and are <a href="#the-properties-of-an-item" title="the properties
|
|
of an item">the properties of the item</a> created by the element
|
|
on which the attribute was invoked, while that element is an <a href="#concept-item" title="concept-item">item</a>, and matches nothing the rest of
|
|
the time.</p>
|
|
|
|
<p>The <dfn id="dom-itemvalue" title="dom-itemValue"><code>itemValue</code></dfn> IDL
|
|
attribute's behavior depends on the element, as follows:</p>
|
|
|
|
<dl><dt>If the element has no <code title="attr-itemprop"><a href="#names:-the-itemprop-attribute">itemprop</a></code> attribute</dt>
|
|
|
|
<dd><p>The attribute must return null on getting and must throw an
|
|
<code>INVALID_ACCESS_ERR</code> exception on setting.</p>
|
|
|
|
|
|
<dt>If the element has an <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute</dt>
|
|
|
|
<dd><p>The attribute must return the element itself on getting and
|
|
must throw an <code>INVALID_ACCESS_ERR</code> exception on
|
|
setting.</p>
|
|
|
|
|
|
<dt>If the element is a <code>meta</code> element</dt>
|
|
|
|
<dd><p>The attribute must act as it would if it was <a href="#reflect" title="reflect">reflecting</a> the element's <code title="attr-meta-content">content</code> content
|
|
attribute.</dd>
|
|
|
|
|
|
<dt>If the element is an <code>audio</code>, <code>embed</code>,
|
|
<code>iframe</code>, <code>img</code>, <code>source</code>,
|
|
<code>track</code>, or <code>video</code> element</dt>
|
|
|
|
<dd><p>The attribute must act as it would if it was <a href="#reflect" title="reflect">reflecting</a> the element's <code title="">src</code> content attribute.</dd>
|
|
|
|
|
|
<dt>If the element is an <code>a</code>, <code>area</code>, or
|
|
<code>link</code> element</dt>
|
|
|
|
<dd><p>The attribute must act as it would if it was <a href="#reflect" title="reflect">reflecting</a> the element's <code title="">href</code> content attribute.</dd>
|
|
|
|
|
|
<dt>If the element is an <code>object</code> element</dt>
|
|
|
|
<dd><p>The attribute must act as it would if it was <a href="#reflect" title="reflect">reflecting</a> the element's <code title="">data</code> content attribute.</dd>
|
|
|
|
|
|
<dt>If the element is a <code>time</code> element with a <code title="attr-time-datetime">datetime</code> attribute</dt>
|
|
|
|
<dd><p>The attribute must act as it would if it was <a href="#reflect" title="reflect">reflecting</a> the element's <code title="attr-time-datetime">datetime</code> content
|
|
attribute.</dd>
|
|
|
|
|
|
<dt>Otherwise</dt>
|
|
|
|
<dd><p>The attribute must act the same as the element's
|
|
<code>textContent</code> attribute.</dd>
|
|
|
|
</dl><p>When the <code title="dom-itemValue"><a href="#dom-itemvalue">itemValue</a></code> IDL
|
|
attribute is <a href="#reflect" title="reflect">reflecting</a> a content
|
|
attribute or acting like the element's <code>textContent</code>
|
|
attribute, the user agent must, on setting, convert the new value to
|
|
the IDL <code title="">DOMString</code> value before using it
|
|
according to the mappings described above.</p>
|
|
|
|
</div><div class="exmaple">
|
|
|
|
<p>In this example, a script checks to see if a particular element
|
|
<var title="">element</var> is declaring a particular property, and
|
|
if it is, it increments a counter:</p>
|
|
|
|
<pre>if (element.itemProp.contains('color'))
|
|
count += 1;</pre>
|
|
|
|
</div><div class="exmaple">
|
|
|
|
<p>This script iterates over each of the values of an element's
|
|
<code title="attr-itemref"><a href="#attr-itemref">itemref</a></code> attribute, calling a
|
|
function for each referenced element:</p>
|
|
|
|
<pre>for (var index = 0; index < element.itemRef.length; index += 1)
|
|
process(document.getElementById(element.itemRef[index]));</pre>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h3 id="drag-and-drop"><span class="secno">4.1 </span>Drag-and-drop</h3>
|
|
|
|
<p>The <a href="#drag-and-drop-initialization-steps">drag-and-drop initialization steps</a> are:
|
|
|
|
<ol><li>
|
|
<p>The user agent must take the <a href="#list-of-dragged-nodes">list of dragged nodes</a>
|
|
and <a href="#extracting-json" title="extracting JSON">extract the microdata from those
|
|
nodes into a JSON form</a>, and then must add the resulting
|
|
string to the <code title="dom-DragEvent-dataTransfer">dataTransfer</code> member,
|
|
associated with the <code title="">application/microdata+json</code> format.</p>
|
|
</li>
|
|
</ol></div><div class="impl">
|
|
|
|
<h2 id="converting-html-to-other-formats"><span class="secno">5 </span>Converting HTML to other formats</h2>
|
|
|
|
<h3 id="json"><span class="secno">5.1 </span>JSON</h3>
|
|
|
|
<p>Given a list of nodes <var title="">nodes</var> in a
|
|
<code>Document</code>, a user agent must run the following algorithm
|
|
to <dfn id="extracting-json" title="extracting JSON">extract the microdata from those
|
|
nodes into a JSON form</dfn>:</p>
|
|
|
|
<ol><li><p>Let <var title="">result</var> be an empty object.</li>
|
|
|
|
<li><p>Let <var title="">items</var> be an empty array.</li>
|
|
|
|
<li><p>For each <var title="">node</var> in <var title="">nodes</var>, check if the element is a <a href="#top-level-microdata-items" title="top-level microdata items">top-level microdata item</a>,
|
|
and if it is then <a href="#get-the-object">get the object</a> for that element and
|
|
add it to <var title="">items</var>.</li>
|
|
|
|
<li><p>Add an entry to <var title="">result</var> called "<code title="">items</code>" whose value is the array <var title="">items</var>.</li>
|
|
|
|
<li><p>Return the result of serializing <var title="">result</var>
|
|
to JSON.</li>
|
|
|
|
</ol><p>When the user agent is to <dfn id="get-the-object">get the object</dfn> for an item
|
|
<var title="">item</var>, it must run the following substeps:</p>
|
|
|
|
<ol><li><p>Let <var title="">result</var> be an empty object.</li>
|
|
|
|
<li><p>If the <var title="">item</var> has an <a href="#item-type">item
|
|
type</a>, add an entry to <var title="">result</var> called
|
|
"<code title="">type</code>" whose value is the <a href="#item-type">item
|
|
type</a> of <var title="">item</var>.</li>
|
|
|
|
<li><p>If the <var title="">item</var> has an <a href="#global-identifier">global
|
|
identifier</a>, add an entry to <var title="">result</var>
|
|
called "<code title="">id</code>" whose value is the <a href="#global-identifier">global
|
|
identifier</a> of <var title="">item</var>.</li>
|
|
|
|
<li><p>Let <var title="">properties</var> be an empty
|
|
object.</li>
|
|
|
|
<li>
|
|
|
|
<p>For each element <var title="">element</var> that has one or
|
|
more <a href="#property-names">property names</a> and is one of <a href="#the-properties-of-an-item" title="the
|
|
properties of an item">the properties of the item</a> <var title="">item</var>, in the order those elements are given by the
|
|
algorithm that returns <a href="#the-properties-of-an-item">the properties of an item</a>, run
|
|
the following substeps:</p>
|
|
|
|
<ol><li><p>Let <var title="">value</var> be the <a href="#concept-property-value" title="concept-property-value">property value</a> of <var title="">element</var>.</li>
|
|
|
|
<li><p>If <var title="">value</var> is an <a href="#concept-item" title="concept-item">item</a>, then <a href="#get-the-object">get the
|
|
object</a> for <var title="">value</var>, and then replace
|
|
<var title="">value</var> with the object returned from those
|
|
steps.</li>
|
|
|
|
<li>
|
|
|
|
<p>For each name <var title="">name</var> in <var title="">element</var>'s <a href="#property-names">property names</a>, run the
|
|
following substeps:</p>
|
|
|
|
<ol><li><p>If there is no entry named <var title="">name</var> in
|
|
<var title="">properties</var>, then add an entry named <var title="">name</var> to <var title="">properties</var> whose
|
|
value is an empty array.</li>
|
|
|
|
<li><p>Append <var title="">value</var> to the entry named <var title="">name</var> in <var title="">properties</var>.</li>
|
|
|
|
</ol></li>
|
|
|
|
</ol></li>
|
|
|
|
<li><p>Add an entry to <var title="">result</var> called "<code title="">properties</code>" whose value is the object <var title="">properties</var>.</li>
|
|
|
|
<li><p>Return <var title="">result</var>.</li>
|
|
|
|
</ol><h3 id="rdf"><span class="secno">5.2 </span>RDF</h3>
|
|
|
|
<p>To <dfn id="extracting-rdf" title="extracting rdf">convert a <code>Document</code> to
|
|
RDF</dfn>, a user agent must run the following algorithm:</p>
|
|
|
|
<ol><li>
|
|
|
|
<p>If <a href="#the-title-element">the <code>title</code> element</a> is not null,
|
|
then generate the following triple:</p>
|
|
|
|
<dl class="triple"><dt>subject <dd> <a href="#the-document-s-current-address">the document's current address</a>
|
|
<dt>predicate <dd> <code title="">http://purl.org/dc/terms/title</code>
|
|
<dt>object <dd> the concatenation of the data of all the child <span title="text node">text nodes</span> of <a href="#the-title-element">the <code>title</code> element</a>, in <a href="#tree-order">tree order</a>, as a plain literal, with the language information set from the <a href="#language">language</a> of <a href="#the-title-element">the <code>title</code> element</a>, if it is not unknown.
|
|
|
|
</dl></li>
|
|
|
|
<li>
|
|
|
|
<p>For each <code>a</code>, <code>area</code>, and
|
|
<code>link</code> element in the <code>Document</code>, run these
|
|
substeps:</p>
|
|
|
|
<ol><li><p>If the element does not have a <code title="">rel</code>
|
|
attribute, then skip this element.</li>
|
|
|
|
<li><p>If the element does not have an <code title="">href</code>
|
|
attribute, then skip this element.</li>
|
|
|
|
<li><p>If <a href="#resolve-a-url" title="resolve a URL">resolving</a> the
|
|
element's <code title="">href</code> attribute relative to the
|
|
element is not successful, then skip this element.</li>
|
|
|
|
<li><p>Otherwise, <a href="#split-a-string-on-spaces" title="split a string on spaces">split
|
|
the value of the element's <code title="">rel</code> attribute on
|
|
spaces</a>, obtaining <var title="">list of tokens</var>.</li>
|
|
|
|
<li><p>Convert each token in <var title="">list of tokens</var>
|
|
that does not contain a U+003A COLON characters (:) <span title="converted to ASCII lowercase">to ASCII
|
|
lowercase</span>.</li>
|
|
|
|
<li><p>Coalesce duplicate tokens in <var title="">list of
|
|
tokens</var>.</li>
|
|
|
|
<li><p>If <var title="">list of tokens</var> contains both the
|
|
tokens <code title="rel-alternate">alternate</code> and <code title="rel-stylesheet">stylesheet</code>, then remove them both
|
|
and replace them with the single (uppercase) token <code title="">ALTERNATE-STYLESHEET</code>.</li>
|
|
|
|
<li>
|
|
|
|
<p>For each token <var title="">token</var> in <var title="">list of tokens</var> that contains no U+003A COLON
|
|
characters (:), generate the following triple:</p>
|
|
|
|
<dl class="triple"><dt>subject <dd> <a href="#the-document-s-current-address">the document's current address</a>
|
|
<dt>predicate <dd> the <span>fragment-escaped</span> concatenation of the string "<code title="">http://www.w3.org/1999/xhtml/vocab#</code>" and <var title="">token</var>
|
|
<dt>object <dd> the <a href="#absolute-url">absolute URL</a> that results from <a href="#resolve-a-url" title="resolve a URL">resolving</a> the value of the element's <code title="">href</code> attribute relative to the element
|
|
</dl><p>For each token <var title="">token</var> in <var title="">list of tokens</var> that is an <a href="#absolute-url">absolute
|
|
URL</a>, generate the following triple:</p>
|
|
|
|
<dl class="triple"><dt>subject <dd> <a href="#the-document-s-current-address">the document's current address</a>
|
|
<dt>predicate <dd> <var title="">token</var>
|
|
<dt>object <dd> the <a href="#absolute-url">absolute URL</a> that results from <a href="#resolve-a-url" title="resolve a URL">resolving</a> the value of the element's <code title="">href</code> attribute relative to the element
|
|
</dl></li>
|
|
|
|
</ol></li>
|
|
|
|
<li>
|
|
|
|
<p>For each <code>meta</code> element in the <code>Document</code>
|
|
that has a <code title="attr-meta-name">name</code> attribute and
|
|
a <code title="attr-meta-content">content</code> attribute, if the
|
|
value of the <code title="attr-meta-name">name</code> attribute
|
|
contains no U+003A COLON characters (:), generate the following
|
|
triple:</p>
|
|
|
|
<dl class="triple"><dt>subject <dd> <a href="#the-document-s-current-address">the document's current address</a>
|
|
<dt>predicate <dd> the <span>fragment-escaped</span> concatenation of the string "<code title="">http://www.w3.org/1999/xhtml/vocab#</code>" and the value of the element's <code title="attr-meta-name">name</code> attribute, <span>converted to ASCII lowercase</span>
|
|
<dt>object <dd> the value of the element's <code title="attr-meta-content">content</code> attribute, as a plain literal, with the language information set from the <a href="#language">language</a> of the element, if it is not unknown
|
|
</dl><p>For each <code>meta</code> element in the <code>Document</code>
|
|
that has a <code title="attr-meta-name">name</code> attribute and
|
|
a <code title="attr-meta-content">content</code> attribute, if the
|
|
value of the <code title="attr-meta-name">name</code> attribute is
|
|
an <a href="#absolute-url">absolute URL</a>, generate the following triple:</p>
|
|
|
|
<dl class="triple"><dt>subject <dd> <a href="#the-document-s-current-address">the document's current address</a>
|
|
<dt>predicate <dd> the value of the element's <code title="attr-meta-name">name</code> attribute
|
|
<dt>object <dd> the value of the element's <code title="attr-meta-content">content</code> attribute, as a plain literal, with the language information set from the <a href="#language">language</a> of the element, if it is not unknown
|
|
</dl></li>
|
|
|
|
<li>
|
|
|
|
<p>For each <code>blockquote</code> and <code>q</code> element in
|
|
the <code>Document</code> that has a <code title="">cite</code>
|
|
attribute that <a href="#resolve-a-url" title="resolve a url">resolves</a>
|
|
successfully relative to the element, generate the following
|
|
triple:</p>
|
|
|
|
<dl class="triple"><dt>subject <dd> <a href="#the-document-s-current-address">the document's current address</a>
|
|
<dt>predicate <dd> <code title="">http://purl.org/dc/terms/source</code>
|
|
<dt>object <dd> the <a href="#absolute-url">absolute URL</a> that results from <a href="#resolve-a-url" title="resolve a URL">resolving</a> the value of the element's <code title="">cite</code> attribute relative to the element
|
|
</dl></li>
|
|
|
|
<li>
|
|
|
|
<p>Let <var title="">memory</var> be a mapping of items to
|
|
subjects, initially empty.</p>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>For each element that is also a <a href="#top-level-microdata-items" title="top-level
|
|
microdata items">top-level microdata item</a>, run the
|
|
following steps:</p>
|
|
|
|
<ol><li>
|
|
|
|
<p><a href="#generate-the-triples-for-an-item" title="generate the triples for an item">Generate the
|
|
triples for the item</a>. Pass a reference to <var title="">memory</var> as the item/subject list. Let <var title="">result</var> be the subject returned.</p>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>Generate the following triple:</p>
|
|
|
|
<dl class="triple"><dt>subject <dd> <a href="#the-document-s-current-address">the document's current address</a>
|
|
<dt>predicate <dd> <code title="">http://www.w3.org/1999/xhtml/microdata#item</code>
|
|
<dt>object <dd> <var title="">result</var>
|
|
</dl></li>
|
|
|
|
</ol></li>
|
|
|
|
</ol><p>When the user agent is to <dfn id="generate-the-triples-for-an-item">generate the triples for an
|
|
item</dfn> <var title="">item</var>, given a reference to an
|
|
item/subject list <var title="">memory</var>, and optionally given a
|
|
fallback type <var title="">fallback type</var> and property name
|
|
<var title="">fallback name</var>, it must run the following
|
|
steps:</p>
|
|
|
|
<ol><li><p>If there is an entry for <var title="">item</var> in <var title="">memory</var>, then let <var title="">subject</var> be the
|
|
subject of that entry. Otherwise, if <var title="">item</var> has a
|
|
<a href="#global-identifier">global identifier</a> and that <a href="#global-identifier">global
|
|
identifier</a> is an <a href="#absolute-url">absolute URL</a>, let <var title="">subject</var> be that <a href="#global-identifier">global
|
|
identifier</a>. Otherwise, let <var title="">subject</var> be a
|
|
new blank node.</li>
|
|
|
|
<li><p>Add a mapping from <var title="">item</var> to <var title="">subject</var> in <var title="">memory</var>, if there
|
|
isn't one already.</li>
|
|
|
|
<li><p>If <var title="">item</var> has an <a href="#item-type">item type</a>
|
|
and that <a href="#item-type">item type</a> is an <a href="#absolute-url">absolute URL</a>,
|
|
let <var title="">type</var> be that <a href="#item-type">item
|
|
type</a>. Otherwise, let <var title="">type</var> be the empty
|
|
string.</li>
|
|
|
|
|
|
<li>
|
|
|
|
<p>If <var title="">type</var> is not the empty string, run the
|
|
following steps:</p>
|
|
|
|
<ol><li><p>Generate the following triple:</p>
|
|
|
|
<dl class="triple"><dt>subject <dd> <var title="">subject</var>
|
|
<dt>predicate <dd> <code title="">http://www.w3.org/1999/02/22-rdf-syntax-ns#type</code>
|
|
<dt>object <dd> <var title="">type</var>
|
|
</dl></li>
|
|
|
|
<li><p>If <var title="">type</var> does not contain a U+0023
|
|
NUMBER SIGN character (#), then append a U+0023 NUMBER SIGN
|
|
character (#) to <var title="">type</var>.</li>
|
|
|
|
<li><p>If <var title="">type</var> does not have a U+003A COLON
|
|
character (:) after its U+0023 NUMBER SIGN character (#), append
|
|
a U+003A COLON character (:) to <var title="">type</var>.</li>
|
|
|
|
</ol></li>
|
|
|
|
<li>
|
|
|
|
<p>If <var title="">type</var> is the empty string, but <var title="">fallback type</var> is not, run the following
|
|
substeps:</p>
|
|
|
|
<ol><li><p>Let <var title="">type</var> have the value of <var title="">fallback type</var>.</li>
|
|
|
|
<li><p>If <var title="">type</var> does not contain a U+0023
|
|
NUMBER SIGN character (#), then append a U+0023 NUMBER SIGN
|
|
character (#) to <var title="">type</var>.</li>
|
|
|
|
|
|
<li><p>If <var title="">type</var> does not have a U+003A COLON
|
|
character (:) after its U+0023 NUMBER SIGN character (#), append
|
|
a U+003A COLON character (:) to <var title="">type</var>.</li>
|
|
|
|
<li><p>If the last character of <var title="">type</var> is not a
|
|
U+003A COLON character (:), append a U+0025 PERCENT SIGN
|
|
character (%), a U+0032 DIGIT TWO character (2), and a U+0030
|
|
DIGIT ZERO character (0) to <var title="">type</var>.</li>
|
|
|
|
<li><p>Append the <span>fragment-escaped</span> value of <var title="">fallback name</var> to <var title="">type</var>.</li>
|
|
|
|
</ol></li>
|
|
|
|
<li>
|
|
|
|
<p>For each element <var title="">element</var> that has one or
|
|
more <a href="#property-names">property names</a> and is one of <a href="#the-properties-of-an-item" title="the
|
|
properties of an item">the properties of the item</a> <var title="">item</var>, in the order those elements are given by the
|
|
algorithm that returns <a href="#the-properties-of-an-item">the properties of an item</a>, run
|
|
the following substep:</p>
|
|
|
|
<ol><li>
|
|
|
|
<p>For each name <var title="">name</var> in <var title="">element</var>'s <a href="#property-names">property names</a>, run the
|
|
following substeps:</p>
|
|
|
|
<ol><li><p>If <var title="">type</var> is the empty string and <var title="">name</var> is not an <a href="#absolute-url">absolute URL</a>, then
|
|
abort these substeps.</li>
|
|
|
|
<li><p>Let <var title="">value</var> be the <a href="#concept-property-value" title="concept-property-value">property value</a> of <var title="">element</var>.</li>
|
|
|
|
<li><p>If <var title="">value</var> is an <a href="#concept-item" title="concept-item">item</a>, then <a href="#generate-the-triples-for-an-item" title="generate
|
|
the triples for an item">generate the triples</a> for <var title="">value</var>. Pass a reference to <var title="">memory</var> as the item/subject list, and pass <var title="">type</var> as the fallback type and <var title="">name</var> as the fallback property name. Replace <var title="">value</var> by the subject returned from those
|
|
steps.</li>
|
|
|
|
|
|
<li><p>Otherwise, if <var title="">element</var> is not one of
|
|
the <a href="#url-property-elements">URL property elements</a>, let <var title="">value</var> be a plain literal, with the language
|
|
information set from the <a href="#language">language</a> of the element, if
|
|
it is not unknown.</li>
|
|
|
|
<li>
|
|
|
|
<dl><dt>If <var title="">name</var> is an <a href="#absolute-url">absolute
|
|
URL</a></dt>
|
|
|
|
<dd>
|
|
|
|
<p>Let <var title="">predicate</var> be <var title="">name</var>.</p>
|
|
|
|
</dd>
|
|
|
|
<dt>If <var title="">name</var> contains no U+003A COLON
|
|
characters (:)</dt>
|
|
|
|
<dd>
|
|
|
|
<ol><li><p>Let <var title="">s</var> be <var title="">type</var>.</li>
|
|
|
|
<li><p>If the last character of <var title="">s</var> is
|
|
not a U+003A COLON character (:), append a U+0025 PERCENT
|
|
SIGN character (%), a U+0032 DIGIT TWO character (2), and a
|
|
U+0030 DIGIT ZERO character (0) to <var title="">s</var>.</li>
|
|
|
|
<li><p>Append the <span>fragment-escaped</span> value of
|
|
<var title="">name</var> to <var title="">s</var>.</li>
|
|
|
|
<li>
|
|
|
|
<p>Let <var title="">predicate</var> be the concatenation
|
|
of the string "<code title="">http://www.w3.org/1999/xhtml/microdata#</code>"
|
|
and the <span>fragment-escaped</span> value of <var title="">s</var>.</p>
|
|
<p class="example">For example if the string <var title="">s</var> is "<code title="">http://example.com/a#:q%20r</code>", the
|
|
resulting <var title="">predicate</var> would be "<code title="">http://www.w3.org/1999/xhtml/microdata#http://example.com/a%23:q%20r</code>".</p>
|
|
|
|
</li>
|
|
|
|
</ol></dd>
|
|
|
|
</dl></li>
|
|
|
|
<li>
|
|
|
|
<p>Generate the following triple:</p>
|
|
|
|
<dl class="triple"><dt>subject <dd> <var title="">subject</var>
|
|
<dt>predicate <dd> <var title="">predicate</var>
|
|
<dt>object <dd> <var title="">value</var>
|
|
</dl></li>
|
|
|
|
</ol></li>
|
|
|
|
</ol></li>
|
|
|
|
<li><p>Return <var title="">subject</var>.</li>
|
|
|
|
</ol><h4 id="examples"><span class="secno">5.2.1 </span>Examples</h4>
|
|
|
|
<p><i>This section is non-normative.</i></p>
|
|
|
|
<div class="example">
|
|
|
|
<p>Here is an example of some HTML using Microdata to express RDF
|
|
statements:</p>
|
|
|
|
<pre><dl itemscope
|
|
itemtype="http://purl.org/vocab/frbr/core#Work"
|
|
itemid="http://books.example.com/works/45U8QJGZSQKDH8N">
|
|
<dt>Title</dt>
|
|
<dd><cite itemprop="http://purl.org/dc/terms/title">Just a Geek</cite></dd>
|
|
<dt>By</dt>
|
|
<dd><span itemprop="http://purl.org/dc/elements/1.1/creator">Wil Wheaton</span></dd>
|
|
<dt>Format</dt>
|
|
<dd itemprop="http://purl.org/vocab/frbr/core#realization"
|
|
itemscope
|
|
itemtype="http://purl.org/vocab/frbr/core#Expression"
|
|
itemid="http://books.example.com/products/9780596007683.BOOK">
|
|
<link itemprop="http://purl.org/dc/terms/type" href="http://books.example.com/product-types/BOOK">
|
|
Print
|
|
</dd>
|
|
<dd itemprop="http://purl.org/vocab/frbr/core#realization"
|
|
itemscope
|
|
itemtype="http://purl.org/vocab/frbr/core#Expression"
|
|
itemid="http://books.example.com/products/9780596802189.EBOOK">
|
|
<link itemprop="http://purl.org/dc/terms/type" href="http://books.example.com/product-types/EBOOK">
|
|
Ebook
|
|
</dd>
|
|
</dl></pre>
|
|
|
|
<p>This is equivalent to the following Turtle:</p>
|
|
|
|
<pre class="turtle">@prefix dct: <http://purl.org/dc/terms/> .
|
|
@prefix dce: <http://purl.org/dc/elements/1.1/> .
|
|
@prefix frbr: <http://purl.org/vocab/frbr/core#> .
|
|
|
|
<http://books.example.com/works/45U8QJGZSQKDH8N> a frbr:Work ;
|
|
dce:creator "Wil Wheaton"@en ;
|
|
dct:title "Just a Geek"@en ;
|
|
frbr:realization <http://books.example.com/products/9780596007683.BOOK>,
|
|
<http://books.example.com/products/9780596802189.EBOOK> .
|
|
|
|
<http://books.example.com/products/9780596007683.BOOK> a frbr:Expression ;
|
|
dct:type <http://books.example.com/product-types/BOOK> .
|
|
|
|
<http://books.example.com/products/9780596802189.EBOOK> a frbr:Expression ;
|
|
dct:type <http://books.example.com/product-types/EBOOK> .</pre>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<p>The following snippet of HTML has microdata for two people with
|
|
the same address:</p>
|
|
|
|
<pre><p>
|
|
Both
|
|
<span itemscope itemtype="http://microformats.org/profile/hcard" itemref="home"><span itemprop="fn"
|
|
><span itemprop="n" itemscope><span itemprop="given-name">Princeton</span></span></span></span>
|
|
and
|
|
<span itemscope itemtype="http://microformats.org/profile/hcard" itemref="home"><span itemprop="fn"
|
|
><span itemprop="n" itemscope><span itemprop="given-name">Trekkie</span></span></span></span>
|
|
live at
|
|
<span id="home" itemprop="adr" itemscope><span itemprop="street-address">Avenue Q</span>.</span>
|
|
</p></pre>
|
|
|
|
<p>It generates these triples expressed in Turtle (including a
|
|
triple that in this case is expressed twice, though that is not
|
|
meaningful in RDF):</p>
|
|
|
|
<pre class="turtle">@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
|
|
@prefix dct: <http://purl.org/dc/terms/> .
|
|
@prefix hcard: <http://www.w3.org/1999/xhtml/microdata#http://microformats.org/profile/hcard%23:> .
|
|
|
|
<> <http://www.w3.org/1999/xhtml/microdata#item> _:n0 ;
|
|
<http://www.w3.org/1999/xhtml/microdata#item> _:n1 .
|
|
_:n0 rdf:type <http://microformats.org/profile/hcard> ;
|
|
hcard:fn "Princeton" ;
|
|
hcard:n _:n0a
|
|
hcard:adr _:n2 .
|
|
_:n0a hcard:n%20given-name "Princeton" .
|
|
_:n1 rdf:type <http://microformats.org/profile/hcard> ;
|
|
hcard:fn "Trekkie" ;
|
|
hcard:n _:n1a
|
|
hcard:adr _:n2 .
|
|
_:n1a hcard:n%20given-name "Trekkie" .
|
|
_:n2 hcard:adr%20street-address "Avenue Q" ;
|
|
hcard:adr%20street-address "Avenue Q" .</pre>
|
|
|
|
</div>
|
|
|
|
|
|
</div><h2 id="iana"><span class="secno">6 </span>IANA considerations</h2><h3 id="application-microdata-json"><span class="secno">6.1 </span><dfn><code>application/microdata+json</code></dfn></h3><p>This registration is for community review and will be submitted
|
|
to the IESG for review, approval, and registration with IANA.</p><dl><dt>Type name:</dt>
|
|
<dd>application</dd>
|
|
<dt>Subtype name:</dt>
|
|
<dd>microdata+json</dd>
|
|
<dt>Required parameters:</dt>
|
|
<dd>Same as for <code>application/json</code> <a href="#refsJSON">[JSON]</a></dd>
|
|
<dt>Optional parameters:</dt>
|
|
<dd>Same as for <code>application/json</code> <a href="#refsJSON">[JSON]</a></dd>
|
|
<dt>Encoding considerations:</dt>
|
|
<dd>Always UTF-8.</dd>
|
|
<dt>Security considerations:</dt>
|
|
<dd>Same as for <code>application/json</code> <a href="#refsJSON">[JSON]</a></dd>
|
|
<dt>Interoperability considerations:</dt>
|
|
<dd>Same as for <code>application/json</code> <a href="#refsJSON">[JSON]</a></dd>
|
|
<dt>Published specification:</dt>
|
|
<dd>
|
|
|
|
Labeling a resource with the
|
|
<code><a href="#application-microdata-json">application/microdata+json</a></code> type asserts that the
|
|
resource is a JSON text that consists of an object with a single
|
|
entry called "<code title="">items</code>" consisting of an array
|
|
of entries, each of which consists of an object with an entry
|
|
called "<code title="">id</code>" whose value is a string, an
|
|
entry called "<code title="">type</code>" whose value is another
|
|
string, and an entry called "<code title="">properties</code>"
|
|
whose value is an object whose entries each have a value
|
|
consisting of an array of either objects or strings, the objects
|
|
being of the same form as the objects in the aforementioned "<code title="">items</code>" entry. As such, the relevant specifications
|
|
are the JSON specification and this specification. <a href="#refsJSON">[JSON]</a>
|
|
|
|
</dd>
|
|
<dt>Applications that use this media type:</dt>
|
|
<dd>Same as for <code>application/json</code> <a href="#refsJSON">[JSON]</a></dd>
|
|
<dt>Additional information:</dt>
|
|
<dd>
|
|
<dl><dt>Magic number(s):</dt>
|
|
<dd>Same as for <code>application/json</code> <a href="#refsJSON">[JSON]</a></dd>
|
|
<dt>File extension(s):</dt>
|
|
<dd>Same as for <code>application/json</code> <a href="#refsJSON">[JSON]</a></dd>
|
|
<dt>Macintosh file type code(s):</dt>
|
|
<dd>Same as for <code>application/json</code> <a href="#refsJSON">[JSON]</a></dd>
|
|
</dl></dd>
|
|
<dt>Person & email address to contact for further information:</dt>
|
|
<dd>Ian Hickson <ian@hixie.ch></dd>
|
|
<dt>Intended usage:</dt>
|
|
<dd>Common</dd>
|
|
<dt>Restrictions on usage:</dt>
|
|
<dd>No restrictions apply.</dd>
|
|
<dt>Author:</dt>
|
|
<dd>Ian Hickson <ian@hixie.ch></dd>
|
|
<dt>Change controller:</dt>
|
|
<dd>W3C</dd>
|
|
</dl><p>Fragment identifiers used with
|
|
<code><a href="#application-microdata-json">application/microdata+json</a></code> resources have the same
|
|
semantics as when used with <code>application/json</code> (namely,
|
|
at the time of writing, no semantics at all). <a href="#refsJSON">[JSON]</a><h2 class="no-num" id="references">References</h2><p>All references are normative unless marked "Non-normative".</p><dl><dt id="refsHTML5">[HTML5]</dt>
|
|
<dd>
|
|
(Non-normative)
|
|
<cite><a href="http://dev.w3.org/html5/spec/">HTML5</a></cite>,
|
|
I. Hickson. W3C.</dd>
|
|
|
|
<dt id="refsJSON">[JSON]</dt>
|
|
<dd><cite><a href="http://tools.ietf.org/html/rfc4627">The
|
|
application/json Media Type for JavaScript Object Notation
|
|
(JSON)</a></cite>, D. Crockford. IETF.</dd>
|
|
|
|
<dt id="refsRFC2119">[RFC2119]</dt>
|
|
<dd><cite><a href="http://tools.ietf.org/html/rfc2119">Key words for use in
|
|
RFCs to Indicate Requirement Levels</a></cite>, S. Bradner. IETF.</dd>
|
|
|
|
<dt id="refsWEBIDL">[WEBIDL]</dt>
|
|
<dd><cite><a href="http://dev.w3.org/2006/webapi/WebIDL/">Web
|
|
IDL</a></cite>, C. McCormack. W3C.</dd>
|
|
|
|
</dl><h2 class="no-num" id="acknowledgements">Acknowledgements</h2><p>Thanks to the participants of the microdata usability study for
|
|
allowing us to use their mistakes as a guide for designing the
|
|
microdata feature.<p>For a full list of acknowledgements, please see the HTML5
|
|
specification. <a href="#refsHTML5">[HTML5]</a>
|