A set of examples for flexibly marking up dates and times in microformats (such as hCalendar and hAtom), using up-to-date patterns.

µf-datetime.html

<!-- The different ways of marking up dates and times with microformats -->
<!-- Microformats are quite flexible when it comes to marking up dates in valid
     HTML4. The value-class-pattern allows you to mark-up different parts of the
     date, providing tool-tip context or nesting the data silently alongside a 
     custom format.

     Date formatting in microformats no-longer requires using the `<abbr>`
     element. -->

<!-- Core requirement for dates in microformats: The date must be available in an
     ISO8601 form: `YYYY-MM-DDTHH:MM:SS±TZTZ`, e.g `2010-01-19T13:09:00-0800`
     Sub-parts of a full ISO8601 date are also valid, such as a date without a
     time: `YYYY-MM-DD`, e.g. `2010-01-19`.

     Millisecond accuracy and timezone are also optional.
-->

<!-- The spec and full detail for these examples are documented in the 
     value-class-pattern: <http://microformats.org/wiki/value-class-pattern> -->

<!-- Example 1. Simplest form: An ISO-compatible date: -->

<p>The party will be on <span class="dtstart">2010-02-13</span>.</p>

<!-- Example 2. An ISO-compatible date and time, using value-separation -->
<!-- `class="value"` child elements are combined together by a parser, to create a 
     full ISO date-time string -->

<p>The party will be on 
    <span class="dtstart">
        <span class="value">2010-02-13</span> 
        at <span class="value">20:00</span>
    </span>
</p>

<!-- Example 3. A custom-formatted date, using the value-class-pattern -->
<!-- A child element with `class="value-title"` tells the parser to use the 
     `title` attribute of the element, rather than the inner-text.

     In this case, the ISO YYYY-MM-DD date format is displayed as a tooltip over
     "Saturday", to provide added context to the reader.
 -->

<p>The party is going to be on 
    <span class="dtstart">
        <span class="value-title" title="2010-01-13">Saturday</span>
    </span>
</p>

<!-- Example 4. A custom formatted date and time, using the value-class pattern and
     value separation. -->
<!-- As in #3, but with the date and time separated -->

<p>The party is going to be on 
    <span class="dtstart">
        <span class="value-title" title="2010-01-13">Saturday</span>
        at <span class="value-title" title="20:00">8pm</span>
    </span>
</p>

<!-- Example 5. A full, custom formatted date and time, using the value-class 
     pattern and an embedded ISO date. -->
<!-- In a situation where you don't want the ISO date exposed at all (neither
     visibly in the page, or in contexts where separated tooltips are 
     inappropriate), you can use this pattern to include the ISO string alongside
     your formatted date and time -->
<!-- An empty <span></span> element will not be rendered to the page or exposed to
     screen readers.
     If using this pattern, you *must* include the `class='value-title'` span
     *before* the custom formatted version, so that the data value is kept close to
     the `dtstart` property name. -->

<p>The party is going to be on 
    <span class="dtstart">
        <span class="value-title" title="2010-01-13T20:00:00-0800"></span>
        Saturday at 8pm
    </span>
</p>