Flag of Sweden
Andreas Rejbrand’s Website

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:

Rendering of the above hypertext and style

You can investigate the semantic markup yourself using the demo.


Show all news items.

Only show the most recent news items.