Beágyazott elemek

Az entity vagy item információtípusok például jelezhetnek személyt, szervezetet vagy ismertetőt. Egyes elemekben lehetnek más elemek: egy étterem ismertetője például tartalmazhatja a személyi és szervezeti adatokat is, mint az ismertető írójának foglalkozását vagy a vállalkozás székhelyének címét. Ebben az esetben úgy lehet megadni az ilyen típusú adatok közti kapcsolatot, hogy a személlyel és a szervezettel kapcsolatos információkat (az ismertető írójának részletei, ill. a cím részletei) be kell ágyazni az ismertetőbe.

Üzleti adatok felvétele egy ismertetőbe

Ez egy vállalkozás (Vén Diófa étterem) ismertetőjére példa.

<div>
Vén Diófa étterem
Vén Diófa utca 123., Budapest, Pest megye.
<a href="http://pizza.example.com">http://pizza.example.com</a>
Az ismertető írója: Kovács Béla. 
Értékelés: 9/10 (kiváló)
<div>

Ahogy maga az ismertető (amely az író nevét és az értékelést tartalmazza), ez az ismertető is tartalmaz információkat (a vállalkozás nevét és címét) az ismertető témájáról.

A következő szakasz bemutatja, hogyan kell ezt a tartalmat mikroadatok, mikroformátumok vagy RDFa segítségével megjelölni.

Ha ellenőrizni szeretné, hogy a megjelölés helyes-e, illetve szeretné megtekinteni a tartalom keresési eredményekben való várható megjelenésének előnézetét, használja a multimédiás részletek ellenőrzőeszközét.
Mikroadatok

Ez ugyanaz a HTML-kód mikroadatokkal megjelölve:

<div itemscope itemtype="http://data-vocabulary.org/Review">
    <span itemprop="itemreviewed" itemscope itemtype="http://data-vocabulary.org/Organization">
    <span itemprop="name">Vén Diófa étterem</span>
    Helye: 
         <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
         <span itemprop="street-address">Vén Diófa utca 123</span>, 
      <span itemprop="locality">Budapest</span>, 
      <span itemprop="region">BAZ megye</span>.
    </span>
   <a href="http://pizza.example.com" itemprop="url">http://pizza.example.com</a>
  </span>
   Az ismertető írója: <span itemprop="reviewer">Kovács Béla</span>. Értékelés: 
  <span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">           <span itemprop="value">9</span>/
    <span itemprop="best">10</span> (Kiváló)
  </span>
   </div>

