Search code examples
htmlschema.orgmicrodatahtml-heading

h1, h2, h3 around Microdata markup

I'm trying to add Microdata markup (using Schema.org) to a page. At the moment, the code looks like this:

<div itemscope itemtype="http://schema.org/Product">
    <div class="primary">
        <div itemprop="brand" itemscope itemtype="http://schema.org/Brand">
            <span itemprop="name">Acme Co</span>
        </div>
        <h4 itemprop="name">Blue Widget</h4>
    </div>
</div>

However, what I want to do is change the h4 from "Blue Widget" to "Acme Co Blue Widget". I already have the company name encapsulated by the Brand type so I don't want to repeat it on the page. Here's what I'm thinking.

Possible solution

<div itemscope itemtype="http://schema.org/Product">
    <h4 class="primary">
        <span itemprop="brand" itemscope itemtype="http://schema.org/Brand">
            <span itemprop="name">Acme Co</span>
        </span>
        <span itemprop="name">Blue Widget</span>
    </h4>
</div>

It's not a question of whether the Microdata/Schema.org markup will be valid (I can test that), but will the header be read by browsers as I want it - "Acme Co Blue Widget"? I'm unsure with all the Schema.org stuff going on.

Solution

  • Yes, that’s fine.

    The heading elements h1-h6 can contain phrasing content (which includes span). As span elements are meaningless, these h4 are semantically equivalent:

    <h4>Foobar</h4>

    <h4><span>Fo<span>o</span>bar</span></h4>

    The Microdata attributes don’t change the HTML semantics.

    An alternative to your solution would be to use the meta element (but there is no need to use this alternative if you are happy with your solution):

    <div itemscope itemtype="http://schema.org/Product">
  <span itemprop="brand" itemscope itemtype="http://schema.org/Brand">
    <meta itemprop="name" content="Acme Co" />
  </span>
  <h4 itemprop="name" class="primary">Acme Co Blue Widget</h4>
</div>