HTML Microdata - Event Markup

- edited | 0 comments | website development html5 css3 york

For the 2013 Central Hall Musical Society's production of West Side Story, I was invited to design and make the website to allow registration, cast audition bookings and ticket sales. I used the Foundation CSS and JavaScript framework along with a jazzy font from Google called Alfa Slab One.

There were 2 main things I added in differently to this site compared to the 2 I had previously developed for the Central Hall Society. The first one was from a design perspective, and the the second was microdata.

CSS3 Transformation Animation

For the teams pictures, I added in a CSS3 transform that titled their heads at an angle, where on hover the angle changed giving a slight spin appearance. This was done with a few CSS declarations.

figure img{
  -webkit-transform: rotate(353deg);
  -webkit-transition: all 1s ease;
  -ms-transform: rotate(353deg);
  -ms-transition: all 1s ease;
  -o-transform: rotate(353deg);
  -o-transition: all 1s ease;
  -moz-transform: rotate(353deg);
  -moz-transition: all 1s ease;
  transform: rotate(353deg);
  transition: all 1s ease;

figure img:hover {
  -webkit-transform: rotate(355deg);
  -ms-transform: rotate(355deg);
  -o-transform: rotate(355deg);
  -moz-transform: rotate(355deg);
  transform: rotate(355deg);
HTML Microdata

After writing up the markup and adding the CSS to match the design, I looked at exposing the event data to search engines via microdata.

By adding directly to the existing HTML markup, I was able to identify the event type, the performer, the location and the date.

<section class="row" itemprop="event" itemscope itemtype="http://schema.org/TheaterEvent">
<header class="eight columns">
<h6><span itemprop="performer">The <span itemprop="location">University of York</span> Central Hall Musical Society</span> presents</h6>
<h1 itemprop="name" style="text-transform:uppercase">West Side Story</h1>
<article class="four columns">
<h2>Week 5, Spring Term</h2>
<h5 itemprop="startDate" content="2013-02-07">Thursday 7th</h5>
<h5>Friday 8th</h5>
<h5 itemprop="endDate" content="2013-02-09">Saturday 9th</h5>
<h4>February 2013</h4>

When the search engine robots index the page, they should be able to pull out the data and use this to provide more relevant results. Google provide a tool to test the end result.

Search result as it appears in Google with event date and location

It was very interesting to see all the types of different things you can markup and expose data for, a list is on the schema.org site.