Microdata, HTML5 - deep hierarchical structure of data

[wojckr]

Hello!

I found many examples with Microdata, but (all?) they show 2-dimension structure of data.

And what about deeper hierarchical structure of data?

I show it with this example:

Code: Select all

<article
   itemscope=""
   itemtype="http://example.com/voc/family"
>
   <header>
      <h1 itemprop="family-name">Chopin</h1>
      <p itemprop="desc">Great family of Chopin!</p>
   </header>
   <ul>
      <li>
         <article
            id="person-1"
            itemprop="person"
            itemscope=""
            itemtype="http://example.com/voc/person"
            itemref="person-2 person-3"
         >         
            <header>
               <h1 itemprop="name">Frederic</h1>
            </header>
            <section>
               <p>Birth year: <time itemprop="birth-year">1850</time></p>
               <p>His passion was <span itemprop="hobby">piano</span></p>               
            </section>
         </article>
         <ul>
            <li>
               <article
                  id="person-2"
                  itemprop="person"
                  itemscope=""
                  itemtype="http://example.com/voc/person"                  
                  itemref="person-5"
               >
                  <header>
                     <h1 itemprop="name">Janek</h1>
                  </header>
                  <section>                     
                     <p>Birth year: <time itemprop="birth-year">1875</time></p>
                     <p>His hobby was <span itemprop="hobby">photography</span>.</p>
                  </section>
               </article>
               <ul>
                  <li>
                     <article
                        id="person-5"
                        itemprop="person"
                        itemscope=""
                        itemtype="http://example.com/voc/person"
                     >                     
                        <header>
                           <h1 itemprop="name">Ewa</h1>
                        </header>
                        <section>                           
                           <p>Birth year: <time itemprop="birth-year">1901</time></p>
                           <p>Her hobby was <span itemprop="hobby">chemistry</span>.</p>                        
                        </section>                        
                     </article>                     
                  </li>
               </ul>
            </li>
            <li>
               <article
                  id="person-3"
                  itemprop="person"
                  itemscope=""
                  itemtype="http://example.com/voc/person"
                  itemref="person-4"
               >
                  <header>
                     <h1 itemprop="name">Franek</h1>
                  </header>
                  <section>
                     <p>Birth year: <time itemprop="birth-year">1877</time></p>
                     <p>He liked <span itemprop="hobby">chemistry</span> very much.</p>                     
                  </section>
               </article>
               <ul>
                  <li>
                     <article
                        id="person-4"
                        itemprop="person"
                        itemscope=""
                        itemtype="http://example.com/voc/person"
                     >
                        <header>
                           <h1 itemprop="name">Basia</h1>
                        </header>
                        <section>
                           <p>Birth year: <time itemprop="birth-year">1899</time></p>
                           <p>She loved <span itemprop="hobby">astronomy</span>.</p>         
                        </section>
                     </article>                     
                  </li>
               </ul>
            </li>            
         </ul>
      </li>
   </ul>
</article>

I'm confused, because of how converts my data this (great actually) app:
http://foolip.org/microdatajs/live/ - "Live Microdata" app converted my example and returned this JSON:

Code: Select all

