Microdata for books

by Alan Dalton published on Dec 18, 2024

Dive into marking up books

Books are the best Christmas presents, especially for us web geeks. (I hope you’ll find a Web Accessibility Cookbook in your Christmas stocking, gentle reader.) Unfortunately, A Book Apart closed this year. Fortunately, the authors reacquired the rights to their books.

To track the authors’ preferred ways of making their books available, I created an “Authors Apart” webpage. For the HTML, I recalled the “‘Distributed,’ ‘Extensibility,’ & Other Fancy Words” chapter of Mark Pilgrim’s seminal Dive Into HTML5, which explains HTML’s microdata features. Mark wrote that article 13 years ago with a focus on Google Rich Snippets, and so I also referred to his unofficial guide to migrating Google Rich Snippets to schema.org and the more recent “Book” schema from Schema.org. Armed with that knowledge, here’s how I structured the HTML for each book to convey the name, URL, author’s name, author’s URL, original publishing date, date when the book was updated (if any), and whether it’s available for free:

<li itemscope itemtype="https://schema.org/Book">
	<div itemprop="name">
		<a itemprop="url" href="https://html5forwebdesigners.com/"><abbr title="HyperText Markup Language">HTML</abbr>5 for Web Designers</a>
	</div>
	<div itemprop="author" itemscope itemtype="https://schema.org/Person">
		<span itemprop="name">
			<a itemprop="url" href="https://adactio.com/">Jeremy Keith</a>
		</span>
	</div>
	<div itemprop="author" itemscope itemtype="https://schema.org/Person">
		<span itemprop="name">
			<a itemprop="url" href="https://x.com/rachelandrew/">Rachel Andrew</a>
		</span>
	</div>
	<time itemprop="datePublished">2010</time>, 
	<time itemprop="dateModified">2016</time>
	<div itemprop="isAccessibleForFree" content="true">🆓</div>
</li>

Why I like this HTML

I like this HTML because it conveys so much programmatically determinable information — check out the structured data! — using only 13 elements, and without compromising accessibility. In 2022’s Modern HTML as a foundation for progressive enhancement, Gaël Poupard asked, “What if we could improve the HTML stack […], making the markup step more resilient?” I consider microdata, like WAI-Aria, a valuable enhancement to HTML.

Mark’s article asked the reader to pay attention to each word in this sentence: “Microdata annotates the DOM with scoped name/value pairs from custom vocabularies.” The annotation is the enhancement: microdata won’t interfere with your usual best practices for HTML, and — as Doug Abrams explained in Mind The (Remediation) Gap — “The vast majority of accessibility lives in the markup.” Getting the name/value pairs right can involve some trial and error, but Mark’s book includes a helpful table that shows where microdata property values come from. You can probably spot those pairs in the HTML above. For example, itemprop="url" and href="https://html5forwebdesigners.com/" specify the URL for the HTML5 for Web Designers book, inside the a element. Notice how nicely this microdata plays with the existing HTML: I was also able to include an abbr element to explain the HTML abbreviation. For whatever content your webpage includes, you can probably find a useful schema in the surprisingly comprehensive full schema hierarchy. Schema.org’s Getting started with schema.org using Microdata is a useful, concise guide, and that site’s validator will instantly show you the structured data that you’ve added to your webpage with microdata.

A brief note on laziness

Christmas is a time for relaxing. Programming Perl names laziness, impatience, and hubris as the three great virtues of a programmer, and this code offers us a good opportunity to practice those. Using microdata schemas from Schema.org means that you probably won’t need to spend time thinking up class names or IDs to use in your CSS; instead, you can just write attribute selectors based on the microdata that you’ve added, like so:

[itemtype="https://schema.org/Book"] > [itemprop="name"] {
font-weight : bold;
font-size : large;
margin-bottom : 1em;
}

How microdata could help your users

I got ahead of myself there; the HTML design principles say to “consider users over authors”. So, here are some ways in which microdata can benefit your users:

Microdata could help users when they search the web

Mark Pilgrim’s “‘Distributed,’ ‘Extensibility,’ & Other Fancy Words” chapter concluded with a hypothetical search result in which the search engine shows not only an excerpt of the text from the webpage, but also some of the microdata that he added. That does seem useful: it lends some credibility to the search result, and so should allow users to more easily find what they’re looking for. This has persisted: Google Search Central’s Introduction to structured data markup in Google Search says that “Adding structured data can enable search results that are more engaging to users and might encourage them to interact more with your website […]”. To prove the point, Google Search Central’s case studies show how well-known organisations have used these techniques to improve search experiences for their users. However, the search engines may or may not show your webpage’s microdata. It doesn’t seem to have happened for my “Authors Apart” webpage yet, and I’m not suprised; Mark qualified his hypothetical example by saying, “And here (modulo the whims of Google, the phase of the moon, and so on and so forth) is what my review might look like in a search result listing”.

Microdata could help users when they use Artificial Intelligence tools

Similarly to Mark’s point about the whims of Google, Jono Alderson’s recent What if Schema.org is just… Labels? describes Google’s use of microdata as feeling “limited, selective, inconsistent, and often frustratingly opaque”. Jono goes on to highlight how the relationships that we define through microdata can help users who use AI tools. Of course, you might not consider this to be a net benefit: Molly White’s AI isn't useless. But is it worth it? weighs up the costs and benefits of these new tools.

Microdata could help your users by making HTML more prevalent

This is my favourite benefit of using microdata, even if it’s indirect. See, personally, I agree with the National Center on Disability and Access to Education’s Principles of Accessible Design when they said in 2007, “HTML is still the most accessible format for almost every type of content”. So, it seems to me that the more we use HTML, the more accessible our content is for our users. My favourite recent example of this is Knut Hühne’s microdata-enhanced HTML Webcomponent for Leaflet. (Leaflet is “an open-source JavaScript library for mobile-friendly interactive maps”.) In a nice piece of progressive enhancement, Knut uses microdata to mark up geographical data from an API, so that basic address information is available to everyone on every browser, and graphical maps are available too.

To quote Mark Pilgrim one more time, “Angle brackets don’t impress me much, but I have to admit, that’s pretty cool.’

About Alan Dalton

Alan Dalton worked for Ireland’s National Disability Authority for 8½ years, mostly as Accessibility Development Advisor. That involved working closely with public sector bodies to make websites, services, and information more accessible to all users, including users with disabilities. More recently, he wrote a trilogy of web accessibility articles for the 24 ways advent calendar: Web Content Accessibility Guidelines—for People Who Haven’t Read Them, Web Content Accessibility Guidelines 2.1—for People Who Haven’t Read the Update, and Future Accessibility Guidelines—for People Who Can’t Wait to Read Them.

Twitter: @RealAlanDalton
Mastodon: @Alan@alpaca.gold
Threads: @RealAlanDalton

More articles