Bootstrap and Microdata markup for breadcrumb? Issue—extra spaces

Question

This is what Twitter Bootstrap's markup for breadcrumb looks like:

<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
</ol>

Combining Twitter Bootstrap and Microdata markup to make breadcrumbs search engine friendly:

<ol class="breadcrumb">
    <li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="#" itemprop="url">
            <span itemprop="title">Home</span>
        </a>
    </li>
    <li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="#" itemprop="url">
            <span itemprop="title">Library</span>
        </a>
    </li>
    <li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="#" itemprop="url">
            <span itemprop="title">Data</span>
        </a>
    </li>
</ol>

The problem is, if the latter markup is used, I noticed that an extra space is being added before each link in the breadcrumb, as shown in the screenshot below. The same doesn't happen with the original markup.

Here's the related JS Fiddle for the same.

It's not a big deal, but I'd like to know the underlying reason, which I was unable to identify.

PS: Both markups add a space before each link in the breadcrumb.

Answer 1

These spaces are created by line breaks in the HTML.

Related questions:

• About the space and line-break in HTML source code
• Why does the browser renders a newline as space?

Answer 2

The child Attribute needs to be included in second and subsequent list items, per the description of breadcrumbs at Data-Vocabulary.org and in details at Google Rich snippets - Breadcrumbs

<ol> gives me style issues in Orchard CMS front end I use <ul> or use <div> as in Google's, example.

Always close itemscope as itemscope="itemscope".

<ul>
    <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="#" itemprop="url">
            <span itemprop="title">Home</span>
        </a>
    </li>
    <li itemprop="child" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="#" itemprop="url">
            <span itemprop="title">Library</span>
        </a>
    </li>
    <li itemprop="child" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="#" itemprop="url">
            <span itemprop="title">Data</span>
        </a>
    </li>
</ul>