I'm just starting to get my suitcases ready for the HTML5 train and one of the many things on my 'todo' list was to see how I can produce some decent HTML5 markup for Joomla! breadcrumbs.

Since there is (and will be for a long time it seems) a lot of discussion on how should breadcrumb markup be implemented in HTML5, i played safe and went with Google recommendation (not great markup but seems to serve microdata purposes well) for the extra benefit of displaying site hierarchy in SERPs.

So, the produced markup goes like this:

 <nav id="breadcrumb">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.page.com" class="pathway" itemprop="url">
<span itemprop="title">Home</span></a> 
(separator) 
<div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/first-level.html" class="pathway" itemprop="url">
<span itemprop="title">First Level</span></a> 
(separator)
<div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">secont-level
</div>
</div>
</div>
</nav> 

Note that all divs are nested and second+ level gets an itemprop="child".

CSS wise, you'll probably need to do this so that the divs stay inline:

#breadcrumb div {display:inline;}

Let me know what you think.