Creating a semantic breadcrumb using HTML5 microdata

gistfile1.html

<!-- http://coderwall.com/p/p0nvjw?i=5&p=1&q= -->
<ol class="breadcrumb">
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="http://www.example.com/" itemprop="url">
            <span itemprop="title">Example.com</span>
        </a>
    </li>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="http://www.example.com/news" itemprop="url">
            <span itemprop="title">News</span>
        </a>
    </li>  
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="http://www.example.com/news/news-story.1" itemprop="url">
            <span itemprop="title">News Story 1</span>
        </a>
    </li>
</ol>