Search code examples
twitter-bootstrapmetadatamarkupbreadcrumbsmicrodata

Bootstrap and Microdata markup for breadcrumb? Issue—extra spaces

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.

Screenshot

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.

Solution

  • These spaces are created by line breaks in the HTML.

    Related questions: