Html5 Microdata: Span Content

HTML5 microdata: span content?

Yes, this is wrong. Neither Microdata nor HTML5 define a content attribute for the span element.

Several people wanted to use it, see for example the code in these questions:

Hide Microdata property value in 'content' attribute?
Categories for Product in schema.org?
Is the "content" attribute valid for the <span> tag > if so is it a good practice?
schema.org product availability tags markup

I’m not sure where exactly this confusion is coming from.

(It doesn’t help that Google’s Structured Data Testing Tool incorrectly uses the content attribute instead of the element content; but at least all other Microdata parsers seem to do it correctly.)

Maybe some people got confused because RDFa (but not Microdata) defines and allows the content attribute for span. See HTML+RDFa’s Extensions to the HTML5 Syntax:

For the avoidance of doubt, the following RDFa attributes are allowed on all elements in the HTML5 content model: @vocab, @typeof, @property, @resource, @prefix, @content, @about, @rel, @rev, @datatype, and @inlist.

Hide Microdata property value in 'content' attribute?

In HTML5, the content attribute is only allowed on the meta element. Microdata doesn’t define it as global attribute either. But RDFa extends HTML to make content a global attribute.

According to your example, you are using Microdata. So you shouldn’t use the content attribute for span.

Microdata defines a way to add name-value pairs without having to mark up visible content: Microdata extends HTML5 to allow meta and link in body (in the future, this will be defined in the HTML5 spec directly; see the "Contexts in which this element can be used" for link and meta in the HTML 5.1 Editor’s Draft).

So instead of

<span itemprop="name" content="Generic Name Here"></span>

you should use

<meta itemprop="name" content="Generic Name Here" />

For schema.org, see Missing/implicit information: use the meta tag with content:

This technique should be used sparingly. Only use meta with content for information that cannot otherwise be marked up.

Microdata: including span as a child of figure

Try the validator at http://validator.w3.org/nu/, I copy/pasted your fragment and it validated just fine.

HTML5 microdata to show Ratings and like

You can use either one; there is no semantic difference. In fact, if you look at the last example in section 2.2 of the Microdata spec, it gives an example much like yours:

There is no semantic difference, for instance, between the following two examples:

<figure>
 <img src="castle.jpeg">
 <figcaption>
   <span itemscope><span itemprop="name">The Castle</span></span> (1986)
 </figcaption>
</figure>

<span itemscope><meta itemprop="name" content="The Castle"></span>
<figure>
 <img src="castle.jpeg">
 <figcaption>The Castle (1986)</figcaption>
</figure>

microdata without span tag

You can use every HTML5 element for Microdata. But note that some elements have special rules for determining the value, and some elements come with additional requirements if used with Microdata.

If your question is if there is another inline HTML5 element that has no meaning (= span): no, there isn’t.

If your question is how to use span without the applied CSS: add a class to "your" span elements and overwrite any applied CSS with CSS’s class selector:

<span class="never-style-span-directly" itemprop="example">…</span>

CSS:

span {color:blue;}
.never-style-span-directly {color:inherit;}

Can Microdata be applied on any type of HTML element?

Simply put, "Yes". Check out the Google page yourself to see them use it in different tags: https://support.google.com/webmasters/answer/176035?hl=en

Microdata and not all content in same place

Wrap

Yes, you can wrap the whole content in such a div. You could also use the body or html element instead.

<body itemscope itemtype="http://schema.org/LocalBusiness">
  <!-- all "itemprop" in here will belong to this "LocalBusiness",
       unless they are nested under another "itemscope" -->
</body>

`itemref`

Another option is to use the itemref attribute. It allows you to add properties from anywhere on the page to an item.

<div id="a">
  <span itemprop="name">Seattle, WA</span>
  <img itemprop="image" src="img.jpg" alt="Sample Image">
</div>

<div itemscope itemtype="http://schema.org/LocalBusiness" itemref="a b c">
</div>

<span id="b" itemprop="telephone">(123) 456-6789</span>

<div>
  <p id="c" itemprop="description">some description text</p>
</div>

You have to make sure that these referenced properties are not nested under another itemscope, otherwise they get added to this item, too.

Hide

If you need to hide elements for Microdata, use link (for URI values) and meta (for any other string values) elements. These two elements are hidden by default in the browser stylesheets.

<div itemscope itemtype="http://schema.org/LocalBusiness">
  <meta itemprop="name" content="Seattle, WA">
  <link itemprop="image" href="img.jpg">
</div>

Extending schema microdata property

You have two different offers for the product, so you should have two Offer items.

You can specify the condition with the itemCondition property and its values NewCondition / UsedCondition.

Taking your snippet, it could look like:

<div itemscope itemtype="http://schema.org/Product">
    <span itemprop="name">Fifa</span>
    <span itemprop="manufacturer">EA</span>

    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
      <a href="#">Buy at <span itemprop="price">30</span>$</a>
      <meta itemprop="priceCurrency" content="USD" />
      <link itemprop="itemCondition" href="http://schema.org/NewCondition" />
    </div>

    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
      <a href="#">Buy used at <span itemprop="price">25</span>$</a>
      <meta itemprop="priceCurrency" content="USD" />
      <link itemprop="itemCondition" href="http://schema.org/UsedCondition" />
    </div>

</div>

Side notes:

The property is offers, not offer.
The span element can’t have a content attribute in Microdata.

Specifying complex structure with meta tag in Microdata

I think you have two (in some cases three) options using Microdata.

`meta`/`link` + `div`

The most simple solution is to use meta/link elements for properties with non-item values, and div elements for properties with item values.

<section itemscope itemtype="http://schema.org/Article">
  <meta itemprop="keywords" content="kw1, kw2" />
  <div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="My Company" />
  </div>
</section>

meta/link elements are hidden by default, and div elements that contain nothing else than meta/link elements don’t show anything either.

`meta`/`link` + `itemref`

If you don’t want to use div elements, it’s possible to use meta elements for representing an item. But then you have to

provide an empty content attribute (ugly), and
use the itemref attribute for every property you want to add to this item.

<meta itemscope itemprop="publisher" content="" itemtype="https://schema.org/Organization" id="pub" itemref="pub-name" />

<meta itemprop="name" content="My Company" id="pub-name" />

<section itemscope itemtype="http://schema.org/Article" itemref="pub">
  <meta itemprop="keywords" content="kw1, kw2" />
</section>

Note that this does not work for top-level items, because the meta element requires an itemprop attribute (which can’t be empty).

(`meta`/`link` +) `itemid`

In some cases it might be possible to reference URIs for the items (instead of embedding them), e.g., if you have another page that contains the data about the publisher.

However, note that it’s not clear if Google supports this.

<section itemscope itemtype="http://schema.org/Article">
  <meta itemprop="keywords" content="kw1, kw2" />
  <link itemprop="publisher" href="/publisher#this" />
</section>

<!-- on the page /publisher -->

<section itemscope itemtype="http://schema.org/Organization" itemid="#this">
  <h1 itemprop="name">My Company</h1>
</section>

Html5 Microdata: Span Content