Arrange parent and child order in schema.org Microdata

Question

According to 'http://schema.org/docs/full.html'

Article, WebPage, WebPageElement are in the same level.

WPSideBar is child of WebPageElement.

Now, should I add child under parent or is this code is correct?

<div itemscope itemtype="http://schema.org/WPSideBar">

    <div itemscope itemtype="http://schema.org/Article">
    </div>

    <div itemscope itemtype="http://schema.org/Article">
    </div>

    <div itemscope itemtype="http://schema.org/Article">
    </div>

<div>

Answer 1

Your code is fine.

The hierarchy doesn’t matter in that sense (it has other purposes). You can use whichever types you want (you should respect Schema.org’s expected types, though).

A simple example: A MedicalScholarlyArticle (which is a type pretty deep in the hierarchy: Thing > CreativeWork > Article > ScholarlyArticle > MedicalScholarlyArticle) can reference (i.e., include as child) a Thing (which is the super type of everything):

<div itemscope itemtype="http://schema.org/MedicalScholarlyArticle">
  <span itemprop="about" itemscope itemtype="http://schema.org/Thing">The whole universe.</span>
</div>

---

However, note that in your specific example, the "children" items are not related to the parent item. They only happen to be nested under this item, but there is no property that connects them. So Microdata parsers won’t recognize that there is a parent/children relation, it’s "flat" for them:

WPSideBar
Article
Article
Article

If you’d use a property (for example about), parsers would recognize the relationship:

WPSideBar
    about Article
    about Article
    about Article

Answer 2

You can add parent elements, from the tree perspective inside child elements.

So, for instance your example is valid, of course it need some more items, but it would be OK. I did a little test with the next code and it's recognised properly

<div itemscope itemtype="http://schema.org/WPSideBar">
    <meta itemprop="name" content="lateral_section" />
    <div itemscope itemtype="http://schema.org/Article">
        <p itemprop="name">title of article</p>
        by <p itemprop="author">author name</p>
    </div>
    <div itemscope itemtype="http://schema.org/Article">
        <p itemprop="name">title of article</p>
        by <p itemprop="author">author name</p>
    </div>
    <div itemscope itemtype="http://schema.org/Article">
        <p itemprop="name">title of article</p>
        by <p itemprop="author">author name</p>
    </div>
<div>