HTML5: Up and Running

Marking Up Events

Stuff happens. Some stuff happens at predetermined times. Wouldn’t it be nice if you could tell search engines exactly when stuff was about to happen? There’s an angle bracket for that.

Let’s start by looking at a sample schedule of my speaking engagements:

<article>
  <h1>Google Developer Day 2009</h1>
  <img width="300" height="200"
       src="http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg"
       alt="[Mark Pilgrim at podium]">
  <p>
    Google Developer Days are a chance to learn about Google
    developer products from the engineers who built them. This
    one-day conference includes seminars and "office hours"
    on web technologies like Google Maps, OpenSocial, Android,
    AJAX APIs, Chrome, and Google Web Toolkit.
  </p>
  <p>
    <time datetime="2009-11-06T08:30+01:00">2009 November 6, 8:30</time>
      &ndash;
    <time datetime="2009-11-06T20:30+01:00">20:30</time>
  </p>
  <p>
    Congress Center<br>
    5th května 65<br>
    140 21 Praha 4<br>
    Czech Republic
  </p>
  <p><a href="http://code.google.com/intl/cs/events/developerday/2009/home.html">
       GDD/Prague home page</a></p>
</article>

Note

You can follow along online with the changes made throughout this section. Before: http://diveintohtml5.org/examples/event.html; after: http://diveintohtml5.org/examples/event-plus-microdata.html.

All the information about the event is contained within the <article> element, so that’s where we need to put the itemtype and itemscope attributes:

<article itemscope itemtype="http://data-vocabulary.org/Event">

The URL for the Event ...