diff options
Diffstat (limited to 'files/ca/web/html/global_attributes/itemprop/index.html')
| -rw-r--r-- | files/ca/web/html/global_attributes/itemprop/index.html | 463 |
1 files changed, 463 insertions, 0 deletions
diff --git a/files/ca/web/html/global_attributes/itemprop/index.html b/files/ca/web/html/global_attributes/itemprop/index.html new file mode 100644 index 0000000000..47e607921a --- /dev/null +++ b/files/ca/web/html/global_attributes/itemprop/index.html @@ -0,0 +1,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> |