Web design: Microdata (for books)
The last months I have been considering adding semantic annotation to my web site, but I have not been sure about the choice of technique (microdata, RDFa, or microformats). I eventually chose microdata. (However, I am still not convinced that microdata is the best option.)
Today I added the first microdata to this site. I chose to start by annotating the list of books in my personal ‘library’ using the http://schema.org/Book vocabulary. (My understanding is that schema.org is the de facto first choice of vocabulary. And it is great if we all speak the same language.) So, the old markup,
<ul>
[...]
<li>Bondy, J.A.; Murty, U.S.R. (2008). Graph Theory. Springer (Graduate Texts in Mathematics),
United Kingdom (2010). ISBN 978-1-84628-969-9 (Hardcover) (English) (651 pages)<br/>
<em>A very nice, comprehensive, and detailed book on graph theory.</em></li>
[...]
</ul>
has been replaced by
<ul>
[...]
<li itemscope="" itemtype="http://schema.org/Book">
<p>
<span itemprop="author" itemscope="" itemtype="http://schema.org/Person">
<span itemprop="familyName">Bondy</span>,
<span itemprop="givenName">J.A.</span>
</span>;
<span itemprop="author" itemscope="" itemtype="http://schema.org/Person">
<span itemprop="familyName">Murty</span>,
<span itemprop="givenName">U.S.R.</span>
</span>
(<time itemprop="dateCreated">2008</time>).
<cite itemprop="name">Graph Theory</cite>.
<span itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
<span itemprop="name">Springer</span>
</span>,
<span itemprop="isPartOf" itemscope="" itemtype="http://schema.org/CreativeWork">
<span itemprop="name">Graduate Texts in Mathematics</span>
</span>
(<span itemprop="position">244</span>).
United Kingdom (2010).
ISBN <span itemprop="isbn">978-1-84628-969-9</span>
(<span itemprop="bookFormat">Hardcover</span>)
(<meta itemprop="inLanguage" content="en" />English)
(<span itemprop="numberOfPages">651</span> pages)
</p>
<p class="comment">A very nice, comprehensive, and detailed book on graph theory.</p>
</li>
[...]
</ul>
I also updated the style to
/* (Global stylesheet) */
[itemprop=isbn] {
font-family: monospace;
}
/* Books, movies, etc. */
p.comment {
padding-left: 2em;
}
p.comment:before {
content: "\1f4ac";
color: #AEAD71;
padding-right: 0.5em;
}
The result:
You can investigate the semantic markup yourself using the demo.