HTML5 Microdata and CSS

Posted on 26.07.11

2



Consider this piece of HTML:

<dl class="person">
    <dt>Name</dt>
    <dd class="name">Knut Kristian Johansen</dd>
    <dt>Gender</dt>
    <dd class="gender">Male</dd>
    <dt>Job title</dt>
    <dd class="jobTitle">senior system developer</dd>
</dl>

and this CSS:

dl.person > dd.name
{
    font-size: 120%;
}
dl.person > dd.gender
{
    color: gray;
}
dl.person > dd.jobTitle
{
    font-weight: bold;
}

Lets add some HTML5 Microdata using the person schema:

<dl class="person" itemscope itemtype="http://schema.org/Person">
    <dt>Name</dt>
    <dd class="name" itemprop="name">Knut Kristian Johansen</dd>
    <dt>Gender</dt>
    <dd class="gender" itemprop="gender">Male</dd>
    <dt>Job title</dt>
    <dd class="jobTitle" itemprop="jobTitle">senior system developer</dd>
</dl>

We end up duplicating metadata. We now both say that the name dd is of class name and that it is a microdata name property. Duplication is something to avoid. Lets remove the classes:

<dl itemscope itemtype="http://schema.org/Person">
    <dt>Name</dt>
    <dd itemprop="name">Knut Kristian Johansen</dd>
    <dt>Gender</dt>
    <dd itemprop="gender">Male</dd>
    <dt>Job title</dt>
    <dd itemprop="jobTitle">senior system developer</dd>
</dl>

But now we lost our styling! How can we get our styling back without duplicating metadata? Lets change our CSS so that we take advantage of the microdata:

dl[itemtype="http://schema.org/Person"] > dd[itemprop="name"]
{
    font-size: 120%;
}
dl[itemtype="http://schema.org/Person"] > dd[itemprop="gender"]
{
    color: gray;
}
dl[itemtype="http://schema.org/Person"] > dd[itemprop="jobTitle"]
{
    font-weight: bold;
}

Summary:

If you add both classes and microdata to your elements you may end up with duplicate metadata. To avoid this remove the classes and use the microdata in your CSS selectors.

What do you think about this technique?

References, recommended readings and tools:

Advertisements
Posted in: Uncategorized