Recap
In my previous article HTML5, Microdata, and Rich Snippets I wrote about (among other things) Microdata and how I started to use it on my site.
At least one of the things I wrote in that article was completely wrong.
isPartOf and hasPart
In the previous article I completely misunderstood how isPartOf works.
It now seems so simple. Each list item is to have an itemprop isPartOf making it part of the parent CollectionPage. Each section is to have an itemprop of isPartOf making it a part of the parent (page encompassing) CollectionPage.
John Cook. isPartOf CollectionPage. In HTML5, Microdata, and Rich Snippets.
It doesn't mean that at all. That is the meaning of hasPart. By using isPartOf I am essentially saying that the CollectionPage is a child of (and belongs to) the list items.
The best way of explaining this is through some code.
…
<body itemscope itemtype="https://schema.org/WebPage">
<link itemprop="breadcrumb" href="#breadcrumb">
<main>
<article itemprop="mainEntity" itemscope itemtype="https://schema.org/BlogPosting">
…
<nav role="navigation">
<ul itemid="#breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList" class="breadcrumbs" aria-label="breadcrumbs">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/" class="fi-home" itemprop="item"><span itemprop="name">Home</span></a><meta itemprop="position" content="1"></li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/blogs" class="fi-pencil" itemprop="item"><span itemprop="name">Blogs</span></a><meta itemprop="position" content="2"></li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/blogs/website" class="fi-bookmark" itemprop="item"><span itemprop="name">Website</span></a><meta itemprop="position" content="3"></li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/blogs/website/html5-microdata" class="fi-link"><span itemprop="name">HTML5, Microdata, and Rich Snippets</span></a><meta itemprop="position" content="4"></li>
</ul>
</nav>
<meta itemprop="mainEntityOfPage" content="https://web.johncook.uk/blogs/website/html5-microdata-getting-it-wrong-part-2">
<aside id="social-links"></aside>
</div>
<div itemprop="articleBody">
…
<pre itemprop="hasPart" itemscope itemtype="http://schema.org/Code"><code itemprop="text" data-language="html"><section itemscope itemtype="http://schema.org/CollectionPage"></code></pre>
…
<nav role="navigation" class="top-bar">
<div class="top-bar-left">
<ul class="horizontal dropdown menu">
<li itemprop="isPartOf" itemscope itemtype="https://schema.org/WebSite" class="hide-for-small-only"><a itemprop="url" href="https://web.johncook.uk/" class="fi-home"><span itemprop="name">John Cook UK</span></a></li>
</ul>
</div>
…
Microdata is not only about "what this is" but also about "how this relates to that".
In this code example the body element has an itemscope of WebPage. The BreadcrumbList cannot directly have an itemprop of breadcrumb because it is, semantically speaking, a child of BlogPosting.
The way around that is to give the BreadcrumbList an itemid, and then create a link element as a child of WebPage and point it's href at that itemid.
Now that breadcrumb is semantically a child of WebPage, let's tackle WebSite.
To say a WebPage is a child of a WebSite, I am using itemscope WebPage isPartOf itemscope WebSite.
Where I got confused and as a result used isPartOf incorrectly throughout the site is this: I was thinking about the HTML and not the Microdata. Some Microdata itemprops (like isPartOf) infer the item is a parent, whereas others (like hasPart and breadcrumb) infer the item is a child.
isPartOf and hasPart are the generic way of inferring relationships. While an ImageObject inside an ImageGallery could have an itemprop of hasPart
The Semantic Web
HTML5 and Microdata are gradually making the Web more semantic, although I expect most of those using schema.org are only doing so because search engines are using it.
For example, Google and Bing can display breadcrumbs, so sites have started making their breadcrumbs more semantic. I have just switched this site from using data-vocabulary.org to schema.org for breadcrumbs because Google now suggests using Schema.
I don't know how close we'll get to the idea of a fully semantic Web, but we do appear to be gradually heading in that direction.