Meta tag breaking HTML validation when using it with schema.org breadcrumblist

Question

I am using the breadcrumb list from schema.org. They state that we need to use a meta tag to specify the order of the items.

• It breaks my HTML validation, is there any other way of specifying order?
• The meta tag is adding a space before the word Brands

Here is my markup:

<ol class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="/">
      <span itemprop="name">My Website</span>
    </a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="active">
    <span itemprop="item">
      <span itemprop="name">Brands</span>
    </span>
    <meta itemprop="position" content="2" />
  </li>
</ol>

The output would look like this:

My Website / Brands

Answer 1

Your snippet is valid HTML5 (the meta element may appear in the body if used for Microdata, which is the case in your example).

Using the meta element is the correct choice if you don’t want to display the value. You may place it anywhere inside the ListItem (e.g., on the same line next to the link or name, to omit creating whitespace).

Note that you don’t have to use the position property. Schema.org never requires any properties.