forked from w3c/microdata
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
1711 lines (1318 loc) · 70.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>HTML Microdata</title>
<style>
/* Styles for SVG */
rect, ellipse { fill: none}
.item {stroke: #005; stroke-width: 2}
.value-box {stroke: #dd0; stroke-width: 2}
text { font-family: "Arial"; font-size: 14px; fill: #f00 }
.property, .iteminfo { fill: #00a ; font-size: 8px }
.value { fill: #000 }
</style>
<link href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED" rel="stylesheet" type="text/css">
<script src='https://www.w3.org/Tools/respec/respec-w3c-common' async class='remove'></script>
<script class='remove'>
var respecConfig = {
shortName: "microdata",
specStatus: "ED",
useExperimentalStyles: true,
edDraftURI: "https://w3c.github.io/microdata/",
editors: [{
name: "Chaals McCathie Nevile",
mailto: "[email protected]",
company: "Yandex / Яндекс",
companyURL: "http://yandex.com/",
w3cid: "6222"
}, {
name: "Dan Brickley",
mailto: "[email protected]",
company: "Google, Inc.",
companyURL: "https://google.com/",
w3cid: "6350"
}],
license: 'w3c-software-doc',
previousPublishDate: "2017-05-04",
previousMaturity: "FPWD",
wg: "Web Platform Working Group",
wgPatentURI: "https://www.w3.org/2004/01/pp-impl/83482/status",
wgURI: "https://www.w3.org/WebPlatform/WG/",
otherLinks: [{
key: 'Former Editor (Until October 2013)',
data: [{
value: "Ian Hickson, Google, Inc."
}]
}, {
key: 'Repository',
data: [{
value: 'We are on GitHub.',
href: 'https://github.com/w3c/microdata'
}, {
value: 'File a bug.',
href: 'https://github.com/w3c/microdata/issues'
}, {
value: 'Commit history.',
href: 'https://github.com/w3c/microdata/commits/gh-pages/index.html'
}]
},{
key: 'Mailing list',
data: [{
value: '[email protected]',
href: 'https://lists.w3.org/Archives/Public/public-webapps/'
}]
}]
};
</script>
</head>
<body>
<section id="abstract">
<p>This specification defines new HTML attributes to embed machine-readable data in HTML documents in a style similar to RDFa.
It is compatible with JSON, and <em>can</em> be written in a style which is convertible to RDF,
although two-way conversion is not lossless.</p>
</section>
<section id="sotd">
<p>This document is an editor's draft for the <a href="https://www.w3.org/WebPlatform/WG/">Web Platform Working Group</a>,
proposed as an update to the
<a href="https://www.w3.org/TR/2017/WD-microdata-20170504/">4 May 2017 W3C First Public Working Draft</a>.</p>
<p>This specification is an extension to HTML.
All normative content in the HTML specification not specifically overridden by this specification
is intended to be normative for this specification. [[!HTML52]]</p>
<!-- where to send feedback (required) -->
<p>If you wish to make comments regarding this document please
<a href="https://github.com/w3c/microdata/issues">submit them as github issues</a>.
All feedback is welcome, but please note the
<a href="https://github.com/w3c/microdata/blob/master/CONTRIBUTING.md">contribution guidelines</a>
require agreement to the terms of the W3C Patent Policy for substantive contributions.</p>
</section>
<!--YYY-->
<section id="dependencies">
<h2>Dependencies</h2>
<p>This specification depends on the HTML specification and its extensions for
definitions of individual HTML elements and attributes. [[!HTML52]][[html-extensions]]</p>
<p>Information expressed as microdata can be converted to JSON, as described in <a href="#json">Section 6.1</a>.
Microdata can be converted to RDF, for example via conversion to JSON-LD or RDFa,
if additional constraints are applied to the microdata content.
A process to convert microdata directly to RDF is described in <a href="https://www.w3.org/TR/microdata-rdf">Microdata to RDF</a>.
[[JSON]] [[rdfa-core]] [[microdata-rdf]]</p>
</section>
<section id="terminology">
<h2>Terminology</h2>
<p>For the purposes of this specification, the terms "URL" and "URI" are equivalent.
The URL specification, and RFC 3986 which uses the term URI, define a <dfn data-lt="url|uri">URL</dfn>,
<dfn>valid URL</dfn>, and <dfn>absolute URL</dfn>. [[RFC3986]][[URL]]<p>
<p>A <dfn>valid absolute URL</dfn> is an <a>absolute URL</a> which is <a data-lt="valid URL">valid</a>.</p>
<p>RFC 3986 defines the term <dfn data-lt="resolving">resolve a URL</dfn> [[!RFC3986]].</p>
<p>DOM 4.1 defines <dfn><code>textContent</code></dfn> for attributes, and for elements or nodes,
as well as the term <dfn id="tree-order">tree order</dfn>. [[!DOM41]]</p><!-- and this spec uses tree order once… badly -->
<p>This specification relies on the HTML specification to define the following terms: [[!HTML52]]</p>
<ul>
<li><dfn>space characters</dfn>, <dfn>split a string on spaces</dfn>, and an
<dfn>unordered set of unique space-separated tokens</dfn>.</li>
<li><dfn data-lt="HTML elements">HTML Element</a>, <dfn>global attribute</dfn>, <dfn>boolean attribute</dfn>.</li>
<li>An element's <dfn>ID</dfn> and <dfn id="language">language</dfn>.</li>
<li><dfn>flow content</dfn> and <dfn>phrasing content</dfn>.</li>
</ul>
</section>
<section id="conformance">
<p>The key words "must", "must not", "should", "should not", and "may" in the normative parts of this document
are to be interpreted as described in RFC2119. [[!RFC2119]]</p>
<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>
<div class="example">
<p>For example, were the spec to say:</p>
<pre>To eat an orange, the user must:
1. Peel the orange.
2. Separate each slice of the orange.
3. Eat the orange slices.</pre>
<p>...it would be equivalent to the following:</p>
<pre>To eat an orange:
1. The user must peel the orange.
2. The user must separate each slice of the orange.
3. The user must eat the orange slices.</pre>
<p>Here the key word is "must".</p>
<p>The former (imperative) style is generally preferred in this specification for stylistic
reasons.</p>
</div>
<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>
</section>
<section id="sec-navigation-timing">
<h2>Introduction</h2>
<section id="overview">
<h3>Overview</h3>
<p><i>This section is non-normative.</i></p>
<p>Sometimes, it is desirable to annotate content with specific machine-readable labels.
For example, search engines can better identify page content using schema.org annotations,
and content management systems can find and use information from documents, if it is marked up in a known way.</p>
<p>Microdata provides a simple mechanism to label content in a document,
so it can be processed as a set of <a data-lt="concept item">items</a>
described by name-value pairs.</p>
<p>Each name-value pair identifies a <a data-lt="item property">property</a> of the item, and a <a data-lt="property value">value</a> of that property.</p>
<figure>
<figcaption>
A common way to represent items, properties and values graphically
</figcaption>
<p><svg viewbox="0 0 300 45">
<g id="diagram1-item">
<title>An Item</title>
<ellipse class="item" cx="50" cy="25" rx="40" ry="15"/>
<text x="35" y="30">Item</text>
</g>
<g id="diagram1-property">
<title>A Property</title>
<path d="M95,23h90v-8l10,10l-10,10v-8h-90z"/>
<text x="105" y="19">Property</text>
</g>
<g id="diagram1-value">
<title>A Value</title>
<rect class="value-box" x="200" y="10" width="80" height="30"/>
<text x="215" y="30">Value</text>
</g>
</svg></p>
</figure>
<p>The value of a property may be an item.</p>
</section>
<section id="the-basic-syntax">
<h3>The basic syntax</h3>
<p><i>This section is non-normative.</i></p>
<p><a data-lt="concept item">Items</a> and properties are generally represented by regular elements.</p>
<p>The <a>itemscope</a> attribute creates an <a data-lt="concept item">item</a>.</p>
<p>The <a>itemprop</a> attribute on a descendent element of an <a data-lt="concept item">item's</a>
identifies a <a>property</a> of that item.
Typically, the text content of that element is the <a data-lt="property value">value</a> of that property.</p>
<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>
<figure>
<figcaption>The example represented graphically: two items, each with a value for the property <code>name</code>
<p><svg viewbox="0 0 300 105">
<g id="ex2-first-item">
<g id="ex2-item1">
<ellipse class="item" cx="50" cy="30" rx="40" ry="15"/>
<text x="35" y="35">Item</text>
</g>
<g id="ex2-property1">
<path d="M95,28h90v-8l10,10l-10,10v-8h-90z"/>
<text x="125" y="24" class="property">name</text>
</g>
<g id="ex2-value1">
<rect class="value-box" x="200" y="15" width="80" height="30"/>
<text x="210" y="35" class="value">Elizabeth</text>
</g>
</g>
<g id="ex2-second-item">
<g id="ex2-item2">
<ellipse class="item" cx="50" cy="80" rx="40" ry="15"/>
<text x="35" y="85">Item</text>
</g>
<g id="ex2-property2">
<path d="M95,78h90v-8l10,10l-10,10v-8h-90z"/>
<text x="125" y="74" class="property">name</text>
</g>
<g id="ex2-value2">
<rect class="value-box" x="200" y="65" width="80" height="30"/>
<text x="210" y="85" class="value">Daniel</text>
</g>
</g>
</svg><p>
</figure>
</div>
<p>Markup other than microdata attributes has no effect on microdata.</p>
<div class="example">
<p>These two examples are exactly equivalent, at a microdata level, as the previous two examples
respectively:</p>
<pre><div itemscope>
<p>My <em>name</em> is
<span itemprop="name">E<strong>liz</strong>abeth</span>.</p>
</div>
<section>
<div itemscope>
<aside>
<p>My name is
<span itemprop="name"><a href="/?user=daniel">Daniel</a></span>.</p>
</aside>
</div>
</section></pre>
<p class="warning">Note that this means any information recorded in markup for purposes such as internationalisation
or accessibility will be lost in the conversion to data.</p>
</div>
<p>Properties generally have values that are strings.</p>
<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>If the text that would normally be the value of a property, such as the element content,
is unsuitable for recording the property value,
it can be expressed using the <a>content</a> attribute of the element.</p>
<div class="example">
<p>Here, the visible content may be added by a script.
A microdata processor can extract the content from the <a>content</a> attribute without running scripts.
The value of the <var>product-id</var> property for this item is <samp>9678AOU879</samp></p>
<pre><li itemscope>
<span itemprop="product-id" content="9678AOU879"
class="reference--id_code-autoinsert"></span>
</li></pre>
</div>
<p>When a string value is in some machine-readable format unsuitable to present as the content of an element,
it can be expressed using the <code title="attr-data-value">value</code> attribute of the <code>data</code> element,
as long as there is no <a>content</a> attribute.</p>
<div class="example">
<p>Here, there is an item with a property whose value is a product identifier. The identifier is not
human-friendly, so instead it is encoded for microdata using the <code>value</code> attribute
of the <code>data</code> element, and the product's name is used as the text content of the element
that is rendered on the page.</p>
<pre><h1 itemscope>
<data itemprop="product-id" value="9678AOU879">The Instigator 2000</data>
</h1></pre>
<p class="warning">This will not work if there is a <a>content</a> attribute as well. In the following example,
the value of the <var>product-id</var> property is taken from the <a>content</a> attribute, so it will be
<samp>This one rocks!</samp>:</p>
<pre><h1 itemscope>
<data itemprop="product-id" value="9678AOU879"
content="This one rocks!">The Instigator 2000</data>
</h1></pre>
</div>
<p>When an <a>itemprop</a> is used on an element that can have a <code>src</code> or <code>href</code> attribute,
such as links and media elements, that <em>does not</em> have a <a>content</a> attribute,
the value of the name-value pair is an <a>absolute URL</a> based on the
<code>src</code> or <code>href</code> attribute (or the empty string if they are missing or there is an error).</p>
<div class="example">
<p>In this example, the item has one property, <var>logo</var>, whose value is a URL based on the location of the page, and ending with <samp>our-logo.png</samp>:</p>
<pre><div itemscope itemtype="https://schema.org/LocalBusiness">
<img itemprop="logo" src="our-logo.png" alt="Our Company">
</div></pre>
<p class="warning">Note that accessibility information, such as the <code>alt</code> attribute in the previous example,
is ignored. To provide that as a value, repeat it in a <a>content</a> attribute. In the following example, the value
of the <var>name</var> property is <samp>The Company</samp>:</p>
<pre><div itemscope itemtype="https://schema.org/LocalBusiness">
<img itemprop="name" src="our-logo.png"
content="The Company" alt="Our Company">
</div></pre>
</div>
<p>For numeric data, the <code>meter</code> element and its <code title="attr-meter-value">value</code> attribute
can be used instead, as long as there is no <a>content</a> attribute.</p>
<div class="example">
<p>Here a rating of <samp>3.5</samp> is given using a <code>meter</code> element.</p>
<pre><div itemscope itemtype="https://schema.org/Product">
<span itemprop="name">Panasonic White 60L Refrigerator</span>
<img src="panasonic-fridge-60l-white.jpg" alt="">
<div itemprop="aggregateRating"
itemscope itemtype="https://schema.org/AggregateRating">
<meter itemprop="ratingValue" min=0 value=3.5 max=5>Rated 3.5/5</meter>
(based on <span itemprop="reviewCount">11</span> customer reviews)
</div>
</div></pre>
</div>
<p>Similarly, for date- and time-related data, the <code>time</code> element and its
<code>datetime</code> attribute can be used to specify a specifically formatted date or time,
as long as there is no <a>content</a> attribute.</p>
<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><a>itemscope</a></code> attribute
on the element that declares the property.</p>
<p>Items that are not part of others are called <a data-lt="top-level microdata item">top-level microdata items</a>.</p>
<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><a>itemscope</a></code> attribute
can be associated with the <a data-lt="concept item">item</a> using the
<code><a>itemref</a></code> attribute.
This attribute takes a list of <a>ID</a>s of elements to crawl in addition to crawling the children of
the element with the <code><a>itemscope</a></code> attribute.</p>
<div class="example">
<p>This example is the same as the previous one, but all the properties are separated from their
<a data-lt="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 data-lt="concept item">item</a> can have multiple properties with the same name and
different values.</p>
<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.</p>
<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.</p>
<div class="example">
<p>The following two examples are exactly the same microdata, because they produce exactly the same information when processed:</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".
In neither case is the image in any way associated with the item.</p>
</div>
</section>
<section id="typed-items">
<h3>Typed items</h3>
<p><i>This section is non-normative.</i></p>
<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>
<p>For this purpose, it is necessary to give each <a data-lt="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 data-lt="URL">URLs</a>.</p>
<p>The type for an <a data-lt="concept item">item</a> is given as the value of an
<code><a>itemtype</a></code> attribute on the same element as the
<code><a>itemscope</a></code> attribute. The value is a URL, which determines the <a>vocabulary identifier</a> for properties</p>
<div class="example">
<p>Assuming a page at http://example.net/some/dataexample contains the following code:</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>The item's type is "http://example.org/animals#cat"</p>
<p>In this example the "http://example.org/animals#cat" item has three properties:<p>
<dl>
<dt><samp>http://example.org/animals#name</samp></dt>
<dd>"Hedral"</dd>
<dt><samp>http://example.org/animals#desc</samp></dt>
<dd>Hedral is a male american domestic shorthair, with a fluffy black fur with white paws and belly.
<dt><samp>http://example.org/animals#img</samp></dt>
<dd>hedral.jpeg</dd>
</dl>
</div>
<p>The type gives the context for the properties, thus selecting 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.
A vocabulary may define several types. For example, the types
"<code>http://example.org/people/teacher</code>" and "<code>http://example.org/people/engineer</code>"
could be defined in the same vocabulary. Some properties might not be especially useful in both cases:
the "<code>classroom</code>" property might not be meaningful with the "<code>http://example.org/people/engineer</code>" type.
Multiple types from the same vocabulary can be given for a single item by listing the URLs, separated by spaces,
in the attribute's value. An item cannot be given two types if they do not use the same vocabulary, however.</p>
</section>
<section id="global-identifiers-for-items">
<h3>Global identifiers for items</h3>
<p><i>This section is non-normative.</i></p>
<p>Sometimes, an <a data-lt="concept item">item</a> gives information about a topic that has a
<a>global identifier</a>. For example, books can be identified by their ISBN number,
or concepts can be identified by a URL as in [[rdf-primer]].</p>
<p>The <code><a>itemid</a></code> attribute associates an <a data-lt="concept item">item</a> with a global identifier
in the form of a <a data-lt="URL">URLs</a>.</p>
<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>
</div>
</section>
<section id="selecting-names-when-defining-vocabularies">
<h3>Selecting names when defining vocabularies</h3>
<p><i>This section is non-normative.</i></p>
<p>Using microdata means using a vocabulary. For some purposes an ad-hoc vocabulary is adequate,
but authors are encouraged to re-use existing vocabularies to make content re-use easier.</p>
<p>When designing new vocabularies, identifiers can be created either using
<a>URL</a>s, 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.</p>
<div class="example">
<p>For instance, if Jon and Adam both write content at <code>example.com</code>, at
<code>http://example.com/~jon/...</code> and <code>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.</p>
<div class="example">
<p>Here, an item in the page http://example.net/some/dataexample is an "http://example.org/animals/cat",
and most of the properties have names 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://myvocab.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://myvocab.example.org/animals/cat" and the following
properties:</p>
<dl>
<dt>http://myvocab.example.org/animals/name</dt>
<dd>Hedral<dd>
<dt>http://example.com/fn</dt>
<dd>Hedral</dd>
<dt>http://myvocab.example.org/animals/desc</dt>
</dd>Hedral is a male american domestic shorthair, with a fluffy black fur with white paws and belly.</dd>
<dt>http://example.com/color</dt>
<dd>black</dd>
<dt>http://example.com/color</dt>
<dd>white</dd></tr><tr>
<dt>http://myvocab.example.org/animals/img</dt>
<dd>http://example.net/some/hedral.jpeg</dd>
</dl>
</div>
</section>
</section>
<section id="encoding-microdata">
<h2>Encoding microdata</h2>
<section id="the-microdata-model">
<h3>The microdata model</h3>
<p>The microdata model consists of groups of name-value pairs known as <a data-lt="concept item">items</a>.</p>
<p>Each group is known as an <a data-lt="concept item">item</a>. Each
<a data-lt="concept item">item</a> can have zero or more <a>item types</a>,
<a>global identifier</a>(s), and associated name-value pairs.
Each name in the name-value pair is known as a <a data-lt="item properties">property</a>,
and each <a data-lt="item properties">property</a> has one or more <a data-lt="property value">values</a>.
Each <a data-lt="property value">value</a> is either a string or itself a group of name-value pairs
(an <a data-lt="concept item">item</a>).
The names are unordered relative to each other, but if a particular name has multiple values, they do have a relative order.</p>
</section>
<section id="items">
<h3>Items: <a>itemscope</a>, <a>itemtype</a>, and <a>itemid</a>.</h3>
<p>Every <a data-lt="HTML elements">HTML element</a> may have an
<dfn><code>itemscope</code></dfn> attribute specified.
The <code><a>itemscope</a></code> attribute is a <a>boolean attribute</a>.</p>
<p>An element with the <code><a>itemscope</a></code> attribute specified
creates a new <dfn data-lt="concept item">item</dfn>, a group of name-value pairs
that describe properties, and their values, of the thing represented by that element.</p>
<hr>
<p>Elements with an <code><a>itemscope</a></code> attribute may have an
<dfn><code>itemtype</code></dfn> attribute specified, to give the
<a>item types</a> of the <a data-lt="concept item">item</a>.</p>
<p>The <code><a>itemtype</a></code> attribute, if specified, must have a value that
is an <a>unordered set of unique space-separated tokens</a> that are
<span>case-sensitive</span>, each of which is a <a>valid absolute
URL</a>, and all of which are in the same vocabulary. The attribute's value must
have at least one token.</p>
<p>The <dfn data-lt="item type">item types</dfn> of an <a data-lt="concept item">item</a> are the tokens obtained
by <a data-lt="split a string on spaces">splitting the element's <code>itemtype</code> attribute's value on spaces</a>.
If the <code><a>itemtype</a></code> attribute is missing or parsing it
in this way finds no tokens, the <a data-lt="concept item">item</a> is said to have no
<a>item types</a>.</p>
<p>The <a>item types</a> determine the <dfn>vocabulary identifier</dfn>. This is a URL
that is prepended to <a>property names</a>, which identifies them as part of their vocabulary.
The value of the vocabulary identifier for an item is determined as follows:</p>
<ul>
<li>Let <var>potential values</var> be an empty array of URLs.</li>
<li>Let <var>tokens</a> be the value of the <a>itemtype</a> attribute, split on spaces.</li>
<li>For each value of <var>tokens</var>: <dl class="switch">
<dt>If there is a NUMBER SIGN Ux0023 ("#") in the value</dt>
<dd>Append the substring of the value from the beginning to the <em>first</em> NUMBER SIGN Ux0023 ("#") to
<var>potential values</var></dd>
<dt>Otherwise, if there is a SOLIDUS Ux002F ("/") in the value</dt>
<dd>Append the substring of the value from the beginning to the <em>last</em> SOLIDUS Ux002F ("/") to
<var>potential values</var></dd>
<dt>Otherwise</dt>
<dd>Append a SOLIDUS Ux002F ("/") to the value, and append the resulting string to <var>potential values</var></dd>
</dl></li>
<li>If there is only one unique value in <var>potential values</value> return that value. Otherwise return the
first item in <var>potential values</var>.</li>
</li>
</ul>
<p>User agents must not automatically dereference <em>unknown</em> <a data-lt="URL">URLs</a> given as <a>item types</a>
and <a>property names</a>. These URLs are <i>a priori</i> opaque identifiers.</p>
<p class="note">A specification could define that its <a>item types</a>
can be derefenced to provide the user with help information. Vocabulary authors are encouraged to provide useful information
at the given <a>URL</a>, either in prose or a formal language such as RDF. User agents are
</p>
<p>The <code><a>itemtype</a></code> attribute must not be specified on elements
that do not have an <code><a>itemscope</a></code> attribute specified.</p>
<hr>
<p>An <a data-lt="concept item">item</a> is said to be a <dfn>typed item</dfn>
when either it has an <a>item type</a>, or it is the
<a data-lt="property value">value</a> of a <a data-lt="item properties">property</a> of a <a>typed item</a>.
The <dfn id="relevant-types">relevant types</dfn> for a <a>typed item</a> is the
<a data-lt="concept item">item</a>'s <a>item types</a>, if it has any,
or else is the <a>relevant types</a> of the <a data-lt="concept item">item</a>
for which it is a <a data-lt="item properties">property</a>'s <a data-lt="property value">value</a>.</p>
<hr>
<p>Elements with both <a>itemscope</a> and <a>itemtype</a> attributes
may also have an <dfn><code>itemid</code></dfn> attribute specified,
to give a global identifier for the <a data-lt="concept item">item</a>,
so that it can be related to other <a data-lt="concept item">items</a> elsewhere on the Web,
or with concepts beyond the Web such as ISBN numbers for published books.</p>
<p>The <code><a>itemid</a></code> attribute, if specified, must have a value that is
a <a>valid URL</a> potentially surrounded by <a>space characters</a>.</p>
<p>The <dfn id="global-identifier">global identifier</dfn> of an <a data-lt="concept item">item</a>
is the value of its element's <code><a>itemid</a></code> attribute, if it has one,
<a data-lt="resolve a url">resolved</a> relative to the element on which the attribute is specified.
If the <code><a>itemid</a></code> attribute is missing or if resolving it fails, it
is said to have no <a>global identifier</a>.</p>
<p>The <code><a>itemid</a></code> attribute must not be specified on elements
that do not have both an <code><a>itemscope</a></code> attribute and an
<code><a>itemtype</a></code> attribute specified.</p>
<hr>
<div class="example">
<p>This example shows a simple vocabulary used to describe the products of a model railway
manufacturer. The vocabulary has just five property names:</p>
<dl>
<dt>product-code</dt>
<dd>A number that identifies the product in the manufacturer's catalog.</dd>
<dt>name</dt>
<dd>A brief description of the product.</dd>
<dt>scale</dt>
<dd>One of "HO", "1", or "Z" (potentially with leading or trailing
whitespace), indicating the scale of the product.</dd>
<dt>digital</dt>
<dd>If present, one of "Digital", "Delta", or "Systems"
(potentially with leading or trailing whitespace) indicating that
the product has a digital decoder of the given type.</dd>
<dt>track-type</dt>
<dd>For track-specific products, one of "K", "M", "C" (potentially
with leading or trailing whitespace) indicating the type of track
for which the product is intended.</dd>
</dl>
<p>This vocabulary has four defined <a>item types</a>:</p>
<dl>
<dt>http://md.example.com/loco</dt>
<dd>Rolling stock with an engine</dd>
<dt>http://md.example.com/passengers</dt>
<dd>Passenger rolling stock</dd>
<dt>http://md.example.com/track</dt>
<dd>Track pieces</dd>
<dt>http://md.example.com/lighting</dt>
<dd>Equipment with lighting</dd>
</dl>
<p>Each <a data-lt="concept item">item</a> that uses this vocabulary can be given one or more
of these types, depending on what the product is.</p>
<p>Thus, a locomotive might be marked up as:</p>
<pre><dl itemscope itemtype="http://md.example.com/loco
http://md.example.com/lighting">
<dt>Name:
<dd itemprop="name">Tank Locomotive (DB 80)
<dt>Product code:
<dd itemprop="product-code">33041
<dt>Scale:
<dd itemprop="scale">HO
<dt>Digital:
<dd itemprop="digital">Delta
</dl></pre>
<p>A turnout lantern retrofit kit might be marked up as:</p>
<pre><dl itemscope itemtype="http://md.example.com/track
http://md.example.com/lighting">
<dt>Name:
<dd itemprop="name">Turnout Lantern Kit
<dt>Product code:
<dd itemprop="product-code">74470
<dt>Purpose:
<dd>For retrofitting 2 <span itemprop="track-type">C</span> Track
turnouts. <meta itemprop="scale" content="HO">
</dl></pre>
<p>A passenger car with no lighting might be marked up as:</p>
<pre><dl itemscope itemtype="http://md.example.com/passengers">
<dt>Name:
<dd itemprop="name">Express Train Passenger Car (DB Am 203)
<dt>Product code:
<dd itemprop="product-code">8710
<dt>Scale:
<dd itemprop="scale">Z
</dl></pre>
<p>Great care is necessary when creating new vocabularies. Often, a hierarchical approach to
types can be taken that results in a vocabulary where each item only ever has a single type,
which is generally much simpler to manage.</p>
</div>
</section>
<section id="names:-the-itemprop-attribute">
<h3>Properties: the <dfn data-lt="attr-itemprop"><code>itemprop</code></dfn> and <a>itemref</a> attributes</h3>
<p>The <a>itemprop</a> attribute, when added to any <a data-lt="HTML elements">HTML element</a>
that is part of an <a>item</a>, identifies a <dfn>property</dfn> of that item.
The attribute must be an <a>unordered set of unique space-separated tokens</a>,
representing the <span>case-sensitive</span> names of the properties that it adds. The
attribute must contain at least one token.</p>
<p>Each token must be either a <a>valid absolute URL</a> or a a string that contains no "." (U+002E) characters
and no ":" (U+003A) characters.</p>
<p>Vocabulary specifications must not define property names for Microdata
that contain "." (U+002E) characters, ":" (U+003A) characters,
nor <a>space characters</a> (defined in [[!HTML52]] as U+0020, U+0009, U+000A, U+000C, and U+000D).</p>
<p>The <dfn data-lt="property name">property names</dfn> of an element are determined as follows:</p>
<ul>
<li>Let <var>tokens</var> be the values of the <a>itemprop</a> attribute,
<a data-lt="split a string on spaces">Split on spaces</a>.</li>
<li>Let <var>properties</var> be an empty array of strings.</li>
<li>For each value of <var>token</var>, in order: <dl class="switch">
<dt>If the value is a repeated occurrence of an earlier value</dt>
<dd>discard it and process the next value</dd>
<dt>If the value is an <a>absolute URL</a></dt>
<dd>append it to <var>properties</var>, then process the next value</dd>
<dt>Otherwise, if the the element is a <a>typed item</a>:</dt>
<dd>Append the value to the <a>vocabulary identifier</a> for the item. If the the resulting value
does not match any value in <var>properties</var>, then append it to <var>properties</var>,
and process the next value.</dd>
<dt>Otherwise</dt>
<dd>append the value to <var>properties</var> and process the next value.</dd>
</dl>
</li>
<li>If <var>properties</var> is not empty, return <var>properties</var>.</li>
</ul>
<p>Within an <a data-lt="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>the properties of an item</a>.</p>
<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>
</div>
<hr>
<p>Elements with an <code><a>itemscope</a></code> attribute may have an
<dfn><code>itemref</code></dfn> attribute specified, to give a list of additional
elements to crawl to find the name-value pairs of the <a data-lt="concept item">item</a>.</p>
<p>The <code><a>itemref</a></code> attribute, if specified, must have a value that
is an <a>unordered set of unique space-separated tokens</a> that are
<span>case-sensitive</span>, consisting of <a>ID</a>s of elements in the same document.</p>
<p>The <code><a>itemref</a></code> attribute must not be specified on elements that
do not have an <code><a>itemscope</a></code> attribute specified.</p>
<div class="example">
<p>The preceding example:</p>
<pre><div itemscope>
<p itemprop="a">1</p>
<p itemprop="a">2</p>
<p itemprop="b">test</p>
</div></pre>
<p>Could also be written as follows:</p>
<pre><div id="x">
<p itemprop="a">1</p>
</div>
<div itemscope itemref="x">
<p itemprop="b">test</p>
<p itemprop="a">2</p>
</div>
</pre>
</div>
<p>When an element with an <code><a>itemprop</a></code> attribute <a data-lt="item properties">adds a property</a>
to multiple <a data-lt="concept item">items</a>, the requirement above regarding the tokens applies for each
<a data-lt="concept item">item</a> individually.</p>
<div class="example">
<p>For the following code:</p>
<pre><code><div itemscope itemtype="http://example.com/a"> <ref itemred="x"> </div>