Ez a minta a következőképpen működik:

  • Az ismertető tartalmazza az étterem szervezeti adatait, amelyek viszont tartalmazzák a címmel kapcsolatos információkat (itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"), a következő tulajdonságokkal: street-address, locality és region.
  • Emellett ide van beágyazva az értékelés is (itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating").
Mikroformátumok

Egy vcard (szervezet) beágyazásához az ismertetőbe, adja hozzá a vcard tulajdonságot az elem osztálydefiníciójához (például: <div class="item vcard">). Az item és a vcard mindenképpen legyenek ugyanabban a sorban, ilyen sorrendben, szóközzel elválasztva.

<div class="hreview">
   <span class="item vcard">
      <span class="fn">Vén Diófa étterem</span>
      Helye: 
         <span class="adr">
         <span class="street-address">Vén Diófa utca 123.</span>, 
         <span class="locality">Budapest</span>,
         <span class="region">Pest megye</span>.
      </span>
   <a href="http://pizza.example.com" class="url">http://pizza.example.com</a>
      </span>
   Az ismertető írója: 
   <span class="reviewer">Kovács Béla</span>. 
   Értékelés: 
  <span class="rating">           <span class="value">9</span>/
      <span class="best">10</span> (Kiváló)
   </span>
   </div>

Ez a minta a következőképpen működik:

  • Az első sorban a class="hreview" azt jelzi, hogy a <div> címkék közé zárt HTML egy ismertetőt ír le.
  • A második sorban lévő class="item vcard" azt jelzi, hogy a Vén Diófa étterem kapcsolatfelvételi adatai (hCard) is megtalálhatók abban az ismertetőben, amelynek tárgya (item) ez az étterem. (Megjegyzés: a mikroformátum hCard, de a jelölésben úgy jelenik meg, mint vcard. Ez nem elírás.) Az item és a vcard mindenképpen legyenek ugyanabban a sorban, ilyen sorrendben, szóközzel elválasztva.
  • A hCard tulajdonságai az fn (név) és az adr (cím), míg ezek altulajdonságai a street-address, locality és region), valamint az url (az étterem webhelye).
RDFa

Ez ugyanaz a HTML-kód RDFa-val megjelölve:

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review">
   <div rel="v:itemreviewed">
      <span typeof="Organization">   
         <span property="v:name">Vén Diófa étterem</span>
         Helye: 
         <span rel="v:address">
            <span typeof="v:Address">
               <span property="v:street-address">Vén Diófa utca 123.</span>, 
               <span property="v:locality">Budapest</span>, 
               <span property="v:region">Pest megye</span>.
      </span>
   </span>
   <a href="http://pizza.example.com/" rel="v:url">http://pizza.example.com</a>
      </span>
   </div>
   Az ismertető írója: 
   <span property="v:reviewer">Kovács Béla</span>. 
   Értékelés: 
  <span rel="v:rating">
       <span property="v:value">9</span>/
       <span property="v:best">10</span> (Kiváló)
   </span>
   </div>

Ez a minta a következőképpen működik:

  • A példa egy xmlns névtér-deklarációval kezdődik. Ez jelzi a névteret, ahol a szótár (az elemek és komponenseik listája) van megadva. Az xmlns:v="http://rdf.data-vocabulary.org/#" namespace névtér-deklarációt bármikor használhatja, ha oldalakat jelöl meg személyekre, ismertetőkre vagy helyekre vonatkozó adatokkal. A záró per jelet és a #-et ne hagyja le a végéről (xmlns:v="http://rdf.data-vocabulary.org/#" ).
  • A szintén az első sorban található typeof="v:Review" azt jelzi, hogy a megjelölt tartalom egy ismertető.
  • Jelen esetben a el akarjuk helyezni az üzleti adatokat (typeof="v:Organization") a typeof="v:Review" elemben. A rel attribútummal jelöljük a Vén Diófa étterem (a v:itemreviewed elem) és kapcsolatfelvételi adatai (a v:Organization elem) közötti kapcsolatot. Ezután következik a <span typeof="v:Organization"></span> sor, amely az üzlet kapcsolatfelvételi adatainak elemét tartalmazza.

Szervezeti adatok megjelenítése egy eseményben

A következő példa egy koncert, amelyhez meg van adva egy helyszín is.

 
<div>
<a href="http://www.example.com/events/spinaltap">Spinal Tap</a>
Helyszín: Sportcsarnok, Vár utca 982, Szombathely, Vas megye
Időpont: okt. 15., 19:00--21:00
</div>
Mikroadatok

Ez ugyanaz a HTML-kód mikroadatokkal megjelölve:

<div itemscope itemtype="http://data-vocabulary.org/Event">
  ​<a href="http://www.example.com/events/spinaltap" itemprop="url" >
    <span itemprop="summary">Spinal Tap</span>
  </a>
   Helyszín:     <span itemprop="location" itemscope itemtype="http://data-vocabulary.org/​Organization">
     ​<span itemprop="name">Sportcsarnok</span>
     ​<span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
         <span itemprop="street-address">Vár utca 982.</span>, 
         <span itemprop="locality">Szombathely</span>, 
         <span itemprop="region">Vas megye</span>
     </span>
   </span>
   Időpont:    <time itemprop="startDate" datetime="2009-10-15T19:00-08:00">okt. 15., 19:00</time>--
  <time itemprop="endDate" datetime="2009-10-15T21:00-08:00">21:00</time>
</div>

Ez a minta a következőképpen működik:

  • Az esemény kiírása tartalmazza az esemény helyszínének szervezeti adatait. Ebbe beágyazva találhatók a címmel kapcsolatos információk (itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"), a street-address, locality és region tulajdonságokkal.
Mikroformátumok

Ugyanez a tartalom mikroformátumok használatával megjelölve:

 
<div class="vevent">
   <a href="http://www.example.com/events/spinaltap" class="url summary">Spinal Tap</a>
   Helyszín:     <div class="location vcard">
      <span class="fn org">Sportcsarnok</span>
      <span class="adr">
         <span class="street-address">Vár utca 982.</span>, <span class="locality">Szombathely</span>, 
         <span class="region">Vas megye</span>
      </span>
   </div>
   Időpont:    <span class="dtstart">
      <span class="value-title" title="2009-10-15T19:00-08:00">okt. 15., 19:00</span>
   </span>
   <span class="dtend">
      <span class="value-title" title="2009-10-15T21:00-08:00">21:00</span>
  </span>
   </div>

Ez a minta a következőképpen működik:

  • Az első sorban a class="vevent" azt jelzi, hogy a <div> címkék közé zárt HTML egy ismertetőt ír le.
  • A harmadik sorban található class="location vcard" mutatja, hogy kapcsolatfelvételi információkat (vcard) is megadtak az esemény helyszínéhez (location).
  • A negyedik sor tartalma, a class="fn org" jelzi, hogy a vcard egy vállalkozást vagy szervezetet ír le.
  • A vcard tartalmazza a helyszín cím tulajdonságát: adr (cím, amelynek az altulajdonságai a street-address, a locality és a region).
RDFa

Ugyanez a tartalom RDFa-val megjelölve:

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Event"> 
  <a href="http://www.example.com/events/spinaltap" rel="v:url" property="v:summary">Spinal Tap</a>

  Helyszín:     <span rel="v:location">
    <span typeof="v:Organization">
      <span property="v:name">Sportcsarnok</span>,
      <span rel="v:address">
            <span typeof="v:Address">
               <span property="v:street-address">Vár utca 982.</span>, 
          <span property="v:locality">Szombathely</span>, 
          <span property="v:region">Vas megye</span>
        </span>
   </span>
   </span>
   <span rel="v:geo">
        <span typeof="v:Geo">
         <span property="v:latitude" content="37.774929" ></span>
          <span property="v:longitude" content="-122.419416" ></span>
        </span>
   </span>
   </span>
   Időpont:    <span property="v:startDate" content="2009-10-15T19:00-08:00">okt. 15., 19:00</span>—
  <span property="v:endDate" content="2009-10-15T21:00-08:00">21:00</span>
</div>

Ez a minta a következőképpen működik:

  • Az esemény kiírása tartalmazza az esemény helyszínének szervezeti adatait. Ebben találhatók a címmel kapcsolatos beágyazott adatok (<span typeof="v:Address">), a street-address, locality és region tulajdonságokkal.