html5

<entry-title>Microformats in HTML5</entry-title>

This page is to document future use of microformats in HTML5. None of the items documented are supported now, and may change upon proper development within the microformats community, or changes in the HTML 5 specification. This page is to track HTML5 enabled enhancements to microformats, and issues that HTML5 raises. It may be used to track issues which we need to push back into the HTML 5 development process.

If there are things that microformats would like to mark up that aren't handled by HTML5 explicitly, please let the WHATWG know, so we can improve HTML5. This is how the time element came to be, for instance.

New features in HTML5

time element

time element for representing date times. In HTML5, the machine form of datetimes can be represented natively. In some cases it may be possible to replace the date-time design pattern with native HTML5.

• time takes an optional pubdate attribute, to indicate the publication date of an article. Synonymous with hAtom published, may imply hAtom updated, may imply hReview dtreviewed, may imply hListing dtlisted

Note that there are documented limitations in the time element. Please add additional opinions and use cases to that wiki page so that we can help improve the time element.

• Recommendation: Use the value-class-pattern, in particular preferably date-time-separation for accessibly marking up dates and times while following the DRY principle as much as possible.

• HTML::Microformats and its predecessors have supported the time element since July 2008.

• Try http://dev.h2vx.com/ (the beta version of H2VX) as it now has preliminary support for <time datetime> as well as the new semantic HTML5 elements.

hCalendar with time element

Here is the hCalendar spec example updated to use section instead of div, and time instead of abbr.

<section class="vevent">
 <a class="url" href="http://conferences.oreillynet.com/pub/w/40/program.html">
  http://conferences.oreillynet.com/pub/w/40/program.html
 </a>
 <span class="summary">Web 2.0 Conference</span>: 
 <time class="dtstart" datetime="2005-10-05">October 5</time>-
 <time class="dtend" datetime="2005-10-07">7</time>,
 at the <span class="location">Argent Hotel, San Francisco, CA</span>
</section>

article element

article element for major, independent compositions of content within a page. Perhaps synonymous with hAtom hentry. Could be parsed as hentry within explicit hfeed blocks?

data attributes

data- naming convention for tag attributes. the draft specification states that any attribute that starts with "data-" will be treated as a storage area for private data.

• Note that the data-* stuff is explicitly not for microformats. Those attributes are defined in such a way that browsers will never do anything special with them, ever. They are intended for script authors to have a space in which they can play without ever clashing with anything the browser does. There may be some cases of private poshformats that are never intended for interchange that may be used in data-* attributes.

new semantic elements

HTML5 has numerous new semantic elements.

Most microformats parsers probably won't recognize those elements and may ignore them - so avoid using microformats classes on new HTML5 semantic elements for anything in production.

HOWEVER, do try experimenting with microformats and new semantic HTML5,

AND try http://dev.h2vx.com/ (the beta version of H2VX) as it now has preliminary support for the new semantic HTML5 elements as well as <time datetime>.

Additions beyond HTML5

microdata

Main article: microdata

microdata is an extension to HTML5 that provides a set of attributes and associated DOM APIs for semantically marking up and extracting data from existing content in web pages, similar to microformats but with new attributes.

Current microformat compatibility

There seems to be no issue with current implementation of the following microformats in HTML 5:

• hcard
• xfn

Requests

• "how to use with HTML5" sections that include (a) microformats examples that use HTML5, and (b) microformats parsing details that specify what to do (if anything special is required) with HTML5 elements (e.g. how to parse the time element for dates and times for microformats). See (and add to if necessary) :
  • hCard brainstorming - how to use with HTML5
  • hCalendar brainstorming - how to use with HTML5 e.g. hCalendar with the time element
  • citation brainstorming - how to use with HTML5
  • if nothing special is required for HTML5, then after performing the analysis, that should be noted as well, for the purpose of clarity.

Issues

• The rev attribute has been removed. In HTML5, rel and rev are no-longer paired, and the rel attribute nolonger describes the direction of a relationship. Microformats which use rev will need to use rel instead.
  • Or something like data-rev="vote-for"
    • As above, data- attributes are for application-context functionality, not shared vocabularies. Further, the HTML5 specification makes rel the correct attribute to use, regardless of direction, through the changed specification. --BenWard 17:53, 12 May 2009 (UTC)
  • This is incorrect. rel is still directional, with the same semantic it has always had - If X has a link to Y with REL, then the relationship is X REL Y. rev has been removed, but that only means that relationships with opposite implication should be defined when necessary. That is, for every 'authoredBy' rel, there can be an 'authorOf' rel describing the opposite relation, if such a thing is necessary. TabAtkins 18:41, 31 January 2011 (UTC)
• The profile attribute has been removed. In HTML, the profile attribute from the head has been removed, with no direct replacement. This causes issues for GRDDL support. It's been suggested that profile URLs be represented in link elements instead, or even as a custom HTTP header. See grddl and profile-uris
  • See rel-profile which is the replacement for the profile attribute. Tantek 23:24, 5 November 2009 (UTC)
• Microdata itemprop duplicates class data. the new attribute itemprop is designed to hold some meaningful data about an element, but class already exists to hold this data. Unsure of reasons why itemprop required?
  • This is because microdata is designed to be generically parsable, even when the parser does not understand the vocabulary. As such, property names have to be on an explicit attribute, not shared with other, non-data classnames. --BenWard 21:12, 4 September 2009 (UTC)
• The recommended removal of the colon in timezone doesn’t validate The relevant uF wiki text is “However the colons ":" separating the hours and minutes of any timezone offset are optional and discouraged in order to make it less likely that a timezone offset will be confused for a time.” ref: HTML5 time microsyntax for <time> --Oli 14:40, 14 February 2010 (+9)

see also

• HTML3