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
|
---
title: itemprop
slug: Web/HTML/Global_attributes/itemprop
tags:
- Attribute
- Global attribute
- HTML
- Reference
translation_of: Web/HTML/Global_attributes/itemprop
---
<div>{{HTMLSidebar("Global_attributes")}}</div>
<p>L'atribut global <strong>itemprop</strong> s'utilitza per afegir propietats a un element. Cada element HTML pot tenir un atribut itemprop especificat, i un itemprop es compon d'un parell nom-valor. Cada parell nom-valor es denomina <strong>propietat</strong>, i un grup d'una o més propietats constitueix un <strong>element</strong>. Els valors de propietat són una cadena o una adreça URL i es poden associar amb una gamma molt àmplia d'elements incloent {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}}, and {{HTMLElement("video")}}.</p>
<h2 id="Exemples">Exemples</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div itemscope itemtype ="http://schema.org/Movie">
<h1 <strong>itemprop="name"</strong>>Avatar</h1>
<span>Director: <span <strong>itemprop="director"</strong>>James Cameron</span> (born August 16, 1954)</span>
<span <strong>itemprop="genre"</strong>>Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" <strong>itemprop="trailer"</strong>>Trailer</a>
</div></pre>
<h3 id="Estructuració_de_les_dades"><span class="short_text" id="result_box" lang="ca"><span>Estructuració de les dades</span></span></h3>
<table class="standard-table">
<tbody>
<tr>
<td colspan="1" rowspan="2"> </td>
<th colspan="2" rowspan="1"><strong>Item</strong></th>
</tr>
<tr>
<th><strong>itemprop name</strong></th>
<th><strong>itemprop value</strong></th>
</tr>
<tr>
<td>itemprop</td>
<td>name</td>
<td>Avatar</td>
</tr>
<tr>
<td>itemprop</td>
<td>director</td>
<td>James Cameron</td>
</tr>
<tr>
<td>itemprop</td>
<td>genre</td>
<td>Science fiction</td>
</tr>
<tr>
<td>itemprop</td>
<td>trailer</td>
<td>../movies/avatar-theatrical-trailer.html</td>
</tr>
</tbody>
</table>
<h2 id="Propietats">Propietats</h2>
<p>Les propietats tenen valors que són una cadena o un URL. Quan un valor de cadena és una adreça URL, s'expressa mitjançant l'element i el seu atribut href, l'element img i el seu atribut src, o altres elements que tenen enllaços o que incoproran recursos externs.</p>
<h4 id="Tres_propietats_amb_valors_que_són_cadenes"><span class="short_text" id="result_box" lang="ca"><span>Tres</span> <span>propietats amb</span> <span>valors</span> <span>que són</span> <span>cadenes</span></span></h4>
<pre class="brush: html"><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>
<h4 id="Una_propietat_image_el_valor_del_qual_és_una_adreça_URL">Una propietat, "image", el valor del qual és una adreça URL</h4>
<pre class="brush: html"><div itemscope>
<img itemprop="image" src="google-logo.png" alt="Google">
</div></pre>
<p>Quan un valor de cadena no pot ser fàcilment llegit i comprès per una persona (per exemple, una cadena llarga de números i lletres), aquest es pot visualitzar utilitzant l'atribut value de l'element data, aquesta versió és més fàcil d'entendre per un humà ja que determina el contingut dels elements (que no forma part de les dades estructurades - vegeu l'exemple següent).</p>
<h4 id="Un_element_amb_una_propietat_el_valor_de_la_qual_és_un_ID_de_producte._L'ID_no_és_humanament_amistós_pel_que_el_nom_del_producte_s'utilitza_el_text_per_a_ser_humanament_visible_en_lloc_del_ID.">Un element amb una propietat el valor de la qual és un ID de producte. L'ID no és humanament amistós, pel que el nom del producte s'utilitza el text per a ser humanament visible en lloc del ID.</h4>
<pre class="brush: html"><h1 itemscope>
<data itemprop="product-id" value="9678AOU879">The Instigator 2000</data>
</h1></pre>
<p>Per les dades numèriques, l'element meter i el seu atribut value es poden utilitzar.</p>
<h4 id="Un_exemple_de_l'element_meter">Un exemple de l'element meter</h4>
<pre class="brush: html"><div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Panasonic White 60L Refrigerator</span>
<img src="panasonic-fridge-60l-white.jpg" alt="">
<div itemprop="aggregateRating"
itemscope itemtype="http://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>
<p>De la mateixa manera, per les dades relacionades amb la data i hora , l'element time i el seu atribut datetime es poden utilitzar.</p>
<h4 id="En_aquest_exemple_l'element_té_una_propietat_birthday_el_valor_de_la_qual_és_una_date.">En aquest exemple, l'element té una propietat, "birthday", el valor de la qual és una date.</h4>
<pre class="brush: html"><div itemscope>
I was born on <time itemprop="birthday" datetime="2009-05-10">May 10th 2009</time>.
</div></pre>
<p>Les propietats també poden ser grups de parells nom-valor, posant l'atribut itemscope en l'element que es declara la propietat. Cada valor és una cadena o un grup de parells nom-valor (és a dir, un element).</p>
<h4 id="En_aquest_exemple_l'element_exterior_representa_una_persona_i_la_interior_representa_una_banda"><span id="result_box" lang="ca"><span>En aquest</span> <span>exemple</span><span>, l'element</span> <span>exterior representa</span> <span>una persona,</span> <span>i la interior</span> <span>representa una</span> <span>banda</span></span></h4>
<pre class="brush: html"><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>L'element exterior superior té dues propietats, "name" i "band". El "name" és "Amanda", i la "band" és un element en si mateix, amb dues propietats, "name" i "size". El "name" de la banda és "Jazz Band", i la "size" és "12". L'element exterior en aquest exemple és un element microdata de nivell superior. Els elements que no formen part dels altres s'anomenen elements microdata de nivell superior.</p>
<h4 id="Aquest_exemple_és_el_mateix_que_l'anterior_però_totes_les_propietats_són_separades_dels_seus_elements">Aquest exemple és el mateix que l'anterior, però totes les propietats són separades dels seus elements</h4>
<pre class="brush: html"><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>Això dóna el mateix resultat que l'exemple anterior. El primer element té dues propietats, "name", té asignat "Amanda" i "band", té asignat un altre element. Aquest segon element té dues propietats addicionals, "name" té assignat "Jazz Band", i "size ", té assignat "12".</p>
<p><span id="result_box" lang="ca"><span>Un element</span> <span>pot</span> <span>tenir diverses</span> <span>propietats amb</span> <span>el mateix</span> <span>nom</span> <span>i diferents</span> <span>valors.</span></span></p>
<h4 id="Aquest_exemple_descriu_un_gelat_amb_dos_sabors"><span class="short_text" id="result_box" lang="ca"><span>Aquest exemple</span> <span>descriu</span> <span>un gelat</span><span>, amb dos</span> <span>sabors</span></span></h4>
<pre class="brush: html"><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>Això dóna com a resultat un element amb dues propietats, ambdues amb el nom "flavor" i amb els valors "Lemon sorbet" i "Apricot sorbet" .</p>
<p>Un element que introdueix una propietat també pot introduir múltiples propietats a la vegada, per evitar la duplicació quan algunes de les propietats tenen el mateix valor.</p>
<h4 id="Aquí_veiem_un_element_amb_dues_propietats_favorite-color_i_favorite-fruit_ambdues_establertes_en_el_valor_orange">Aquí veiem un element amb dues propietats, "favorite-color" i "favorite-fruit", ambdues establertes en el valor "orange"</h4>
<pre class="brush: html"><div itemscope>
<span itemprop="favorite-color favorite-fruit">orange</span>
</div></pre>
<div class="note">
<p>Nota: No hi ha relació entre els microdata i el contingut del document, on els microdata son marcats.</p>
</div>
<h4 id="No_hi_ha_cap_diferència_semàntica_entre_els_dos_exemples_següents"><span id="result_box" lang="ca"><span>No hi ha</span> <span>cap diferència</span> <span>semàntica</span> <span>entre els</span> <span>dos exemples</span> <span>següents</span></span></h4>
<pre class="brush: html"><figure>
<img src="castle.jpeg">
<figcaption><span itemscope><span itemprop="name">The Castle</span></span> (1986)</figcaption>
</figure></pre>
<pre class="brush: html"><span itemscope><meta itemprop="name" content="The Castle"></span>
<figure>
<img src="castle.jpeg">
<figcaption>The Castle (1986)</figcaption>
</figure></pre>
<p>Tots dos tenen una figura amb un títol, i tots dos, sense cap relació amb la figura, té un element amb un parell nom-valor amb el nom "name" i el valor "The Castle". L'única diferència és que si l'usuari arrossega el figcaption fora del document, l'element serà inclos en les dades d'arrossegar i deixar anar. No s'inclourà la imatge associada amb l'element.</p>
<h2 id="Noms_i_valors">Noms i valors</h2>
<p>Una propietat és un conjunt desordenat de símbols únics que són sensibles i representen els parells de nom-valor. El valor de la propietat ha de tenir almenys un símbol. En el següent exemple, cada cel·la de dades és un símbol.</p>
<h3 id="Exemples_Noms">Exemples Noms</h3>
<table class="standard-table">
<thead>
<tr>
<th colspan="1" rowspan="2" scope="col"> </th>
<th colspan="2" rowspan="1" scope="col">Item</th>
</tr>
<tr>
<th scope="col">itemprop <strong>name</strong></th>
<th scope="col">itemprop <strong>value</strong></th>
</tr>
</thead>
<tbody>
<tr>
<th>itemprop</th>
<td>country</td>
<td>Ireland</td>
</tr>
<tr>
<th>itemprop</th>
<td>Option</td>
<td>2</td>
</tr>
<tr>
<th>itemprop</th>
<td>https://www.flickr.com/photos/nlireland/6992065114/</td>
<td>Ring of Kerry</td>
</tr>
<tr>
<th>itemprop</th>
<td>img</td>
<td>https://www.flickr.com/photos/nlireland/6992065114/</td>
</tr>
<tr>
<th>itemprop</th>
<td>website</td>
<td>flickr</td>
</tr>
<tr>
<th>itemprop</th>
<td>(token)</td>
<td>(token)</td>
</tr>
</tbody>
</table>
<p>Els tokens són cadenes o URL's. Un element es denomina un <strong>element escrit ( typed item )</strong> si és un URL. Altrament, és una cadena. Les cadenes no poden contenir un punt o dos punts (vegeu més endavant).</p>
<ol>
<li>Si l'element és un element escrit aquest ha de ser:
<ol>
<li>Un nom de propietat definida, o</li>
<li>Una URL vàlida, que es refereix a la definició del vocabulari, o</li>
<li>Una URL vàlida que s'usa com un nom de propietari propietat de l'element (és a dir, no està definit en una especificació pública), o</li>
</ol>
</li>
<li>Si l'element no és un element escrit aquest ha de ser:
<ol>
<li>Una cadena que no conté caràcters "." (U+002E FULL STOP) i sense caràcters ":" (U+003A COLON) i s'usa com un nom de propietat d'element propietari (de nou, no s'ha definit en una especificació pública).</li>
</ol>
</li>
</ol>
<p class="note"><strong>Nota:</strong> les regles anteriors no permeten caràcters ":" en valors no URL, perquè en cas contrari no podien distingir-se de les URLs. Els valors amb caràcters "." estan reservats per a futures ampliacions. Els caràcters d'espai no es permeten perquè en cas contrari els valors serien analitzats com múltiples símbols.</p>
<h2 id="Valors">Valors</h2>
<p>El valor de la propietat d'un parell nom-valor es dóna per al primer cas coincident de la llista següent:</p>
<ul>
<li>Si l'element té un atribut <strong>itemscope</strong>
<ul>
<li><span id="result_box" lang="ca"><span>El valor és</span> <span>l'<strong>item</strong></span> <span>creat</span> <span>per l'element</span><span>.</span></span> .</li>
</ul>
</li>
<li><span id="result_box" lang="ca"><span>Si l'element</span> <span>és un</span> <span>element</span></span> <strong>meta</strong>
<ul>
<li>El valor és el valor de l'atribut <strong>content</strong> de l'element</li>
</ul>
</li>
<li><span id="result_box" lang="ca"><span>Si l'element</span> <span>és un</span> <span>element</span></span> <strong>audio</strong>, <strong>embed</strong>, <strong>iframe</strong>, <strong>img</strong>, <strong>source</strong>, <strong>track</strong> o <strong>video</strong>
<ul>
<li>El valor és la cadena URL resultant que resulta d'analitzar el valor de l'atribut src de l'element en relació amb el document node (part de <a href="https://developer.mozilla.org/en-US/docs/Web/API/Microdata_DOM_API">Microdata DOM API</a>) de l'element en el moment en què s'estableix l'atribut</li>
</ul>
</li>
<li><span id="result_box" lang="ca"><span>Si l'element</span> <span>és un</span> <span>element</span></span> <strong>a</strong>, <strong>area</strong> o <strong>link</strong>
<ul>
<li>El valor és la cadena URL resultant que resulta d'analitzar el valor de l'atribut href de l'element en relació amb el document node de l'element en el moment que s'estableix l'atribut</li>
</ul>
</li>
<li><span id="result_box" lang="ca"><span>Si l'element</span> <span>és un</span> <span>element</span></span> <strong>object</strong>
<ul>
<li>El valor és la cadena URL resultant que resulta d'analitzar el valor de l'atribut data de l'element en relació amb el document node de l'element en el moment que s'estableix l'atribut</li>
</ul>
</li>
<li><span id="result_box" lang="ca"><span>Si l'element</span> <span>és un</span> <span>element</span></span> <strong>data</strong>
<ul>
<li>El valor és el valor de l'atribut value de l'element</li>
</ul>
</li>
<li><span id="result_box" lang="ca"><span>Si l'element</span> <span>és un</span> <span>element</span></span> <strong>meter </strong>
<ul>
<li>El valor és el valor de l'atribut <strong>value</strong> de l'element</li>
</ul>
</li>
<li><span id="result_box" lang="ca"><span>Si l'element</span> <span>és un</span> <span>element</span></span> <strong>time </strong>
<ul>
<li>El valor és el valor <strong>datetime</strong> de l'element</li>
</ul>
</li>
</ul>
<p><span class="short_text" id="result_box" lang="ca"><span>D'una altra manera</span></span></p>
<ul>
<li><span class="short_text" id="result_box" lang="ca"><span>El valor és</span> <strong><span>textContent</span></strong> <span>de l'element.</span></span></li>
</ul>
<p>Si el valor d'una propietat és un URL, la propietat s'haurà d'especificar mitjançant un element de propietat URL. Els elements de la propietat URL són els elements <strong>a</strong>, <strong>area</strong>, <strong>audio</strong>, <strong>embed</strong>, <strong>iframe</strong>, <strong>img</strong>, <strong>link</strong>, <strong>object</strong>, <strong>source</strong>, <strong>track</strong> i <strong>video</strong>.</p>
<h3 id="Ordre_dels_noms">Ordre dels noms</h3>
<p>Els noms estan desordenats respecte a l'altra, però si un nom en particular té diversos valors, tenen un ordre relatiu.</p>
<h4 id="En_el_següent_exemple_la_propietat_a_té_els_valors_1_i_2_en_aquest_ordre_però_si_la_propietat_a_ve_abans_que_la_propietat_b_o_no_no_és_important">En el següent exemple, la propietat "a" té els valors "1" i "2", en aquest ordre, però si la propietat "a" ve abans que la propietat "b" o no, no és important</h4>
<pre class="brush: html"><div itemscope>
<p itemprop="a">1</p>
<p itemprop="a">2</p>
<p itemprop="b">test</p>
</div></pre>
<h4 id="El_següent_és_equivalent"><span class="short_text" id="result_box" lang="ca"><span>El següent</span> <span>és</span> <span>equivalent</span></span></h4>
<pre class="brush: html"><div itemscope>
<p itemprop="b">test</p>
<p itemprop="a">1</p>
<p itemprop="a">2</p>
</div></pre>
<h4 id="Com_és_el_següent"><span class="short_text" id="result_box" lang="ca"><span>Com és el</span> <span>següent</span></span></h4>
<pre class="brush: html"><div itemscope>
<p itemprop="a">1</p>
<p itemprop="b">test</p>
<p itemprop="a">2</p>
</div></pre>
<h4 id="I_el_següent"> <span class="short_text" id="result_box" lang="ca"><span>I el</span> <span>següent</span></span></h4>
<pre class="brush: html"><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>
<h2 id="Altres_exemples">Altres exemples</h2>
<h3 id="HTML_2">HTML</h3>
<pre class="brush: html"><dl itemscope itemtype="http://vocab.example.net/book" itemid="urn:isbn:0-330-34032-8">
<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>
<h3 id="Estructuració_de_les_dades_2"><span class="short_text" id="result_box" lang="ca"><span>Estructuració de les dades</span></span></h3>
<table class="standard-table">
<tbody>
<tr>
<td colspan="1" rowspan="14">itemscope</td>
<td>itemtype: itemid</td>
<td colspan="2" rowspan="1">http://vocab.example.net/book: urn:isbn:0-330-34032-8</td>
</tr>
<tr>
<td>itemprop</td>
<td>title</td>
<td>The Reality Dysfunction</td>
</tr>
<tr>
<td>itemprop</td>
<td>author</td>
<td>Peter F. Hamilton</td>
</tr>
<tr>
<td>itemprop</td>
<td>pubdate</td>
<td>1996-01-26</td>
</tr>
</tbody>
</table>
<h3 id="Resultat">Resultat</h3>
<p>{{EmbedLiveSample('HTML_2', '', '', '', 'Web/HTML/Global_attributes/itemprop')}}</p>
<h2 id="Especificacions">Especificacions</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificació</th>
<th scope="col">Estat</th>
<th scope="col">Comentari</th>
</tr>
<tr>
<td><code><a href="https://html.spec.whatwg.org/multipage/microdata.html#names:-the-itemprop-attribute:names:-the-itemprop-attribute">itemprop</a></code></td>
<td> </td>
<td>WG Nota - <span class="short_text" id="result_box" lang="ca"><span>Ja</span> <span>no s'està</span> <span>desenvolupant</span> <span>activament</span></span></td>
</tr>
</tbody>
</table>
<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suport bàsic</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suport bàsic</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
<h2 id="Veure">Veure</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">Altres atributs globals diferents</a></li>
<li>Altres atributs globals relacionats amb microdata:
<ul>
<li>{{htmlattrxref("itemid")}}</li>
<li>{{htmlattrxref("itemprop")}}</li>
<li>{{htmlattrxref("itemref")}}</li>
<li>{{htmlattrxref("itemscope")}}</li>
<li>{{htmlattrxref("itemtype")}}</li>
</ul>
</li>
</ul>
</div>
</div>
|