html5: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
m (→‎microdata: fixed itemref presentation, added example)
(note that problems with microdata and forked nature have not been resolved, provide concrete recommendations and reasons for, note Google Rich Snippets alternate vocab forks)
Line 1: Line 1:
<entry-title>Microformats in HTML 5</entry-title>
<entry-title>Microformats in HTML5</entry-title>


''This page is to document '''future''' use of microformats in [http://www.w3.org/html/wg/html5 HTML 5]. 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.''
''This page is to document '''future''' use of microformats in [http://www.w3.org/html/wg/html5 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 <code>time</code> came to be, for instance.
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 <code>time</code> element came to be, for instance.


==New features in HTML5==
==New features in HTML5==


=== time element ===
=== time element ===
'''<code>time</code> element for representing date times'''. In HTML5, the machine form of datetimes can be represented natively. It should be possible to replace the date-time design pattern with native HTML.
'''<code>time</code> 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.
* <code>time</code> takes an optional <code>pubdate</code> attribute, to indicate the publication date of an <code>article</code>. Synonymous with [[hAtom]] <code>published</code>, may imply [[hAtom]] <code>updated</code>, may imply [[hReview]] <code>dtreviewed</code>, may imply [[hListing]] <code>dtlisted</code>
* <code>time</code> takes an optional <code>pubdate</code> attribute, to indicate the publication date of an <code>article</code>. Synonymous with [[hAtom]] <code>published</code>, may imply [[hAtom]] <code>updated</code>, may imply [[hReview]] <code>dtreviewed</code>, may imply [[hListing]] <code>dtlisted</code>
Note that there are documented [http://wiki.whatwg.org/wiki/Time 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 <strong>date-time-separation</strong> for accessibly marking up dates and times while following the <abbr title="Don't Repeat Yourself">DRY</abbr> [[principle]] as much as possible.


=== article element ===
=== article element ===
'''<code>article</code>''' element for major, independent compositions of content within a page. Perhaps synonymous with [[hAtom]] <code>hentry</code>. Could be parsed as <code>hentry</code> within explicit <code>hfeed</code> blocks?
'''<code>article</code>''' element for major, independent compositions of content within a page. Perhaps synonymous with [[hAtom]] <code>hentry</code>. Could be parsed as <code>hentry</code> within explicit <code>hfeed</code> blocks?


=== data attributes ===
'''<code>data-</code> 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 <em>not</em> 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.
== Additions beyond HTML5 ==
=== microdata ===
=== microdata ===
'''[[microdata]]'''. HTML5 provides a set of attributes and associated DOM APIs for extracting data from web pages.
'''[[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.
* <code>itemprop</code> attribute is a more specific version of <code>class</code>, for field names
* <code>itemprop</code> attribute is a more specific version of <code>class</code>, for field names
* <del><code>subject</code> attribute allows semantically linking within the page. Conceptually similar to the [[include-pattern]].</del>
* <del><code>subject</code> attribute allows semantically linking within the page. Conceptually similar to the [[include-pattern]].</del>
* <code>itemref</code> attribute allows including properties elsewhere on the page that are not descendants of <code>itemscope</code>. Takes space-separated ids (for example <code>itemref="address phone"</code> would include the elements with <code>id="address"</code> and <code>id="phone"</code>). Conceptually similar to the [[include-pattern]].
* <code>itemref</code> attribute allows including properties elsewhere on the page that are not descendants of <code>itemscope</code>. Takes space-separated ids (for example <code>itemref="address phone"</code> would include the elements with <code>id="address"</code> and <code>id="phone"</code>). Conceptually similar to the [[include-pattern]].
* <code>content</code> attribute on the <code>meta</code> element can be used to include data that is not part of the content. As current browsers move <code>meta</code> inside <code>&lt;head&gt;</code>, make sure to include via <code>itemref</code>. Conceptually similar to the [[value-class-pattern]].
* <code>content</code> attribute on the <code>meta</code> element can be used to include invisible data that is not part of the content. As current browsers move <code>meta</code> inside <code>&lt;head&gt;</code>, make sure to include via <code>itemref</code>. Conceptually similar to the 'value-title' feature of the [[value-class-pattern]].
* <code>itemscope</code> attribute identifies blocks to be marked as structured data. Conceptually similar to the [[mfo]] brainstorming?
* <code>itemscope</code> attribute identifies blocks to be marked as structured data. Conceptually similar to the [[mfo]] brainstorming.
* <code>itemtype</code> attribute to specify the type for an item (for example: <code><nowiki>itemtype="http://microformats.org/profile/hcard"</nowiki></code>)
* <code>itemtype</code> attribute to specify the type for an item (for example: <code><nowiki>itemtype="http://microformats.org/profile/hcard"</nowiki></code>)


==== microdata vocabularies ====
=== microdata vocabularies ===
* [http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#vcard microdata vCard] - this is based directly on vCard. Alternatively use Google’s Rich Snippets vocabularies ([http://www.data-vocabulary.org/Person/ Person] and [http://www.data-vocabulary.org/Organization/ Organization]), which are simplified versions also based on vCard
==== microdata vCard vocabulary ====
* [http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#vevent microdata vEvent] - this is based directly on iCalendar. Alternatively use Google’s Rich Snippets vocabulary ([http://www.data-vocabulary.org/Event/ Event]), which is a simplified version also based on iCalendar
Formerly documented as a separate specification at <nowiki>http://dev.w3.org/html5/mdvcard/</nowiki>, the microdata vCard vocabulary is currently available as [http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#vcard part of WHATWG additions to HTML5].
* [http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#licensing-works microdata Licensing Works] - see also [[licensing-brainstorming]]
 
* Recommendation: use [[hCard]] directly instead, taking into account:
** the [[hcard-faq|hCard FAQ]] and
** [[hcard-issues-resolved|resolved]]+[[hcard-issues-closed|closed issues]].
 
hCard 1.0.1 (under development) is incorporating these errata.
 
Using hCard will produce Google Rich Snippets, as well as work with [[yahoo-search]], and [[Firefox]] [[Operator]] and other tools.
 
Note:
* Avoid the "microdata vCard vocabulary" as in many ways it is an out-of-date fork/snapshot of hCard, even though portions of it appear to based directly on the vCard RFC. as well.
* Avoid Google’s Rich Snippets vocabularies ([http://www.data-vocabulary.org/Person/ Person] and [http://www.data-vocabulary.org/Organization/ Organization]), which are also forks of  hCard/vCard, and are only implemented by Google currently.
 
==== microdata vEvent vocabulary ====
Formerly documented as a separate specification at <nowiki>http://dev.w3.org/html5/mdvevent/</nowiki>, the microdata vEvent vocabulary is currently available as [http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#vevent part of WHATWG additions to HTML5].
 
* Recommendation: use [[hCalendar]] directly instead, taking into account:
** the [[hcalendar-faq|hCalendar FAQ]] and
** [[hcalendar-issues-resolved|resolved]]+[[hcalendar-issues-closed|closed issues]].
 
hCalendar 1.0.1 (under development) is incorporating these errata. 
 
Using hCalendar will produce Google Rich Snippets, as well as work with [[yahoo-search]], and [[Firefox]] [[Operator]] and other tools.
 
Note:
* Avoid the "microdata vEvent vocabulary" as in many ways it is an out-of-date fork/snapshot of hCalendar's vevent root class name and applicable properties, though portions of it even though portions of it appear to based directly on the iCalendar RFC.
* Avoid Google’s Rich Snippets vocabulary ([http://www.data-vocabulary.org/Event/ Event]), which is also a fork of hCalendar/iCalendar, and are only implemented by Google currently.
 
==== microdata Licensing Works vocabulary ====
Formerly documented as a separate specification at <nowiki>http://dev.w3.org/html5/mdwork/</nowiki>, the microdata Licensing Works vocabulary is currently available as [http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#licensing-works part of WHATWG additions to HTML5].
 
The [[licensing]] microformat work provides a potential microformat alternative to the microdata Licensing Works vocabulary.
 
Please see: [[licensing-brainstorming]] and provide feedback.


=== data attributes ===
'''<code>data-</code> 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 <em>not</em> 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.


== Current microformat compatibility ==
== Current microformat compatibility ==

Revision as of 03:28, 13 July 2010

<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.

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.

Additions beyond HTML5

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.

  • itemprop attribute is a more specific version of class, for field names
  • subject attribute allows semantically linking within the page. Conceptually similar to the include-pattern.
  • itemref attribute allows including properties elsewhere on the page that are not descendants of itemscope. Takes space-separated ids (for example itemref="address phone" would include the elements with id="address" and id="phone"). Conceptually similar to the include-pattern.
  • content attribute on the meta element can be used to include invisible data that is not part of the content. As current browsers move meta inside <head>, make sure to include via itemref. Conceptually similar to the 'value-title' feature of the value-class-pattern.
  • itemscope attribute identifies blocks to be marked as structured data. Conceptually similar to the mfo brainstorming.
  • itemtype attribute to specify the type for an item (for example: itemtype="http://microformats.org/profile/hcard")

microdata vocabularies

microdata vCard vocabulary

Formerly documented as a separate specification at http://dev.w3.org/html5/mdvcard/, the microdata vCard vocabulary is currently available as part of WHATWG additions to HTML5.

hCard 1.0.1 (under development) is incorporating these errata.

Using hCard will produce Google Rich Snippets, as well as work with yahoo-search, and Firefox Operator and other tools.

Note:

  • Avoid the "microdata vCard vocabulary" as in many ways it is an out-of-date fork/snapshot of hCard, even though portions of it appear to based directly on the vCard RFC. as well.
  • Avoid Google’s Rich Snippets vocabularies (Person and Organization), which are also forks of hCard/vCard, and are only implemented by Google currently.

microdata vEvent vocabulary

Formerly documented as a separate specification at http://dev.w3.org/html5/mdvevent/, the microdata vEvent vocabulary is currently available as part of WHATWG additions to HTML5.

hCalendar 1.0.1 (under development) is incorporating these errata.

Using hCalendar will produce Google Rich Snippets, as well as work with yahoo-search, and Firefox Operator and other tools.

Note:

  • Avoid the "microdata vEvent vocabulary" as in many ways it is an out-of-date fork/snapshot of hCalendar's vevent root class name and applicable properties, though portions of it even though portions of it appear to based directly on the iCalendar RFC.
  • Avoid Google’s Rich Snippets vocabulary (Event), which is also a fork of hCalendar/iCalendar, and are only implemented by Google currently.

microdata Licensing Works vocabulary

Formerly documented as a separate specification at http://dev.w3.org/html5/mdwork/, the microdata Licensing Works vocabulary is currently available as part of WHATWG additions to HTML5.

The licensing microformat work provides a potential microformat alternative to the microdata Licensing Works vocabulary.

Please see: licensing-brainstorming and provide feedback.


Current microformat compatibility

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

Requests

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)
  • 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

Retrieved from "http://microformats.org/wiki/index.php?title=html5&oldid=42829"