{
  "items":[{
      "type":"http://example.com/voc/family",
      "properties":{
        "surname":["Chopin"
        ],
        "desc":["Great family of Chopin!"
        ],
        "person":[{
            "type":"http://example.com/voc/person",
            "properties":{
              "name":["Frederic"
              ],
              "birth-year":["1850"
              ],
              "hobby":["piano"
              ],
              "person":[{
                  "type":"http://example.com/voc/person",
                  "properties":{
                    "name":["Janek"
                    ],
                    "birth-year":["1875"
                    ],
                    "hobby":["photography"
                    ],
                    "person":[{
                        "type":"http://example.com/voc/person",
                        "properties":{
                          "name":["Ewa"
                          ],
                          "birth-year":["1901"
                          ],
                          "hobby":["chemistry"
                          ]
                        }
                      }
                    ]
                  }
                },
                {
                  "type":"http://example.com/voc/person",
                  "properties":{
                    "name":["Franek"
                    ],
                    "birth-year":["1877"
                    ],
                    "hobby":["chemistry"
                    ],
                    "person":[{
                        "type":"http://example.com/voc/person",
                        "properties":{
                          "name":["Basia"
                          ],
                          "birth-year":["1899"
                          ],
                          "hobby":["astronomy"
                          ]
                        }
                      }
                    ]
                  }
                }
              ]
            }
          },
          {
            "type":"http://example.com/voc/person",
            "properties":{
              "name":["Janek"
              ],
              "birth-year":["1875"
              ],
              "hobby":["photography"
              ],
              "person":[{
                  "type":"http://example.com/voc/person",
                  "properties":{
                    "name":["Ewa"
                    ],
                    "birth-year":["1901"
                    ],
                    "hobby":["chemistry"
                    ]
                  }
                }
              ]
            }
          },
          {
            "type":"http://example.com/voc/person",
            "properties":{
              "name":["Ewa"
              ],
              "birth-year":["1901"
              ],
              "hobby":["chemistry"
              ]
            }
          },
          {
            "type":"http://example.com/voc/person",
            "properties":{
              "name":["Franek"
              ],
              "birth-year":["1877"
              ],
              "hobby":["chemistry"
              ],
              "person":[{
                  "type":"http://example.com/voc/person",
                  "properties":{
                    "name":["Basia"
                    ],
                    "birth-year":["1899"
                    ],
                    "hobby":["astronomy"
                    ]
                  }
                }
              ]
            }
          },
          {
            "type":"http://example.com/voc/person",
            "properties":{
              "name":["Basia"
              ],
              "birth-year":["1899"
              ],
              "hobby":["astronomy"
              ]
            }
          }
        ]
      }
    }
  ]
}

Returned JSON object is not exactly my family-object (item). Persons and family trees are duplicated. That's why I'm not sure, if I used Microdata properly for my family item.

My question:
Is Microdata OK for deep hierarchical structure of data or not?

Thank You for every answer.

Wojtek

[boblet]

Hey Wojtek,

I’m not sure I understand your example, because I don’t know the family genealogy of Chopin
http://en.wikipedia.org/wiki/Fr%C3%A9d%C3%A9ric_Chopin

Are you trying to show family relations in your example? Please say what you expect the result to look like, describe your vocabulary, or use a real vocabulary to make things clearer.

The reason you’re getting person and family tree duplication is because you’re using itemref to import other items. I’m guessing you want to create relationships, but neither a nested list nor itemref do this. You would need to add something like <p>He was <span itemprop="father">Frederick</span>’s son</p>, then build the relationships that way.

peace - oli

PS your code would be better without the <section> elements in the list, and you don’t need the <header> wrappers in the list either

[wojckr]

Hey boblet, the family in my post is exemplary.

I want to show any family tree and annotate it using Microdata, which is discovered for such things also, I suppose.

http://foolip.org/microdatajs/live/ returned what You can see in my first post. And here the result I expect:

Code: Select all

{
  "items":[{
      "type":"http://example.com/voc/family",
      "properties":{
        "family-name":["Chopin"],
        "desc":["Great family of Chopin!"],
        "person":[{
            "type":"http://example.com/voc/person",
            "properties":{
              "name":["Frederic"],
              "birth-year":["1850"],
              "hobby":["piano"],
              "person":[{
                  "type":"http://example.com/voc/person",
                  "properties":{
                    "name":["Janek"],
                    "birth-year":["1875"],
                    "hobby":["photography"],
                    "person":[{
                        "type":"http://example.com/voc/person",
                        "properties":{
                          "name":["Ewa"],
                          "birth-year":["1901"],
                          "hobby":["chemistry"]
                        }
                      }
                    ]
                  }
                },
                {
                  "type":"http://example.com/voc/person",
                  "properties":{
                    "name":["Franek"],
                    "birth-year":["1877"],
                    "hobby":["chemistry"],
                    "person":[{
                        "type":"http://example.com/voc/person",
                        "properties":{
                          "name":["Basia"],
                          "birth-year":["1899"],
                          "hobby":["astronomy"]
                        }
                      }
                    ]
                  }
                }
              ]
            }
          }
        ]
      }
    }
  ]
}