Microformats Wiki - User contributions [en]

microformats2-parsing

2016-10-20T18:02:13Z

Zearin: Add code markup to make the rendered doc more readable

<entry-title>microformats2 parsing specification</entry-title>
<dfn style="font-style:normal;font-weight:bold">[[microformats2]]</dfn> is a simple, open format for marking up data in HTML. The microformats2 parsing specification describes how to [[#implementations|implement]] a microformats2 parser, independent of any specific vocabularies.

;<span id="status">Status</span>
:This is a '''Living Specification''' with several interoperable [[#implementations|implementations]]. This specification is stable, subject to editorial changes only for improving clarity of existing meaning. While substantive changes are unexpected, it is a living specification subject to substantive change by issues and errata filed in response to implementation experience, requiring consensus among participating implementers (since 2015-01-21) as part of an explicit [[#change_control|change control]] process. There are currently no draft or proposed new features in this specification, and if any were to be added, they would be explicitly labeled as such.<br/>Note: This specification is only marked as a "Draft Specification" because of pending edits from [[microformats2-parsing-issues|resolved issues before 2016-06-20]]. Once those edits have been completed, the link to <nowiki>[[Category:Draft Specifications]]</nowiki> at the bottom of this document should be changed to <nowiki>[[Category:Specifications]]</nowiki>.
;Participate
:[https://github.com/microformats/microformats2-parsing/issues Open Issues]
:[[microformats2-parsing-issues|Resolved issues before 2016-06-20]]
:[[IRC]]: [irc://irc.freenode.net/microformats #microformats on Freenode]
<div class="p-author h-card vcard">
;<span class="p-role role">Editor</span>
:<span class="p-name fn">[[User:Tantek|Tantek Çelik]]</span>
</div>
;License
: {{cc0-owfa-license}}
__TOC__
== algorithm ==
=== parse a document for microformats ===
To parse a document for microformats, follow the HTML parsing rules and do the following:
* start with an empty JSON "items" array and "rels" & "rel-urls" hashes:
<source lang=javascript>
{
"items": [],
"rels": {},
"rel-urls": {}
}
</source>
* parse the root element for class microformats, adding to the JSON items array accordingly
* parse all hyperlink (<code><a> <area> <link></code>) elements for rel microformats, adding to the JSON rels & rel-urls hashes accordingly
* return the resulting JSON
Parsers may simultaneously parse the document for both class and rel microformats (e.g. in a single tree traversal).

=== parse an element for class microformats ===
To parse an element for class microformats:
* parse element class for root class name(s) "h-*" and if none, backcompat root classes
** if none found, parse child elements for microformats (depth first, doc order)
** else if found, start parsing a new microformat
*** keep track of whether the root class name(s) was from backcompat
*** create a new { } structure with:
**** <code>type: <nowiki>[array of microformat "h-*" type(s) on the element]</nowiki>,</code>
**** <code>properties: { } </code> - to be filled in when that element itself is parsed for microformats properties
*** parse child elements (document order) by:
**** if parsing a backcompat root, parse child element class name(s) for backcompat properties
**** else parse a child element class for property class name(s) "p-*,u-*,dt-*,e-*"
**** if such class(es) are found, it is a property element
***** add properties found to current microformat's <code>properties: { } </code> structure
**** parse a child element for microformats (recurse)
***** if that child element itself has a microformat ("h-*" or backcompat roots) and is a property element, add it into the array of values for that property as a { } structure, add to that { } structure:
****** <code>value</code>:
******* if it's a <code>p-*</code> property element, use the first p-name of the h-* child
******* else if it's an <code>e-*</code> property element, re-use its { } structure with existing <code>value:</code> inside.
******* else if it's a <code>u-*</code> property element and the h-* child has a u-url, use the first such u-url
******* else use the parsed property value per p-*,u-*,dt-* parsing respectively
***** else add found elements that are microformats to the "children" array
*** imply properties for the found microformat (see below)

The "*" for root (and property) class names consists only of lowercase a-z and '-' characters.

=== parse an element for properties ===

==== parsing a <code>p-</code> property ====

To parse an element for a <code>p-x</code> property value (whether explicit <code>p-*</code> or backcompat equivalent):

* Parse the element for the [[value-class-pattern]]. If a value is found, return it.
* If <code>abbr.p-x[title]</code>, return the <code>title</code> attribute.
* else if <code>data.p-x[value]</code> or <code>input.p-x[value]</code>, then return the <code>value</code> attribute
* else if <code>img.p-x[alt]</code> or <code>area.p-x[alt]</code>, then return the <code>alt</code> attribute
* else return the <code>textContent</code> of the element after:
** dropping any nested <code><script></code> & <code><style></code> elements;
** replacing any nested <code><img></code> elements with their <code>alt</code> attribute, if present; otherwise their <code>src</code> attribute, if present, adding a space at the beginning and end, resolving any relative URLs, and removing all leading/trailing whitespace.

==== parsing a <code>u-</code> property ====

To parse an element for a <code>u-x</code> property value (whether explicit <code>u-*</code> or backcompat equivalent):

* if <code>a.u-x[href]</code> or <code>area.u-x[href]</code>, then get the <code>href</code> attribute
* else if <code>img.u-x[src]</code> or <code>audio.u-x[src]</code> or <code>video.u-x[src]</code> or <code>source.u-x[src]</code>, then get the <code>src</code> attribute
* else if <code>video.u-x[poster]</code>, then get the <code>poster</code> attribute
* else if <code>object.u-x[data]</code>, then get the <code>data</code> attribute
* if there is a gotten value, return the normalized absolute URL of it, following the containing document's language's rules for resolving relative URLs (e.g. in HTML, use the current URL context as determined by the page, and first <code><base></code> element, if any).
* else parse the element for the [[value-class-pattern]]. If a value is found, return it.
* else if <code>abbr.u-x[title]</code>, then return the <code>title</code> attribute
* else if <code>data.u-x[value]</code> or <code>input.u-x[value]</code>, then return the <code>value</code> attribute
* else return the <code>textContent</code> of the element after removing all leading/trailing whitespace and nested <code><script></code> & <code><style></code> elements.

==== parsing a <code>dt-</code> property ====

To parse an element for a <code>dt-x</code> property value (whether explicit <code>dt-*</code> or backcompat equivalent):

* parse the element for the [[value-class-pattern]], including the date and time parsing rules. If a value is found, then return it.
* if <code>time.dt-x[datetime]</code> or <code>ins.dt-x[datetime]</code> or <code>del.dt-x[datetime]</code>, then return the <code>datetime</code> attribute
* else if <code>abbr.dt-x[title]</code>, then return the <code>title</code> attribute
* else if <code>data.dt-x[value]</code> or <code>input.dt-x[value]</code>, then return the <code>value</code> attribute
* else return the <code>>textContent</code>> of the element after removing all leading/trailing whitespace and nested <code><script></code> & <code><style></code> elements.

==== parsing an <code>e-</code> property ====
To parse an element for a <code>e-x</code> property value (whether explicit "<code>e-*"</code> or backcompat equivalent):

* return a dictionary with two keys:
** <code>html</code>: the <code>innerHTML</code> of the element by using the [https://html.spec.whatwg.org/multipage/syntax.html#serialising-html-fragments HTML spec: Serializing HTML Fragments algorithm], with leading/trailing whitespace removed.
** <code>value</code>: the <code>textContent</code> of the element, replacing any nested <code><img></code> elements with their <code>alt</code> attribute if present, or otherwise their <code>src</code> attribute if present, resolving the URL if it’s relative.

==== parsing for implied properties ====

Imply properties only on explicit <code>h-x</code> class name root microformat element (no backcompat roots):

* if no explicit "<code>name</code>" property,
* then imply by:
** if <code>img.h-x</code> or <code>area.h-x</code>, then use its <code>alt</code> attribute for name
** else if <code>abbr.h-x[title]</code> then use its <code>title</code> attribute for name
** else if <code>.h-x>img:only-child[alt]:not([alt=""]):not[.h-*]</code> then use that <code>img</code>’s <code>alt</code> for name
** else if <code>.h-x>area:only-child[alt]:not([alt=""]):not[.h-*]</code> then use that <code>area</code>’s <code>alt</code> for name
** else if <code>.h-x>abbr:only-child[title]:not([title=""]):not[.h-*]</code> then use that <code>abbr</code> <code>title</code> for name
** else if <code>.h-x>:only-child:not[.h-*]>img:only-child[alt]:not([alt=""]):not[.h-*]</code> then use that <code>img</code>’s <code>alt</code> for name
** else if <code>.h-x>:only-child:not[.h-*]>area:only-child[alt]:not([alt=""]):not[.h-*]</code> then use that <code>area</code>’s <code>alt</code> for name
** else if <code>.h-x>:only-child:not[.h-*]>abbr:only-child[title]:not([title=""]):not[.h-*]</code> use that <code>abbr</code>’s <code>title</code> for name
** else use the <code>textContent</code> of the <code>.h-x</code> for name
** drop all leading and trailing whitespace from name
* if no explicit "<code>photo</code>" property,
* then imply by:
** if <code>img.h-x[src]</code>, then use <code>src</code> for photo
** else if <code>object.h-x[data]</code> then use <code>data</code> for photo
** else if <code>.h-x>img[src]:only-of-type:not[.h-*]</code> then use that <code>img</code> <code>src</code> for photo
** else if <code>.h-x>object[data]:only-of-type:not[.h-*]</code> then use that <code>object</code>’s <code>data</code> for photo
** else if <code>.h-x>:only-child:not[.h-*]>img[src]:only-of-type:not[.h-*]</code>, then use that <code>img</code>’s <code>src</code> for photo
** else if <code>.h-x>:only-child:not[.h-*]>object[data]:only-of-type:not[.h-*]</code>, then use that <code>object</code>’s <code>data</code> for photo
** if there is a gotten photo value, return the normalized absolute URL of it, following the containing document's language's rules for resolving relative URLs (e.g. in HTML, use the current URL context as determined by the page, and first <code><base></code> element, if any).
* if no explicit "<code>url</code>" property,
* then imply by:
** if <code>a.h-x[href]</code> or <code>area.h-x[href]</code> then use that <code>[href]</code> for url
** else if <code>.h-x>a[href]:only-of-type:not[.h-*]</code>, then use that <code>[href]</code> for url
** else if <code>.h-x>area[href]:only-of-type:not[.h-*]</code>, then use that <code>[href]</code> for url
** else if <code>.h-x>:only-child:not[.h-*]>a[href]:only-of-type:not[.h-*]</code>, then use that <code>[href]</code> for url
** else if <code>.h-x>:only-child:not[.h-*]>area[href]:only-of-type:not[.h-*]</code>, then use that <code>[href]</code> for url
** if there is a gotten url value, return the normalized absolute URL of it, following the containing document's language's rules for resolving relative URLs (e.g. in HTML, use the current URL context as determined by the page, and first <code><base></code> element, if any).

<strong>Note:</strong> The same markup for a property should not be causing that property to occur in <em>both</em> a microformat and one embedded inside - such a property should only be showing up on one of them. The parsing algorithm has details to prevent that, such as the <code>:not[.h-*]</code> tests above.

=== parse a hyperlink element for rel microformats ===
To parse a hyperlink element (e.g. a or link) for rel microformats: use the following algorithm or an algorithm that produces equivalent results:
* if the "rel" attribute of the element is empty then exit
* set url to the value of the "href" attribute of the element, normalized to be an absolute URL following the containing document's language's rules for resolving relative URLs (e.g. in HTML, use the current URL context as determined by the page, and first <code><base></code> element if any).
* treat the "rel" attribute of the element as a space separate set of rel values
* for each rel value (rel-value)
** if there is no key rel-value in the rels hash then create it with an empty array as its value
** if url is not in the array of the key rel-value in the rels hash then add url to the array
* end for
* if there is no key with name url in the top-level "rel-urls" hash then add a key with name url there, with an empty hash value
* add keys to the hash of the key with name url for each of these attributes (if present) and key not already set:
** "hreflang": the value of the "hreflang" attribute
** "media": the value of the "media" attribute
** "title": the value of the "title" attribute
** "type": the value of the "type" attribute
** "text": the text content of the element if any
* if there is no "rels" key in that hash, add it with an empty array value
* set the value of that "rels" key to an array of all unique items in the set of rel values unioned with the current array value of the "rels" key

==== rel parse examples ====
Here are some examples to show how parsed rels may be reflected into the JSON (empty items key).

E.g. parsing this markup:
<source lang=xml>
<a rel="author" href="http://example.com/a">author a</a>
<a rel="author" href="http://example.com/b">author b</a>
<a rel="in-reply-to" href="http://example.com/1">post 1</a>
<a rel="in-reply-to" href="http://example.com/2">post 2</a>
<a rel="alternate home"
href="http://example.com/fr"
media="handheld"
hreflang="fr">French mobile homepage</a>
</source>

Would generate this JSON:
<source lang=javascript>
{
"items": [],
"rels": {
"author": [ "http://example.com/a", "http://example.com/b" ],
"in-reply-to": [ "http://example.com/1", "http://example.com/2" ],
"alternate": [ "http://example.com/fr" ],
"home": [ "http://example.com/fr" ]
},
"rel-urls": {
"http://example.com/a": {
"rels": ["author"],
"text": "author a"
},
"http://example.com/b": {
"rels": ["author"],
"text": "author b"
},
"http://example.com/1": {
"rels": ["in-reply-to"],
"text": "post 1"
},
"http://example.com/2": {
"rels": ["in-reply-to"],
"text": "post 2"
},
"http://example.com/fr": {
"rels": ["alternate", "home"],
"media": "handheld",
"hreflang": "fr",
"text": "French mobile homepage"
}
}
}
</source>

== what do the CSS selector expressions mean ==
''This section is non-normative.''

Use [http://gallery.theopalgroup.com/selectoracle/ SelectORacle] to expand any of the above CSS selector expressions into longform English prose.

Exception:
* ''':not[.h-*]''' is not a valid CSS selector but is used here to mean:
** does not have any class names that start with "h-"

== note HTML parsing rules ==
''This section is non-normative.''

microformats2 parsers are expected to follow HTML parsing rules, which includes for example:
* ignore <code><template></code> elements - stuff between <code><template></code> tags don't end up in the DOM
** test-case in the wild: http://sixtwothree.org/blog/now-accepting-webmentions/

== note backward compatibility details ==
The parsing algorithm and details refer to "backcompat root classes" (backcompat roots for short) and "backcompat properties". These conditions and steps in the algorithm document how to parse pre-microformats2 microformats which all defined their own specific root class names and explicit sets of properties.

Some details to be aware of (which are explicitly in the algorithm, this is just an informal summary)
* If an element has one or more microformats2 root class name(s) (<code>h-*</code>)
** all backcompat root class names are ignored on that element.
** all backcompat properties, without an intervening root class name, are ignored inside that element
* If an element has only a backcompat root class name (or names)
** all microformats2 property class names (p-* u-* dt-* e-*), without an intervening element with root class name, are ignored inside that element
** there is no implied property value parsing (p-name, u-url, u-photo) for that element

=== backward compatibility mappings ===
Note: several parser implementations have encoded backward compatible mappings into source and data files. Implementers of parsers may find these useful:
* search for "modules.maps[" in https://github.com/glennjones/microformat-shiv/blob/master/microformat-shiv.js
* search for "$classicPropertyMap" in https://github.com/indieweb/php-mf2/blob/master/Mf2/Parser.php
* https://github.com/tommorris/mf2py/blob/master/mf2py/backcompat.py

== questions ==
See the FAQ:
* [[microformats2-parsing-faq]]

== issues ==
See the issues page:
* [[microformats2-parsing-issues]]

== implementations ==
{{main|microformats2#Implementations}}
There are open source [[microformats2#Implementations|microformats2 parsers]] available for Javascript, node.js, PHP, Ruby and Python.

== test suite ==
See:
* https://github.com/microformats/tests
* https://github.com/indieweb/php-mf2/tree/master/tests/Mf2

Ports to/for other languages encouraged.

== change control ==
Minor editorial changes (e.g. fixing minor typos or punctuation) that do not change and preferably clarify the structure and existing intended meaning may be done by anyone without filing issues, requiring only a sufficient "Summary" description field entry for the edit. More than minor but still purely editorial changes may be made by an editor. Anyone may question such editorial changes by undoing corresponding edits without filing an issue. Any further reversion or iteration on such an editorial change must be done by filing an issue.

Per the stable status of this document, substantive issue filing, resolution, and edits are done with the following change control steps, which may nearly all be done asynchronously once an issue is filed to reach the required state of "Resolve by implementation verified rough consensus". All steps should be openly documented (e.g. on this wiki or GitHub issues) such that others may later verify the history of an issue, and all steps are encouraged to be announced on #microformats [[IRC]] with a link to the issue.

* '''File an issue.''' Anyone may file a new [[microformats2-parsing-issues|issue]] and is encouraged to do so, with the caveat that per the stable status, only issues originating as a result of implementation experience are likely to have a substantive impact on this specification.
* '''Propose a resolution.''' Anyone may propose resolutions to existing issues, and should encourage others in the community, especially implementers, to provide feedback. Proposed resolutions should include what specific text of the spec needs changing, preferably with replacement text, and test cases if applicable (e.g. a resolution could just document the current state more precisely without needing to provide any new test cases).
* '''Provide feedback on proposed resolution(s).''' Anyone may provide feedback on proposed resolutions with their name attached, in summary (e.g. +1/0/-1 opinions), and additionally with reasoning (required for objections, optional otherwise), or optionally with suggested improvements, or counter-proposals (per "Propose a resolution" above).
* '''Iterate to resolve objections if any.''' If there are any objections to a proposed resolution, proposer(s) and anyone agreeing should work to iterate on the proposal to resolve objections to the satisfaction (or at least withdrawal of objection) of anyone objecting. The more objections resolved the better, and incremental progress is forward progress.
* '''Broaden implementer consensus.''' Proposer(s) and anyone agreeing should reach out (e.g. via #microformats [[IRC]]) to multiple implementers of the specification to get their opinions and feedback on proposal(s). The more implementers providing feedback the better. Iterate to resolve any new objections per "Iterate to resolve objections if any" above.
* '''Encourage and get 1+ implementation(s).''' Encourage, get, and document 1+ implementation(s) of implementation affecting aspects of a proposed resolution, preferably with a test case if applicable.
* '''Resolve by implementation verified rough consensus.''' Once there is rough consensus on a proposal (where <dfn>rough consensus</dfn> means <strong>either no objections, or at a minimum no objections by implementers, and explicit positive opinions by 2+ implementers</strong>) and a proposal's feasibility is verified by at least 1 implementation of aspects of the proposal that affect implementations (none needed if there are none, e.g. purely editorial), cite those in a "Resolution:" statement on the issue (e.g. in a comment), and explicitly share this resolution statement and link to issue in the #microformats [[IRC]] channel.
* '''Edit specification.''' Normally the spec editor(s) will make edits per implementation verified rough consensus resolutions, however anyone (though especially issue discussion participants) may make a specification edit per a resolution if they are able to verify the citations that the resolution has achieve rough consensus, and has 1+ implementation(s) per "Encourage and get 1+ implementation(s)" above. Edits must contain a "Summary" field entry that at a minimum mention the issue by name, should provide a URL to the issue resolution, and preferably be done by a spec editor or an implementer. Once the edit is made, the issue should be closed, or at least a comment made on the issue requesting that the opener of the issue close the issue.

These change control steps are inspired by the tradition of "Rough consensus and running code" as exhibited by example by IETF and W3C processes, and in that regard, seek to be a philosophically compatible approach to specification iteration. They have been in rough practice since 2015-01-21, increasingly strictly applied since then with consensus of issue discussion participants, and explicitly documented based on issue resolving and spec editing experience.

== see also ==
* [[microformats2]]
* [[microformats2-parsing-faq]]
* [[microformats2-parsing-issues]]
* [[microformats2-parsing-brainstorming]] - for background, thinking, exploring possibilities
* [[microformats2-parsing-rdf]]
* [[microformats2-implied-properties]]

[[Category:Draft Specifications]]

h-card

2016-07-16T17:32:06Z

Zearin: Minor tweaks to markup and phrasing

<entry-title>h-card</entry-title>
<span class="h-card vcard"><span class="p-name fn">[[User:Tantek|Tantek Çelik]]</span> (<span class="p-role role">Editor</span>)</span>
----
<dfn style="font-style:normal;font-weight:bold">h-card</dfn> is a simple, open format for publishing people and organisations on the web. h-card is one of several open [[microformats|microformat]] draft standards suitable for embedding data in HTML/HTML5.

h-card is the [[microformats2]] update to [[hCard]].

{{cc0-owfa-license}}

== Example ==
Here is a simple minimal person example:

<source lang=html4strict>
<a class="h-card" href="http://example.com">Joe Bloggs</a>
</source>

Parsed JSON:
<source lang=javascript>
{
"items": [
{
"type": [
"h-card"
],
"properties": {
"name": [
"Joe Bloggs"
],
"url": [
"http://example.com"
]
}
}
]
}
</source>

And a slightly more complete example:

<source lang=html4strict>
<p class="h-card">
<img class="u-photo" src="http://example.org/photo.png" alt="" />
<a class="p-name u-url" href="http://example.org">Joe Bloggs</a>
<a class="u-email" href="mailto:joebloggs@example.com">joebloggs@example.com</a>,
<span class="p-street-address">17 Austerstræti</span>
<span class="p-locality">Reykjavík</span>
<span class="p-country-name">Iceland</span>
</p>
</source>

Parsed JSON:
<source lang=javascript>
{
"items": [
{
"type": [
"h-card"
],
"properties": {
"photo": [
"http://example.org/photo.png"
],
"name": [
"Joe Bloggs"
],
"url": [
"http://example.org"
],
"email": [
"mailto:joebloggs@example.com"
],
"street-address": [
"17 Austerstræti"
],
"locality": [
"Reykjavík"
],
"country-name": [
"Iceland"
]
}
}
]
}
</source>

Nested h-card example

<source lang=html4strict>
<div class="h-card">
<a class="p-name u-url"
href="http://blog.lizardwrangler.com/"
>Mitchell Baker</a>
(<a class="p-org h-card"
href="http://mozilla.org/"
>Mozilla Foundation</a>)
</div>
</source>

Parsed JSON:
<source lang=javascript>
{
"items": [{
"type": ["h-card"],
"properties": {
"name": ["Mitchell Baker"],
"url": ["http://blog.lizardwrangler.com/"],
"org": [{
"value": "Mozilla Foundation",
"type": ["h-card"],
"properties": {
"name": ["Mozilla Foundation"],
"url": ["http://mozilla.org/"]
}
}]
}
}]
}
</source>

Note: the nested h-card has implied 'name' and 'url' properties, just like any other root-class-name-only h-card on an <code><a href></code> would.

=== Get started ===
The class '''<code>h-card</code>''' is a ''root class name'' that indicates the presence of an h-card.

For minimal examples where at most <code>p-name</code>, <code>u-url</code> and <code>u-photo</code> are required (such as the first given above), only the root class name is needed — see [[microformats-2-implied-properties|implied properties]].

For more complex examples, the root class name must be placed on an element which encloses all the desired properties, and then the properties themselves marked up using the classnames given below.

See [[microformats2-parsing]] to learn more about property classnames.

== Properties ==
h-card properties, inside an element with class '''h-card''':
* '''<code>p-name</code>''' - The full/formatted name of the person or organisation
* '''<code>p-honorific-prefix</code>''' - e.g. Mrs., Mr. or Dr.
* '''<code>p-given-name</code>''' - given (often first) name
* '''<code>p-additional-name</code>''' - other/middle name
* '''<code>p-family-name</code>''' - family (often last) name
* '''<code>p-sort-string</code>''' - string to sort by
* '''<code>p-honorific-suffix</code>''' - e.g. Ph.D, Esq.
* '''<code>p-nickname</code>''' - nickname/alias/handle
* '''<code>u-email</code>''' - email address
* '''<code>u-logo</code>''' - a logo representing the person or organisation
* '''<code>u-photo</code>'''
* '''<code>u-url</code>''' - home page
* '''<code>u-uid</code>''' - universally unique identifier, typically canonical URL
* '''<code>p-category</code>''' - category/tag
* '''<code>p-adr</code>''' - postal address, optionally embed an [[h-adr]] {{main|h-adr}}
* '''<code>p-post-office-box</code>'''
* '''<code>p-extended-address</code>''' - apartment/suite/room name/number if any
* '''<code>p-street-address</code>''' - street number + name
* '''<code>p-locality</code>''' - city/town/village
* '''<code>p-region</code>''' - state/county/province
* '''<code>p-postal-code</code>''' - postal code, e.g. US ZIP
* '''<code>p-country-name</code>''' - country name
* '''<code>p-label</code>'''
* '''<code>p-geo</code>''' or '''<code>u-geo</code>''', optionally embed an [[h-geo]] {{main|h-geo}}
* '''<code>p-latitude</code>''' - decimal latitude
* '''<code>p-longitude</code>''' - decimal longitude
* '''<code>p-altitude</code>''' - decimal altitude
* '''<code>p-tel</code>''' - telephone number
* '''<code>p-note</code>''' - additional notes
* '''<code>dt-bday</code>''' - birth date
* '''<code>u-key</code>''' - cryptographic public key e.g. SSH or GPG
* '''<code>p-org</code>''' - affiliated organization, optionally embed an [[h-card]]
* '''<code>p-job-title</code>''' - job title, previously 'title' in [[hCard]], disambiguated.
* '''<code>p-role</code>''' - description of role
* '''<code>u-impp</code>''' per RFC4770, new in vCard4 (RFC 6350)
* '''<code>p-sex</code>''' - biological sex, new in vCard4 (RFC 6350)
* '''<code>p-gender-identity</code>''' - gender identity, new in vCard4 (RFC 6350)
* '''<code>dt-anniversary</code>'''

All properties are optional.

== Status ==
'''h-card''' is a microformats.org draft specification. Public discussion on h-card takes place on [[h-card-feedback]] and the #microformats [[irc]] channel on irc.freenode.net.

h-card is ready to use and implemented in the wild, but for backwards compatibility you should also mark up top-level h-cards as classic [[hCard]]s.

== Property Details ==
(stub, to be expanded)

=== p-adr ===
<code>p-adr</code> can optionally embed an [[h-adr]] to cluster associated structured address properties. E.g. adding "p-adr" to the example earlier:

<source lang=html4strict>
<div class="h-card">
<p class="p-name">Joe Bloggs</p>
<p class="p-adr h-adr">
<span class="p-street-address">17 Austerstræti</span>
<span class="p-locality">Reykjavík</span>
<span class="p-country-name">Iceland</span>
</p>
</div>
</source>

Q: Why would you use "p-adr" to cluster associated structured address properties?

A: Because if you have more than one structured address, it helps to cluster which properties go with which address, e.g. home vs. work.

=== p-tel ===
Note: use of 'value' within 'p-tel' should be automatically handled by the support of the [[value-class-pattern]]. And for now, the former [[hCard]] 'type' subproperty of 'tel' is dropped/ignored. If there is demonstrable documented need for additional tel types (e.g. fax), we can introduce new flat properties as needed (e.g. p-tel-fax).

=== dt-bday ===
Using truncated representations of dates for birth date is often good practice as noted in [https://tools.ietf.org/html/rfc6350#section-4.3.1 the vcard spec] eg
* <code>1985-04</code> for April 1985
* <code>1985</code> for the year 1985
* <code>--04-12</code> for April 12th with no specified year

=== Reserved properties ===
Reserved properties (not used much, if at all, in practice):

* '''<code>p-organization-name</code>'''
* '''<code>p-organization-unit</code>'''
* '''<code>p-tz</code>''' - timezone offset, e.g. <code><data class="p-tz" value="-0800">PST</data></code>
* '''<code>dt-rev</code>'''

== Examples in the wild ==
Real world in the wild examples:

* ... add uses of h-card you see in the wild here.
* App.net rolled out support for h-card and h-entry on all profile pages and permalink pages as of 2013-08-06 ([https://alpha.app.net/voidfiles example])
* Brett Comnes marks up his posts with h-card ([http://bret.io/2013/06/29/getting-started-with-bower/ example])
* Ben Werdmuller marks up his homepage and posts with h-card [http://werd.io/view/51d5097fbed7ded0633a5956 example])
* Sandeep Shetty marks his homepage and posts up with h-card and h-entry ([sandeep.io/101 example])
* [http://eschnou.com/ Laurent Eschenauer] marks his homepage profile up using h-card
* [http://tommorris.org/ Tom Morris] marks himself up with h-card as well as venues he’s checked into ([http://tommorris.org/posts/8408 example])
* [http://www.w3.org/conf/ W3Conf 2013] uses h-card for all the event speakers and notable attendees. The h-cards make particularly good use of implied name, url, and photo properties.
* [http://wordpress.org/extend/themes/sempress SemPress] is a WordPress theme that supports h-card, h-feed/h-entry and h-as-*
* [http://the-pastry-box-project.net/ The Pastry Box Project] use h-card markup on their homepage and individual thoughts pages
* Tom Morris uses h-card and [[XFN]] to markup [http://tommorris.org/pages/blogroll his blogroll].
* Aaron Parecki uses h-card to markup both authorship and references to people in his notes permalinks, e.g. [http://aaronparecki.com/2012/230/reply/1 2012/230/reply/1].
* [http://tantek.com/ Tantek Çelik] uses h-card on his home page as well as within [[h-entry]]s on permalink pages to indicate authorship.
* [http://waterpigs.co.uk/ Barnaby Walters] uses h-card on his home page, as well as within h-entries for notes and articles, both to indicate authorship and also when mentioning people within the body of the notes.
* [http://tantek.com/presentations/2012/06/microformats microformats.org at 7 years] presentation with and h-card markup for people and organizations.
* [http://tantek.com/presentations/2012/06/pdf2012-indieweb.html Rise of the Indie Web hCards] (from Personal Democracy Forum 2012 #pdf12 #pdf2012) has [[microformats2]] h-card markup
* WebMaker by Mozilla has [[microformats2]] h-card on event search (e.g. [https://webmaker.org/en-US/events/near/?lat=45.5234515&lng=-122.6762071 search near Portland Oregon]) and event pages (e.g. [https://webmaker.org/en-US/events/192f56eb9/ IndieWebCamp 2012]).[https://twitter.com/microformats/status/212207925643587585]
* WebFWD by Mozilla has [[microformats2]] h-card markup on [https://webfwd.org/about/experts/ experts] and [https://webfwd.org/about/team/ team] pages
* [http://indiewebcamp.com IndieWebCamp] has [[microformats2]] h-event markup with embedded h-cards for the organizers and the location.
* [https://wiki.mozilla.org/Events Mozilla Events] page has [[microformats2]] h-event markup with attendees marked up with h-card.
* [https://tristanthomas.me Tristan Thomas] uses h-card on his home page
* [http://cold32.com/about-the-author-and-contact.htm Cold32.com] uses h-card (and h-geo) on its about-the-author-and-contact page
* [https://workfrom.co/ Workfrom.co] renders h-cards for venues (e.g. [https://workfrom.co/palio-dessert-and-espresso-house])
* [http://www.pcwdld.com/ PCWDLD.com] renders h-cards for download pages(e.g. [http://www.pcwdld.com/solarwinds-network-topology-mapper-review Download page example])

=== offline ===
* spreadly marks up share permalink pages with minimal h-cards inside h-entry

== Validating ==
* '''[http://indiewebify.waterpigs.co.uk/validate-h-card/ indiewebify.me h-card validator]''' parses [[h-card]] markup and makes suggestions for things to add, with code samples
{{h-spec-section-validating}}

== Backward Compatibility ==
=== Publisher Compatibility ===
For backward compatibility, you may wish to use classic [[hCard]] classnames in addition to the more future-proof h-card properties, for example:

<source lang=html4strict>
<p class="h-card vcard">
<span class="p-name fn">Joe Bloggs</span>,
<span class="p-org org">Awesome Nonprofit</span>
...
</p>
</source>

The class '''<code>vcard</code>''' is a ''backward compatible root class name'' that indicates the presence of an [[hCard]].

'''fn''', '''org''', and all the other backward compatibility hCard property class names are listed below.

=== Parser Compatibility ===
Microformats parsers {{should}} detect classic properties only if a classic root class name is found and parse them as microformats2 properties.

If an "h-card" is found, don't look for a "vcard" on the same element.

Compat. root class name: <code id="vcard">vcard</code><br/>
Properties: (parsed as '''p-''' plain text unless otherwise specified)
* <code>fn</code> - parse as '''<code>p-name</code>'''
* <code>honorific-prefix</code>
* <code>given-name</code>
* <code>additional-name</code>
* <code>family-name</code>
* <code>honorific-suffix</code>
* <code>nickname</code>
* <code>email</code> - parse as '''u-'''
* <code>logo</code> - parse as '''u-'''
* <code>photo</code> - parse as '''u-'''
* <code>url</code> - parse as '''u-'''
* <code>uid</code> - parse as '''u-'''
* <code>category</code>
* <code>adr</code> - parse as '''<code>p-adr h-adr</code>''' including compat root class <code>adr</code>
* <code>extended-address</code>
* <code>street-address</code>
* <code>locality</code>
* <code>region</code>
* <code>postal-code</code>
* <code>country-name</code>
* <code>label</code>
* <code>geo</code> - parse as '''<code>p-geo h-geo</code>''' including compat root class <code>geo</code>
* <code>latitude</code>
* <code>longitude</code>
* <code>tel</code>
* <code>note</code>
* <code>bday</code> - parse as '''dt-'''
* <code>key</code> - parse as '''u-'''
* <code>org</code>
* <code>organization-name</code>
* <code>organization-unit</code>
* <code>title</code> - parse as '''p-job-title'''
* <code>role</code>

Reserved: (backward compat properties that parsers {{may}} implement, if they do, they {{must}} implement in this way:
* <code>tz</code>
* <code>rev</code> - parse as '''dt-'''

== Background ==
This work is based on the existing [[hCard]] and [[vcard]] specifications.

== Design Principles ==

(stub, expand)

== Additions ==
We've tried very hard with h-card to stay compatible with vCard4, and thus additions should be proposed on the vCard4 mailing list.

However, you may still use this wiki to capture additions for h-card here:
* [[h-card-brainstorming]]

== See Also ==
* [[microformats2]]
* [[microformats2-parsing]]
* [[h-adr]]
* [[h-geo]]
* [[hCard]]

[[Category:Draft Specifications]]

microformats2

2016-07-16T17:26:31Z

Zearin: Tweaked markup and phrasing

<entry-title>microformats2</entry-title>
Welcome to the microformats2 home page.

== Summary ==
Microformats2 is the simplest way to markup structured information in HTML. Microformats2 improves ease of use and implementation for <em>both</em> authors (publishers) and developers ([[microformats2-parsing|parser]] implementers).

Microformats2 replaces and supersedes both classic microformats, as well as incorporates lessons learned from [[microdata]] and [[RDFa]].

=== simple microformats 2 examples ===
Here are a few simple microformats2 examples along with canonical [[JSON]].

==== person example ====
* Simple person reference:
<source lang=html4strict>
<span class="h-card">Frances Berriman</span>
</source>

Parsed JSON:
<source lang=javascript>
{
"items": [{
"type": ["h-card"],
"properties": {
"name": ["Frances Berriman"]
}
}]
}
</source>

----

==== hyperlinked person ====
* Simple hyperlinked person reference
<source lang=html4strict>
<a class="h-card" href="http://benward.me">Ben Ward</a>
</source>

Parsed JSON:
<source lang=javascript>
{
"items": [{
"type": ["h-card"],
"properties": {
"name": ["Ben Ward"],
"url": ["http://benward.me"]
}
}]
}
</source>

----

==== hyperlinked person image ====
* Simple hyperlinked person image
<source lang=html4strict>
<a class="h-card" href="http://rohit.khare.org/">
<img alt="Rohit Khare"
src="https://s3.amazonaws.com/twitter_production/profile_images/53307499/180px-Rohit-sq_bigger.jpg" />
</a>
</source>

Parsed JSON:
<source lang=javascript>
{
"items": [{
"type": ["h-card"],
"properties": {
"name": ["Rohit Khare"],
"url": ["http://rohit.khare.org/"],
"photo": ["https://s3.amazonaws.com/twitter_production/profile_images/53307499/180px-Rohit-sq_bigger.jpg"]
}
}]
}
</source>

Additional simple cases details in [[microformats-2-implied-properties]].

----

==== detailed person example ====
* More detailed person
<source lang=html4strict>
<div class="h-card">
<img class="u-photo" alt="photo of Mitchell"
src="https://webfwd.org/content/about-experts/300.mitchellbaker/mentor_mbaker.jpg"/>
<a class="p-name u-url"
href="http://blog.lizardwrangler.com/"
>Mitchell Baker</a>
(<a class="u-url"
href="https://twitter.com/MitchellBaker"
>@MitchellBaker</a>)
<span class="p-org">Mozilla Foundation</span>
<p class="p-note">
Mitchell is responsible for setting the direction and scope of the Mozilla Foundation and its activities.
</p>
<span class="p-category">Strategy</span>
<span class="p-category">Leadership</span>
</div>
</source>

Parsed JSON:
<source lang=javascript>
{
"items": [{
"type": ["h-card"],
"properties": {
"photo": ["https://webfwd.org/content/about-experts/300.mitchellbaker/mentor_mbaker.jpg"],
"name": ["Mitchell Baker"],
"url": [
"http://blog.lizardwrangler.com/",
"https://twitter.com/MitchellBaker"
],
"org": ["Mozilla Foundation"],
"note": ["Mitchell is responsible for setting the direction and scope of the Mozilla Foundation and its activities."],
"category": [
"Strategy",
"Leadership"
]
}
}]
}
</source>

----
Notes:
# The JSON <code>"type"</code> uses the full microformat root class name (e.g. <code>"h-card"</code>) for consistent identification.
# all properties are optional and syntactically plural with parsed values provided in document order; particular microformats (and applications there-of) may apply specific/singular semantics to first value of a property.

=== microformats2 design ===

microformats2 has the following key design aspects:

; Prefixes for class names
: All microformats class names use prefixes. Prefixes are '''syntax independent from vocabularies''', which are developed separately.
* <code>h-*</code> for root class names (e.g. <code>h-card</code>)
* <code>p-*</code> for plain text properties (e.g. <code>p-name</code>)
* <code>u-*</code> for URL properties (e.g. <code>u-photo</code>)
* <code>dt-*</code> for date/time properties (e.g. <code>dt-bday</code>)
* <code>e-*</code> for embedded markup properties (e.g. <code>e-note</code>)<br />

See [[microformats2#naming_conventions_for_generic_parsing|prefix naming conventions]] for more details.

; Flat sets of optional properties
: All microformats consist of a root, and a collection of properties. Hierarchical data is represented with nested microformats, typically as property values themselves. Properties are all optional and potentially multivalued (applications needing a singular semantic may use first instance).

; Single class markup for common uses
: Common simple markup patterns require only a single microformat root class name, which parsers use to find a few generic properties: <code>name</code>, <code>url</code>, <code>photo</code>. The simple microformats2 examples above demonstrate these.

----

Parsing each prefix (including generating canonical JSON) is detailed step-by-step in:
* The '''[[microformats2-parsing|microformats2 parsing specification]]'''

'''Note:''' Most properties are specified and used with a single specific prefix (or occasionally two or three) that is self-evident from context. However, any parsing prefix can be used with any property, especially if you find a good reason to do so!

== v2 vocabularies ==
Status: '''<span id="draft_v2_vocabularies">draft</span>'''. Please review and provide feedback in [[IRC]].
* [[h-adr]]
* [[h-card]]
* [[h-entry]]
* [[h-event]]
* [[h-feed]]
* [[h-geo]]
* [[h-item]]
* [[h-listing]]
* [[h-product]]
* [[h-recipe]]
* [[h-resume]]
* [[h-review]]
* [[h-review-aggregate]]

See below for vocabulary summaries.

=== h-adr ===
{{main|h-adr}}

The '''h-adr''' microformat is for marking up structured locations such as addresses, physical and/or postal. This is an update to [[adr]].

root class name: '''<code>h-adr</code>'''<br/>
profile/itemtype: <nowiki>http://microformats.org/profile/h-adr</nowiki>

properties:
* '''<code>p-post-office-box</code>'''
* '''<code>p-extended-address</code>'''
* '''<code>p-street-address</code>'''
* '''<code>p-locality</code>'''
* '''<code>p-region</code>'''
* '''<code>p-postal-code</code>'''
* '''<code>p-country-name</code>'''
* '''<code>p-label</code>''' - new in [[vCard4]] ([[RFC6350]])
* '''<code>p-geo</code>''' (or '''<code>u-geo</code>''' with a RFC 5870 geo: URL) - new in [[vCard4]] ([[RFC6350]])
* '''<code>p-latitude</code>''' - new in [[vCard4]] ([[RFC6350]] from RFC 5870)
* '''<code>p-longitude</code>''' - new in [[vCard4]] ([[RFC6350]] from RFC 5870)
* '''<code>p-altitude</code>''' - new in [[vCard4]] ([[RFC6350]] from RFC 5870)

For backward compatibility, microformats 2 parsers {{should}} detect the following root class name and property names. A microformats 2 parser may use existing microformats [[parsers]] to extract these properties. If an "h-adr" is found, don't look for an "adr" on the same element.

compat root class name: <code id="adr">adr</code><br/>
properties: (parsed as '''p-''' plain text unless otherwise specified)
* <code>post-office-box</code>
* <code>extended-address</code>
* <code>street-address</code>
* <code>locality</code>
* <code>region</code>
* <code>postal-code</code>
* <code>country-name</code>

=== h-card ===
{{main|h-card}}

The '''h-card''' microformat is for marking up people and organizations. This is an update to [[hCard]].

root class name: '''<code>h-card</code>'''<br/>
profile/itemtype: <nowiki>http://microformats.org/profile/h-card</nowiki>

properties:
* '''<code>p-name</code>'''
* '''<code>p-honorific-prefix</code>'''
* '''<code>p-given-name</code>'''
* '''<code>p-additional-name</code>'''
* '''<code>p-family-name</code>'''
* '''<code>p-sort-string</code>'''
* '''<code>p-honorific-suffix</code>'''
* '''<code>p-nickname</code>'''
* '''<code>u-email</code>'''
* '''<code>u-logo</code>'''
* '''<code>u-photo</code>'''
* '''<code>u-url</code>'''
* '''<code>u-uid</code>'''
* '''<code>p-category</code>'''
* '''<code>p-adr</code>'''
* '''<code>p-post-office-box</code>'''
* '''<code>p-extended-address</code>'''
* '''<code>p-street-address</code>'''
* '''<code>p-locality</code>'''
* '''<code>p-region</code>'''
* '''<code>p-postal-code</code>'''
* '''<code>p-country-name</code>'''
* '''<code>p-label</code>'''
* '''<code>p-geo</code>''' or '''<code>u-geo</code>''' with a RFC 5870 geo: URL, new in [[vCard4]] ([[RFC6350]])
* '''<code>p-latitude</code>'''
* '''<code>p-longitude</code>'''
* '''<code>p-altitude</code>''' - new in [[vCard4]] ([[RFC6350]] from RFC 5870)
* '''<code>p-tel</code>'''
* '''<code>p-note</code>'''
* '''<code>dt-bday</code>'''
* '''<code>u-key</code>'''
* '''<code>p-org</code>'''
* '''<code>p-job-title</code>''' - previously 'title' in hCard, disambiguated.
* '''<code>p-role</code>
* '''<code>u-impp</code>''' per RFC 4770, new in [[vCard4]] ([[RFC6350]])
* '''<code>p-sex</code>''' new in [[vCard4]] ([[RFC6350]])
* '''<code>p-gender-identity</code>''' new in [[vCard4]] ([[RFC6350]])
* '''<code>dt-anniversary</code>''' new in [[vCard4]] ([[RFC6350]])
* ...

Reserved properties: (properties not used much (if at all) in practice)
* '''<code>p-organization-name</code>'''
* '''<code>p-organization-unit</code>'''
* '''<code>p-tz</code>'''
* '''<code>dt-rev</code>'''
* ...

For backward compatibility, microformats 2 parsers {{should}} detect the following root class name and property names. A microformats 2 parser may use existing microformats [[parsers]] to extract these properties. If an "h-card" is found, don't look for a "vcard" on the same element.

compat root class name: <code id="vcard">vcard</code><br/>
properties: (parsed as '''p-''' plain text unless otherwise specified)
* <code>fn</code> - parse as '''<code>p-name</code>'''
* <code>honorific-prefix</code>
* <code>given-name</code>
* <code>additional-name</code>
* <code>family-name</code>
* <code>honorific-suffix</code>
* <code>nickname</code>
* <code>email</code> - parse as '''u-'''
* <code>logo</code> - parse as '''u-'''
* <code>photo</code> - parse as '''u-'''
* <code>url</code> - parse as '''u-'''
* <code>uid</code> - parse as '''u-'''
* <code>category</code>
* <code>adr</code> - parse as '''<code>p-adr h-adr</code>''' including compat root class <code>adr</code>
* <code>extended-address</code>
* <code>street-address</code>
* <code>locality</code>
* <code>region</code>
* <code>postal-code</code>
* <code>country-name</code>
* <code>label</code>
* <code>geo</code> - parse as '''<code>p-geo h-geo</code>''' including compat root class <code>geo</code>
* <code>latitude</code>
* <code>longitude</code>
* <code>tel</code>
* <code>note</code>
* <code>bday</code> - parse as '''dt-'''
* <code>key</code> - parse as '''u-'''
* <code>org</code>
* <code>organization-name</code>
* <code>organization-unit</code>
* <code>title</code> - parse as '''p-job-title'''
* <code>role</code>
* ...

Reserved: (backward compat properties that parsers {{may}} implement, if they do, they {{must}} implement in this way:
* <code>tz</code>
* <code>rev</code> - parse as '''dt-'''
* ...

Note: use of 'value' within 'tel' should be automatically handled by the support of the [[value-class-pattern]]. And for now, the 'type' subproperty of 'tel' is dropped/ignored. If there is demonstrable documented need for additional tel types (e.g. fax), we can introduce new flat properties as needed (e.g. p-tel-fax).

=== h-entry ===
{{main|h-entry}}

The '''h-entry''' microformat is for marking up syndicatable content such as blog posts, notes, articles, comments, photos and similar. This is an update to [[hAtom]].

root class name: '''<code>h-entry</code>'''<br/>
profile/itemtype: <nowiki>http://microformats.org/profile/h-entry</nowiki>

properties:
* '''<code>p-name</code>''' (was p-entry-title, see issues)
* '''<code>p-summary</code>''' (was p-entry-summary, see issues)
* '''<code>e-content</code>''' (was e-entry-content, see issues)
* '''<code>dt-published</code>'''
* '''<code>dt-updated</code>'''
* '''<code>p-author</code>'''
* '''<code>p-category</code>'''
* '''<code>u-url</code>'''
* '''<code>u-uid</code>'''
* '''<code>p-geo</code>'''
* '''<code>p-latitude</code>'''
* '''<code>p-longitude</code>'''

This is an update to [[hAtom]].

Brainstorming:

The following properties are proposed additions to h-entry above and beyond what hAtom (or Atom) provides, based on various existing link preview markup conventions:
* '''<code>u-photo</code>'''
* '''<code>u-audio</code>''' - consider special u- parsing rules for <code><audio></code>
* '''<code>u-video</code>''' - consider special u- parsing rules for <code><video></code>
* '''<code>u-in-reply-to</code>''' - for links to other posts that this post is a reply to (comment regarding, etc.)

Backward compatibility:

(*)hAtom-specific implementations that perform custom display or translation (e.g. to Atom XML) {{should}} prefer <code>p-name</code> over <code>p-entry-title</code>, and use <code>p-entry-title</code> value(s) as a fallback if there is no <code>p-name</code>.

For hAtom backward compatibility, microformats 2 parsers {{should}} detect the following root class name and property names. A microformats 2 parser may use existing microformats [[parsers]] to extract these properties. If an "h-entry" is found, don't look for a "hentry" on the same element.

compat root class name: <code id="hentry">hentry</code><br/>
properties: (parsed as '''p-''' plain text unless otherwise specified)
* <code>entry-title</code> - parse as '''<code>p-name</code>'''
* <code>entry-summary</code>
* <code>entry-content</code> - parse as '''e-'''
* <code>published</code> - parse as '''dt-'''
* <code>updated</code> - parse as '''dt-'''
* <code>author</code> - including compat root <code>vcard</code> in the absence of <code>h-card</code>
* <code>category</code>
* <code>geo</code> - parse as '''<code>p-geo h-geo</code>''' including compat root <code>geo</code>
* <code>latitude</code>
* <code>longitude</code>
* ...

<span id="h-entry-faq">FAQ:</span>
<div class="discussion">
* '''What is the <code>p-name</code> of a [http://indiewebcamp.com/note note]?'''
** A few options, from simplest to most detailed.
*** '''same as the p-content/e-content''' property.
*** '''same as the <code>title</code> element''' on the note permalink post page. When publishing a note on its own permalink post page, the contents of the note are likely abbreviated for the title of the page. The same abbreviation can be used for the p-name.
*** '''first sentence of the p-content/e-content''' property. It may be better for [http://indiewebcamp.com/syndication syndication] and [[link-preview]] purposes to provide just the first sentence of the note as the <code>p-name</code>. Similarly if only a portion of the content is syndicated to other sites, that portion can be marked up as the <code>p-summary</code>.
* ...
</div>

Resolved Issues:
* 2012-245 Resolved. See [http://krijnhoetmer.nl/irc-logs/microformats/20120830#l-120 2012-243 IRC discussion/consensus] for:
** Use '''<code>p-summary</code> instead of <code>p-entry-summary</code>'''. The historical semantic of "entry-summary" is not different from "summary" in any significant (or discernible way). Collapsing the two will simplify the overall microformats2 vocabularies further. In microformats2, entry-summary is no more.
** Use '''<code>e-content</code> instead of <code>e-entry-content</code>'''. Same point and advantage. In microformats2, entry-content is no more.
** '''drop <code>p-entry-title</code>'''. Unnecessary and subsumed by "p-name". Would consider move to backward compat only if cases are presented - known publishing uses are expected to be updated shortly.

=== h-event ===
{{main|h-event}}

The '''h-event''' microformat is for marking up events. This is an update to [[hCalendar]].

root class name: '''<code>h-event</code>'''<br/>
profile/itemtype: <nowiki>http://microformats.org/profile/h-event</nowiki>

properties:
* '''<code>p-name</code>'''
* '''<code>p-summary</code>'''(*)
* '''<code>dt-start</code>'''
* '''<code>dt-end</code>'''
* '''<code>dt-duration</code>'''
* '''<code>p-description</code>'''
* '''<code>u-url</code>'''
* '''<code>p-category</code>'''
* '''<code>p-location</code>'''
* '''<code>p-geo</code>'''
* '''<code>p-latitude</code>'''
* '''<code>p-longitude</code>'''
* ...

This is an update to [[hCalendar]].

(*)hCalendar-specific implementations that perform custom display or translation (e.g. to iCalendar .ics) {{should}} prefer <code>p-name</code> over <code>p-summary</code>, and use <code>p-summary</code> value(s) as a fallback if there is no <code>p-name</code>.

For backward compatibility, microformats 2 parsers {{should}} detect the following root class name and property names. A microformats 2 parser may use existing microformats [[parsers]] to extract these properties. If an "h-event" is found, don't look for a "vevent" on the same element.

compat root class name: <code id="vevent">vevent</code><br/>
properties: (parsed as '''p-''' plain text unless otherwise specified)
* <code>summary</code> - parse as '''<code>p-name</code>'''
* <code>dtstart</code> - parse as '''<code>dt-start</code>'''
* <code>dtend</code> - parse as '''<code>dt-end</code>'''
* <code>duration</code> - parse as '''<code>dt-duration</code>'''
* <code>description</code>
* <code>url</code> - parse as '''u-'''
* <code>category</code>
* <code>location</code> - including compat root <code>vcard</code> in the absence of <code>h-card</code>, and compat root <code>adr</code> in the absence of <code>h-adr</code>
* <code>geo</code> - parse as '''<code>p-geo h-geo</code>''' including compat root <code>geo</code>
* <code>latitude</code>
* <code>longitude</code>
* ...

=== h-geo ===
{{main|h-geo}}

The '''h-geo''' microformat is for marking up WGS84 geophysical coordinates. This is an update to [[geo]].

root class name: '''<code>h-geo</code>'''<br/>
profile/itemtype: <nowiki>http://microformats.org/profile/h-geo</nowiki>

properties:
* '''<code>p-latitude</code>'''
* '''<code>p-longitude</code>'''
* '''<code>p-altitude</code>''' - new in [[vCard4]] ([[RFC6350]] from RFC 5870)

For backward compatibility, microformats 2 parsers {{should}} detect the following root class name and property names. A microformats 2 parser may use existing microformats [[parsers]] to extract these properties. If an "h-geo" is found, don't look for an "geo" on the same element.

compat root class name: <code id="geo">geo</code>
properties: (parsed as '''p-''' plain text unless otherwise specified)
* <code>latitude</code>
* <code>longitude</code>

=== h-item ===
{{main|h-item}}

The '''h-item''' microformat is for marking up the item of an [[h-review]] or [[h-product]]. This is an update to part of [[hReview]].

root class name: '''<code>h-item</code>'''<br/>
profile/itemtype: <nowiki>http://microformats.org/profile/h-item</nowiki>

properties:
* '''<code>p-name</code>'''
* '''<code>u-photo</code>'''
* '''<code>u-url</code>'''

Note: in practice, due to the microformats2 implied property rules, it is expected that most uses of "h-item" won't require any explicit properties at all (since microformats2 parsers will infer name, photo, and url properties from the structure of the element with "h-item" and its contained content/elements if any).

=== h-product ===
{{main|h-product}}

The '''h-product''' microformat is for marking up products. This is an update to [[hProduct]].

root class name: '''<code>h-product</code>'''<br/>
profile/itemtype: <nowiki>http://microformats.org/profile/h-product</nowiki>

properties:
* '''<code>p-name</code>''' - name of the product
* '''<code>u-photo</code>''' - photo of the product
* '''<code>p-brand</code>''' - manufacturer, can also be a nested <code>h-card</code>
* '''<code>p-category</code>''' - freeform categories or tags applied to the item by the reviewer
* '''<code>e-description</code>'''
* '''<code>u-url</code>''' - URL of the product
* '''<code>u-identifier</code>''' - includes type (e.g. mpn, upc, isbn, issn, sn, vin, sku etc.) and value.
* '''<code>p-review</code>''' - a review of the product, can also be a nested <code>h-review</code>
* '''<code>p-price</code>''' - retail price of the product

For backward compatibility, microformats 2 parsers {{should}} detect the following root class name and property names. A microformats 2 parser may use existing microformats [[parsers]] to extract these properties. If an "h-product" is found, don't look for an "hproduct" on the same element.

compat root class name: <code id="hproduct">hproduct</code><br/>
properties: (parsed as '''p-''' plain text unless otherwise specified)
* <code>fn</code> - parse as '''<code>p-name</code>'''
* <code>photo</code> - parse as '''u-'''
* <code>brand</code>
* <code>category</code>
* <code>description</code>
* <code>identifier</code> - parse as '''u-'''
* <code>url</code> - parse as '''u-'''
* <code>review</code> - including compat root class <code>hreview</code> in the absence of <code>h-review</code>
* <code>price</code>

Note: [[hProduct]] has at least one experimental property which has real world adoption due to [[Google]] and [[Bing]] search support of hProduct. Currently this is: '''price'''

=== h-recipe ===
{{main|h-recipe}}

The '''h-recipe''' microformat is for marking up food recipes. This is an update to [[hRecipe]].

root class name: '''<code>h-recipe</code>'''<br/>
profile/itemtype: <nowiki>http://microformats.org/profile/h-recipe</nowiki>

properties:
* '''<code>p-name</code>''' - the name of the recipe
* '''<code>p-ingredient</code>''' - describes one or more ingredients used in the recipe.
* '''<code>p-yield</code>''' - Specifies the quantity produced by the recipe, like how many persons it satisfyies
* '''<code>e-instructions</code>''' - the method of the recipe.
* '''<code>dt-duration</code>''' - the time it takes to prepare the meal described by the recipe.
* '''<code>u-photo</code>''' - an accompanying image

Experimental properties with wide adoption
* '''<code>p-summary</code>''' - provides a short summary or introduction
* '''<code>p-author</code>''' - the person who wrote the recipe with <code>h-card</code>
* '''<code>dt-published</code>''' - the date the recipe was published
* '''<code>p-nutrition</code>''' - nutritional information like calories, fat, dietary fiber etc.
* ...

For backward compatibility, microformats 2 parsers {{should}} detect the following root class name and property names. A microformats 2 parser may use existing microformats [[parsers]] to extract these properties. If an "h-recipe" is found, don't look for an "hrecipe" on the same element.

compat root class name: <code id="hrecipe">hrecipe</code><br/>
properties: (parsed as '''p-''' plain text unless otherwise specified)
* <code>fn</code> - parse as '''<code>p-name</code>'''
* <code>ingredient</code>
* <code>yield</code>
* <code>instructions</code> - parse as '''e-'''
* <code>duration</code> - parse as '''dt-'''
* <code>photo</code> - parse as '''u-'''
* <code>summary</code>
* <code>author</code> - including compat root <code>vcard</code> in the absence of <code>h-card</code>
* <code>nutrition</code>

Note: [[hRecipe]] has a number of experimental properties which have real world adoption due to [[Google]] recipe search support of hRecipe. These are: summary, author, published and nutrition

=== h-resume ===
{{main|h-resume}}

The '''h-resume''' microformat is for marking up resumes. This is an update to [[hResume]].

root class name: '''<code>h-resume</code>'''<br/>
profile/itemtype: <nowiki>http://microformats.org/profile/h-resume</nowiki>

properties:
* '''<code>p-summary</code>''' - overview of qualifications and objectives
* '''<code>p-contact</code>''' - current contact info in an <code>h-card</code>
* '''<code>p-education</code>''' - an education <code>h-calendar</code> event, years, nested <code>h-card</code> of the school, location.
* '''<code>p-experience</code>''' - a job or other professional experience <code>h-calendar</code> event, years, nested <code>h-card</code> of the organization, location, job-title.
* '''<code>p-skill</code>''' - a skill or ability, optionally including level and/or duration of experience
* '''<code>p-affiliation</code>''' - an affiliation with an <code>h-card</code> organization

For backward compatibility, microformats 2 parsers {{should}} detect the following root class name and property names. A microformats 2 parser may use existing microformats [[parsers]] to extract these properties. If an "h-resume" is found, don't look for an "hresume" on the same element.

compat root class name: <code id="hresume">hresume</code><br/>
properties: (parsed as '''p-''' plain text unless otherwise specified)
* <code>summary</code>
* <code>contact</code> - including compat root <code>vcard</code> in the absence of <code>h-card</code>
* <code>education</code> - including compat root <code>vevent</code> in the absence of <code>h-event</code>
* <code>experience</code> - including compat root <code>vevent</code> in the absence of <code>h-event</code>
* <code>skill</code>
* <code>affiliation</code> - including compat root <code>vcard</code> in the absence of <code>h-card</code>

Note: skill has a [[hresume-skill-brainstorm|proposed expansion into competency]] with explicit summary, rating and/or duration components. Based on existing real world adoption, we should consider an h-competency vocabulary with p-summary, p-rating, and dt-duration properties.

=== h-review ===
{{main|h-review}}

The '''h-review''' microformat is for marking up reviews. This is an update to [[hReview]]. See also [[h-item]].

root class name: '''<code>h-review</code>'''<br/>
profile/itemtype: <nowiki>http://microformats.org/profile/h-review</nowiki>

properties:
* '''<code>p-name</code>''' - name of the review
* '''<code>p-item</code>''' - thing been reviewed i.e. business or person (h-card), event (h-event), place (h-adr or h-geo), product (h-product), website, url, or other item ([[h-item]]).
* '''<code>p-reviewer</code>''' - person who authored the review
* '''<code>dt-reviewed</code>''' - date time of when the review was written
* '''<code>p-rating</code>''' - value from 1-5 indicating a rating for the item (5 best).
* '''<code>p-best</code>''' - define best rating value. can be numerically lower than worst.
* '''<code>p-worst</code>''' - define worst rating value. can be numerically higher than best.
* '''<code>e-description</code>''' - the full text written evaluation and opinion of the reviewer
* '''<code>p-category</code>''' - freeform categories or tags applied to the item by the reviewer
* '''<code>u-url</code>''' - URL of the review

For backward compatibility, microformats 2 parsers {{should}} detect the following root class name and property names. A microformats 2 parser may use existing microformats [[parsers]] to extract these properties. If an "h-review" is found, don't look for an "hreview" on the same element.

compat root class name: <code id="hreview">hreview</code><br/>
properties: (parsed as '''p-''' plain text unless otherwise specified)
* <code>summary</code> parse as '''<code>p-name</code>'''
* <code>fn</code> - parse as '''p-name''' of the item being reviewed (p-item h-item p-name)
* <code>photo</code> - parse as '''u-photo''' of the item being reviewed (p-item h-item u-photo)
* <code>url</code> - parse as '''u-url''' of the item being reviewed (p-item h-item u-url)
* <code>reviewer</code> - including compat root vcard in the absence of h-card
* <code>dtreviewed</code> - parse as '''dt-'''
* <code>rating</code>
* <code>best</code>
* <code>worst</code>
* <code>description</code> - parse as '''e-'''
* <code>rel="tag"</code> - parse as '''p-category'''
* <code>rel="self bookmark"</code> - parse as '''u-url'''. note that <code>rel</code> attribute value is treated as a space separated set, thus any presence of "self" and "bookmark" within such a set in a rel value is accepted.

Note: The [[hReview]] format has three properties which make use of <code>rel</code> attribute, these are <code>tag</code>, permalink (via the <code>self</code> and <code>bookmark</code> values) and <code>license</code>. Microformats 2 parsers {{should}} map these URLs into the page scoped rel collection.

=== h-review-aggregate ===
{{main|h-review-aggregate}}

The '''h-review-aggregate''' microformat is for marking up aggregate reviews of a single item. This is an update to [[hreview-aggregate]]. See also [[h-item]].

root class name: '''<code>h-review-aggregate</code>'''<br/>
profile/itemtype: <nowiki>http://microformats.org/profile/h-review-aggregate</nowiki>

properties:
* '''<code>p-name</code>''' - name of the review
* '''<code>p-item</code>''' - thing been reviewed i.e. business or person (h-card), event (h-event), place (h-adr or h-geo), product (h-product), website, url, or other item (h-item).
* '''<code>p-rating</code>''' - value from 1-5 indicating average rating for the item (5 best).
* '''<code>p-best</code>''' - define best rating value. can be numerically lower than worst.
* '''<code>p-worst</code>''' - define worst rating value. can be numerically higher than best.
* '''<code>p-count</code>''' - number of reviews aggregated.
* '''<code>p-votes</code>''' - number of reviewers who have rated the product, thus contributing to the average rating.
* '''<code>p-category</code>''' - freeform categories or tags applied to the item by the reviewer
* '''<code>u-url</code>''' - URL of the review

For backward compatibility, microformats 2 parsers {{should}} detect the following root class name and property names. A microformats 2 parser may use existing microformats [[parsers]] to extract these properties. If an "h-review-aggregate" is found, don't look for an "hreview-aggregate" on the same element.

compat root class name: <code id="hreview-aggregate">hreview-aggregate</code><br/>
properties: (parsed as '''p-''' plain text unless otherwise specified)
* <code>summary</code> parse as '''<code>p-name</code>'''
* <code>fn</code> - parse as '''p-name''' of the item being reviewed (p-item h-item p-name)
* <code>photo</code> - parse as '''u-photo''' of the item being reviewed (p-item h-item u-photo)
* <code>url</code> - parse as '''u-url''' of the item being reviewed (p-item h-item u-url)
* <code>rating</code>
* <code>best</code>
* <code>worst</code>
* <code>count</code>
* <code>votes</code>
* <code>rel="tag"</code> - parse as '''p-category'''
* <code>rel="self bookmark"</code> - parse as '''u-url'''. note that <code>rel</code> attribute value is treated as a space separated set, thus any presence of "self" and "bookmark" within such a set in a rel value is accepted.

=== v2 vocab notes ===
Notes:
* All v2 vocabularies are defined as flat lists of properties of an object/item, and thus can be used in microformats-2 syntax as shown, or in microdata items, or RDFa. The microformats-2 property parsing prefixes "p-", "u-", "dt-", "e-" are omitted when using defined properties in microdata itemprop and RDFa property as those syntaxes have their own element-specific parsing rules.
* Profile URLs are provided for use with the HTML4 <code>profile</code> attribute, microdata <code>itemtype</code> attribute, and RDFa <code>vocab</code> & <code>typeof</code> attributes (though the latter requires slicing off the trailing segment of the profile for the typeof attribute, and leaving the rest in vocab).
* microformats 2 properties may also be explicitly bound as URIs using [[rel-profile]], the [[html5-profile]] attribute proposal, or an HTML5 'vocab' attribute instead. If URI bound terms are important to you, please express interest on [[rel-profile]], [[html5-profile]], or contribute to an [[html5-vocab]] draft.

=== v2 vocab to-do ===
To do:
* write a simple tutorial for creating/getting started with microformats-2 markup for new content
* examples in each h-* spec listed above of how to embed other microformats in them
* actual profile documents at <nowiki>http://microformats.org/profile/h-*</nowiki> URLs mentioned above.
* Provide any necessary microdata-specific language as needed (e.g. to be comparably understandable to the [http://www.whatwg.org/specs/web-apps/current-work/#vcard sample vCard4/hCard1 microdata vocabulary]. Also provide any necessary RDFa-specific language as needed. Both preferably in a generic vocabulary-independent way.
* write a porting guide mapping v1 property -> v2 property
** use-case: simple search/replace in templates (e.g. in case web author doesn't remember existing microformats vocabs and where they used them).
** advise using *both* in existing templates (e.g. in case some CSS depends on the existing microformats)
* analyzie/document how well the microformats2 model and vocabularies satisfy the [http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-May/019681.html use-cases used to design/create microdata].

== combining microformats ==
Since microformats 2 uses simple flat sets of properties for each microformat, multiple microformats are combined to indicate additional structure.

=== h-event location h-card ===
Events commonly have venue information with additional structure, like address information. For example:

<source lang=html4strict>
<div class="h-event">
<a class="p-name u-url" href="http://indiewebcamp.com/2012">
IndieWebCamp 2012
</a>
from <time class="dt-start">2012-06-30</time>
to <time class="dt-end">2012-07-01</time> at
<span class="p-location h-card">
<a class="p-name p-org u-url" href="http://geoloqi.com/">
Geoloqi
</a>,
<span class="p-street-address">920 SW 3rd Ave. Suite 400</span>,
<span class="p-locality">Portland</span>,
<abbr class="p-region" title="Oregon">OR</abbr>
</span>
</div>
</source>

The nested h-card used to structure the p-location of the h-event is represented as a structured value for "location" in the JSON, which has an additional key, "value" that represents the plain text version parsed from the p-location.

Parsed JSON:
<source lang=javascript>
{
"items": [{
"type": ["h-event"],
"properties": {
"name": ["IndieWebCamp 2012"],
"url": ["http://indiewebcamp.com/2012"],
"start": ["2012-06-30"],
"end": ["2012-07-01"],
"location": [{
"value": "Geoloqi",
"type": ["h-card"],
"properties": {
"name": ["Geoloqi"],
"org": ["Geoloqi"],
"url": ["http://geoloqi.com/"],
"street-address": ["920 SW 3rd Ave. Suite 400"],
"locality": ["Portland"],
"region": ["Oregon"]
}
}]
}
}]
}
</source>

Questions:
<div class="discussion">
* Should the nested hCard be present also as a top-level item in the JSON? - [[User:Tantek|Tantek]] 02:02, 19 June 2012 (UTC)
** My current (2012-243) leaning is no. - [[User:Tantek|Tantek]] 18:53, 30 August 2012 (UTC)
** If so, how do we avoid expansion of the JSON geometrically proportional to the depth of microformat nesting? (Or do we not worry about it?)
* Should there be a canonical hierarchical JSON and a canonical flattened JSON? - [[User:Tantek|Tantek]] 02:02, 19 June 2012 (UTC)
** My current (2012-243) leaning is no, we stick with one canonical JSON for uf2 which is hierarchical. - [[User:Tantek|Tantek]] 18:53, 30 August 2012 (UTC)
** If so, should the flattened JSON have references from properties to nested microformats that have been pushed to the top level per flattening? - [[User:Tantek|Tantek]] 02:02, 19 June 2012 (UTC)
*** If so, what convention does/do JSON follow for such synthetic local reference identifiers? - [[User:Tantek|Tantek]] 02:02, 19 June 2012 (UTC)
</div>

Notes:
* The 'location' value reflects the visible text of its element, including spaces and punctuation, as well as the state abbreviation 'OR'. The 'h-card' property values are only what is marked up, and thus include structure values without extra punctuation, and the state takes the expanded form from the <code>title</code> attribute of its <code><abbr></code> element.

=== h-card org h-card ===
People often publish information general to their company rather than specific to them, in which case, they may wish to encapsulate that in separately nested microformat. E.g. here is a simple h-card example with org property:

[http://blog.lizardwrangler.com Mitchell Baker] (Mozilla Foundation)

with source:
<source lang=html4strict>
<div class="h-card">
<a class="p-name u-url"
href="http://blog.lizardwrangler.com/"
>Mitchell Baker</a>
(<span class="p-org">Mozilla Foundation</span>)
</div>
</source>

Parsed JSON:
<source lang=javascript>
{
"items": [{
"type": ["h-card"],
"properties": {
"name": ["Mitchell Baker"],
"url": ["http://blog.lizardwrangler.com/"],
"org": ["Mozilla Foundation"]
}
}]
}
</source>

Sometimes such organization affiliations are hyperlinked to the website of the organization:

[http://blog.lizardwrangler.com Mitchell Baker] ([http://mozilla.org/ Mozilla Foundation])

You can mark that up with a nested h-card:
<source lang=html4strict>
<div class="h-card">
<a class="p-name u-url"
href="http://blog.lizardwrangler.com/"
>Mitchell Baker</a>
(<a class="p-org h-card"
href="http://mozilla.org/"
>Mozilla Foundation</a>)
</div>
</source>

Parsed JSON:
<source lang=javascript>
{
"items": [{
"type": ["h-card"],
"properties": {
"name": ["Mitchell Baker"],
"url": ["http://blog.lizardwrangler.com/"],
"org": [{
"value": "Mozilla Foundation",
"type": ["h-card"],
"properties": {
"name": ["Mozilla Foundation"],
"url": ["http://mozilla.org/"]
}
}]
}
}]
}
</source>

Note: the nested h-card has implied 'name' and 'url' properties, just like any other root-class-name-only h-card on an <code><a href></code> would.

'''FOR PARSERS ONLY:'''

The nested 'h-card' could be marked up as an 'h-org' as well, which adds it to the nested microformat's type array, all as part of the property specified by the 'p-org'.

<source lang=html4strict>
<div class="h-card">
<a class="p-name u-url"
href="http://blog.lizardwrangler.com/"
>Mitchell Baker</a>
(<a class="p-org h-card h-org"
href="http://mozilla.org/"
>Mozilla Foundation</a>)
</div>
</source>

Parsed JSON:
<source lang=javascript>
{
"items": [{
"type": ["h-card"],
"properties": {
"name": ["Mitchell Baker"],
"url": ["http://blog.lizardwrangler.com/"],
"org": [{
"value": "Mozilla Foundation",
"type": ["h-card", "h-org"],
"properties": {
"name": ["Mozilla Foundation"],
"url": ["http://mozilla.org/"]
}
}]
}
}]
}
</source>

'''FOR PARSERS ONLY:'''

Without a property class name like 'p-org' holding all the nested objects together, we need to introduce another array for nested children (similar to the existing DOM element notion of children) of a microformat that are not attached to a specific property:

<source lang=html4strict>
<div class="h-card">
<a class="p-name u-url"
href="http://blog.lizardwrangler.com/"
>Mitchell Baker</a>
(<a class="h-org h-card"
href="http://mozilla.org/"
>Mozilla Foundation</a>)
</div>
</source>

Parsed JSON:
<source lang=javascript>
{
"items": [{
"type": ["h-card"],
"properties": {
"name": ["Mitchell Baker"],
"url": ["http://blog.lizardwrangler.com/"]
},
"children": [{
"type": ["h-card","h-org"],
"properties": {
"name": ["Mozilla Foundation"],
"url": ["http://mozilla.org/"]
}
}]
}]
}
</source>

Since there's no property class name on the element with classes 'h-card' and 'h-org', the microformat representing that element is collected into the children array.

Such a nested microformat implies some relationship (containment, being related), but is not as useful as if the nested microformat was a specific property of its parent.

For this reason it's recommended that authors should not publish nested microformats without a property class name, and instead, when nesting microformats, authors should always specify a property class name (like 'p-org') on the same element as the root class name(s) of the nested microformat(s) (like 'h-card' and/or 'h-org').

'''FOR PARSERS ONLY:'''

Or the nested object could be only marked up with 'h-card'. Source:

<source lang=html4strict>
<div class="h-card">
<a class="p-name u-url"
href="http://blog.lizardwrangler.com/"
>Mitchell Baker</a>
(<a class="h-card"
href="http://mozilla.org/"
>Mozilla Foundation</a>)
</div>
</source>

Parsed JSON:
<source lang=javascript>
{
"items": [{
"type": ["h-card"],
"properties": {
"name": ["Mitchell Baker"],
"url": ["http://blog.lizardwrangler.com/"]
},
"children": [{
"type": ["h-card"],
"properties": {
"name": ["Mozilla Foundation"],
"url": ["http://mozilla.org/"]
}
}]
}]
}
</source>

'''TO DO: Add h-event h-card example and JSON, per real world publishing examples like [http://www.swingtime.co.uk/List/ClSouth.html Swing Time: Classes in Southern England].'''

== authoring ==
=== minimal markup ===
The best way to use microformats-2 is with as little additional markup as possible. This keeps your code cleaner, improves its maintainability, and thus the quality and longevity of your microformats.

One big advantage of microformats-2 over previous microformats (and others) is the ability to add one class name to an existing element to create a structured item.

See the [[microformats-2#simple_microformats_2_examples|simple examples at the top]] for a start, e.g.

Simple hCards work just by adding <code>class="h-card"</code> :
<source lang=html4strict>
<span class="h-card">Frances Berriman</span>

<a class="h-card" href="http://benward.me">Ben Ward</a>

<img class="h-card" alt="Sally Ride"
src="http://upload.wikimedia.org/wikipedia/commons/a/a4/Ride-s.jpg"/>

<a class="h-card" href="http://tantek.com">
<img alt="Tantek Çelik" src="http://ttk.me/logo.jpg"/>
</a>
</source>

* Tip: Inside an open tag, put the <code>class</code> attribute <em>first</em>, then any human text content attributes (e.g. <code>alt</code>), then URL attributes (e.g. <code>href</code> <code>src</code>), and lastly other attributes (e.g. <code>style</code>). Putting the class attribute first ties it closely to the element name/tag itself, makes it more obvious, and thus more likely to be kept up to date.

=== backward compatible ===
If you depend on current microformats [[implementations]], while they're being updated to support [[microformats-2]], you can include both existing microformats and microformats-2 markup.

In short: use both sets of class names simultaneously.

When doing so, use them on the same element, with the microformats-2 class name first, followed immediately by the existing microformats class name.

Here are the microformats-2 hCards from above with current [[hCard]] markup as well, which may require adding a wrapping element (e.g. a <code><span></code>) to separate the root class name element from explicit property class name elements:

<source lang=html4strict>
<span class="h-card vcard">
<span class="p-name fn">Frances Berriman</span>
</span>

<span class="h-card vcard">
<a class="p-name fn u-url url" href="http://benward.me">Ben Ward</a>
</span>

<span class="h-card vcard">
<img class="p-name fn u-photo photo" alt="Sally Ride"
src="http://upload.wikimedia.org/wikipedia/commons/a/a4/Ride-s.jpg"/>
</span>

<span class="h-card vcard">
<a class="u-url url" href="http://tantek.com">
<img class="p-name fn u-photo photo" alt="Tantek Çelik"
src="http://ttk.me/logo.jpg"/>
</a>
</span>
</source>

Tips:
* use the microformats-2 class name first, e.g.
** <code>class="h-card vcard"</code>
** <code>class="u-url url"</code>
* and pair them when using an element for multiple properties, e.g.:
** <code>class="p-name fn u-url url"</code>
** <code>class="p-name fn u-photo photo"</code>
* put microformats classes after classes for CSS (since page authors will likely interact more with their own classes for design than with microformats classes), e.g. as used on individual microformats [[events]] pages:
** <code>class="event-page h-event vevent"</code>

The prefixes (h-, p-, etc.) of microformats2 class names provide easier recognition, and when followed by the similarly named existing class name, they're more easily recognized as related and thus kept together when the markup is maintained over time.

Related FAQ: [[microformats2-faq#when_using_both_h-card_and_vcard_which_should_be_first_and_why|When using both h-card and vcard which should be first and why?]]

== validators ==
microformats2 validators:

{{new}} Test your microformatted web page with:
* https://pin13.net/mf2/

Barnaby Walters has a hosted version of the open source php-mf2 [[parser]] where you can enter your markup into a textarea and see how it's parsed:
* http://waterpigs.co.uk/php-mf2/

See the [[validators]] page for a longer list of validators.

== Examples in the wild ==
Please add new examples in the wild of microformats-2 to the top of this list. When it gets too big we can move it to a separate page like [[microformats-2-examples-in-wild]].

* ...
* David John Mead marks up his profile, blog posts and comments with h-card, h-entry and h-cite on [http://davidjohnmead.com davidjohnmead.com]
* [[User:Brian|Brian Suda]] marks up his blog posts up with h-entry and h-card on [http://optional.is/required/ optional.is]
* Ashton McAllan marks up her blog posts, reposts, comments and likes with h-entry, h-card and h-cite on [https://acegiak.net/ acegiak.net]
* Emma Kuo marks up her blog posts and notes with h-entry and h-card on [http://notenoughneon.com/ notenoughneon.com]
* Scott Jenson marks up his blog posts with h-entry and h-card on [http://jenson.org/ jenson.org]
* Emily McAllen marks up her blog posts with h-entry and h-card on [http://blackwoolholiday.com/ blackwoolholiday.com]
* Ryan Barrett marks up his blog posts, notes, replies and likes with h-entry and h-card on [https://snarfed.org/ snarfed.org]
* Barry Frost marks up his notes with h-entry, h-card and h-cite on [http://barryfrost.com/ barryfrost.com]
* Amber Case marks up her profile, blog posts, replies and notes with h-entry and h-card on [http://caseorganic.com/ caseorganic.com]
* Johannes Ernst marks up his blog posts with h-entry on [http://upon2020.com/blog/ upon2020.com]
* Michiel de Jong marks up his profile and notes with h-entry and h-card on [https://michielbdejong.com/ michielbdejong.com]
* Mike Taylor marks up his profile and blog posts with h-card and h-entry on [https://bear.im/bearlog/ bear.im]
* Erin Jo Ritchey marks up her profile, posts and comments using h-card, h-entry and h-cite with idno on [http://erinjo.is/ erinjo.is]
* Jeena Paradies marks up his profile, blog posts, notes and comments using h-card, h-entry and h-cite on [https://jeena.net/ jeena.net]
* Andy Sylvester marks up his profile, blog posts and comments using h-card and h-entry on [http://andysylvester.com/2014/03/01/howto-setting-up-the-selfoss-feed-reader-with-microformats-support/ andysylvester.com] (note: as of 2014-03-13 using h-entry for comments instead of correct h-cite --[[User:Barnabywalters|bw]] 14:44, 13 March 2014 (UTC))
* Hakan Demir marks up his Coupon and Voucher blog posts with h-entry and h-card on [http://www.gutscheinflagge.de/ gutscheinflagge.de]
* Chloe Weil marks up her blog posts with h-entry on [http://chloeweil.com/blog chloeweil.com]
* Christophe Ducamp marks up his blog posts and profile with h-entry and h-card on [http://christopheducamp.com/ christopheducamp.com]
* Glenn Jones marks up his blog posts, notes, replies, profile and comments with h-entry, h-card and h-cite on [http://glennjones.net/ glennjones.net]
* Marcus Povey marks up his blog posts and profile with h-entry and h-card on [http://www.marcus-povey.co.uk/ marcus-povey.co.uk]
* Eugen Busoiu marks up his web profile with h-card on [http://eugenbusoiu.com/#utm_source=microformats2&utm_medium=h-card&utm_campaign=Microformats eugenbusoiu.com]]
* Matthias Pfefferle marks up his blog posts, comments and profile with h-card, h-cite and h-entry on [http://notizblog.org/ notizblog.org]
* Kyle Mahan marks up his profile and notes with h-card and h-entry on [http://kylewm.com/ kylewm.com]
* Okinawan-lyrics marks up his blog posts with h-entry and h-card ([http://www.okinawan-lyrics.com/ example])
* Emil Björklund marks up his blog posts with h-entry and h-card ([http://thatemil.com/blog/2013/09/16/webmentioning-adactio/ example])
* App.net rolled out support for h-card and h-entry on all profile pages and permalink pages as of 2013-08-06 ([https://alpha.app.net/voidfiles example])
* Brett Comnes marks up his posts with h-entry and h-card ([http://bret.io/2013/06/29/getting-started-with-bower/ example])
* Ben Werdmuller marks up his posts with h-card and h-entry, u-in-reply-to and u-like ([http://werd.io/view/51d5097fbed7ded0633a5956 example])
* Sandeep Shetty marks his posts up with h-card and h-entry, as well as draft u-in-reply-to and experimental u-like properties ([http://sandeep.io/101 example])
* Laurent Eschenauer marks up his posts with h-entry ([http://eschnou.com/entry/first-autonomous-flight-of-my-nodecopter-62-24992.html example])
* Tom Morris marks up his posts using h-entry ([http://tommorris.org/posts/8417 example])
* Sinolandquality marks up some of their content using h-feed and h-entry on [http://www.sinolandquality.com/Blog/?page_id=3516&utm_content=buffere4d40&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer sinolandquality.com]
* [http://www.w3.org/conf/ W3Conf 2013] uses h-event for the main event, and h-card for all the speakers and notable attendees. The h-cards make particularly good use of implied name, url, and photo properties.
* [http://wordpress.org/extend/themes/sempress SemPress] is a WordPress theme that supports h-card, h-feed/h-entry and h-as-*
* [http://the-pastry-box-project.net/ The Pastry Box Project] use h-card and h-entry markup on their homepage and individual thoughts pages
* Tom Morris uses h-card and [[XFN]] to markup [http://tommorris.org/pages/blogroll his blogroll].
* Aaron Parecki uses h-card to markup both authorship and references to people in his notes permalinks, e.g. [http://aaronparecki.com/2012/230/reply/1 2012/230/reply/1].
* [http://tantek.com/ Tantek Çelik] uses h-card, h-event, and h-entry on his home page, as well as h-entry on all post permalinks, e.g. [http://tantek.com/2012/243/t1/name-beats-title-modern-use-dubline-core-wrong-uf2 2012-243 post], with [[rel-prev]]/[[rel-next]] (if applicable) to indicate prev/next posts, and with [[rel-author]] to his home page with canonical hCard to indicate authorship.
* [http://waterpigs.co.uk/ Barnaby Walters] uses h-card on his home page, h-card, h-entry and XFN markup on his [http://waterpigs.co.uk/notes notes page].
** 2013-01-25 Barnaby Walters: <cite>[http://waterpigs.co.uk/articles/experimental-markup Experimental Markup]</cite> - describes how he's using microformats2 vocabularies: <code>h-adr</code>, <code>h-card</code>, <code>h-entry</code>, <code>h-event</code>, <code>h-geo</code>, <code>h-review</code>, and experimental vocabularies: <code>h-feed</code> (embedded for update histories), [[activity-streams]] objects <code>h-as-article</code>, <code>h-as-collection</code>, <code>h-as-note</code>, <code>h-as-update</code>, as well as experimental properties: <code>u-alternate</code> and <code>u-as-downstream-duplicate</code> (links to POSSE copies), and <code>u-in-reply-to</code> (links to content that the posts are in reply to).
* [http://tantek.com/presentations/2012/06/microformats microformats.org at 7 years] presentation with h-event and h-card markup for people and organizations.
* [http://tantek.com/presentations/2012/06/pdf2012-indieweb.html Rise of the Indie Web hCards] (from Personal Democracy Forum 2012 #pdf12 #pdf2012) has [[microformats-2]] h-calendar and h-card markup
* WebMaker by Mozilla has [[microformats-2]] h-calendar and h-card on event search (e.g. [https://webmaker.org/en-US/events/near/?lat=45.5234515&lng=-122.6762071 search near Portland Oregon]) and event pages (e.g. [https://webmaker.org/en-US/events/192f56eb9/ IndieWebCamp 2012]).[https://twitter.com/microformats/status/212207925643587585]
* WebFWD by Mozilla has [[microformats-2]] h-card markup on [https://webfwd.org/about/experts/ experts] and [https://webfwd.org/about/team/ team] pages
* [http://indiewebcamp.com IndieWebCamp] has [[microformats-2]] h-event markup with nested h-cards for the organizers and the location.
* [https://wiki.mozilla.org/Events Mozilla Events] page has [[microformats-2]] h-event markup with attendees marked up with h-card.
* The [http://pdx.esri.com/blog/2013/10/17/introducing-mapattack/ Esri PDX Blog] has h-entry markup on all blog posts (as of 2013-10-19), and h-product markup on [http://pdx.esri.com/projects/terraformer/ project pages]

=== offline ===
* spreadly marks up share permalink pages with h-entry, as well as minimal h-cards and experimental p-like properties

== Implementations ==
{{new}} Test your microformatted web page with:
=== Live Textarea Input ===
Use any of these to enter HTML+microformats2 markup and see the parsed result!
* http://glennjones.net/tools/microformats/
* https://pin13.net/mf2/ (where it says "Microformats Parser")
* https://kylewm.com/services/mf2

=== Blogging tools ===
* '''Storytlr''' parses the 'target' from [http://indiewebcamp.com/pingback pingbacks] for [https://github.com/storytlr/storytlr/blob/master/protected/application/public/controllers/PingbackController.php#L63 h-entry with properties and nested h-card] for information to automatically display in the [http://eschnou.com/entry/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html comments section on a post].

=== Converters ===

* '''[https://github.com/snarfed/granary granary]''' is a library and REST API that converts between silo APIs, [[ActivityStreams]], [[microformats2]], and Atom (all directions). Supported silos include Facebook, Twitter, Instagram, Google+, and Flickr. Users include [http://brid.gy/ Bridgy], [http://reader.kylewm.com/ Woodwind], and [https://facebook-atom.appspot.com/ facebook-atom] and [https://twitter-atom.appspot.com/ twitter-atom], among others.

* '''[http://pipes.yahoo.com/pipes/pipe.info?_id=afc5568b4e8643bfb05436b1caaf91bc microformats to RSS]''' - a Yahoo! pipe that converts a URL containing an [[h-feed]] containing h-entries, into an [[RSS]] feed ([http://waterpigs.co.uk/notes/4SeNi5/ 2013-10-21 blog post announcing])

* '''[https://xray.p3k.io XRay]''' ([https://github.com/aaronpk/XRay source code]) - Returns a normalized representation of the microformats data at a URL

=== Parsers ===
Parsers, open source libraries, in alphabetical order by programming language:

==== Parsers in production ====
The following parsers are of very high quality, in active development, and use on live sites on the web in production.

===== Javascript =====
* '''microformat-node''' Node.js microformats2 parser
** github open source: https://github.com/glennjones/microformat-node
** test suite: https://github.com/microformats/tests
** blog post: http://glennjones.net/2013/01/brand-new-microformats-2-parser/
** live: http://glennjones.net/tools/microformats/
* '''microformat-shiv''' - cross browser javascript microformats 2 parser which can also be used in browser extensions.
** http://microformatshiv.com/
** github open source: https://github.com/glennjones/microformat-shiv

===== PHP =====
* '''<span id="php-mf2">php-mf2</span>''' - PHP microformats2 parser
** github open source: https://github.com/indieweb/php-mf2
** Packagist: https://packagist.org/packages/mf2/mf2
** live:
*** textarea entry: http://waterpigs.co.uk/php-mf2/
*** URL and textarea entry: https://pin13.net/mf2/
** [https://github.com/barnabywalters/php-mf-cleaner mf-cleaner]: functions for working with the raw mf2 data structure

===== Python =====
* '''mf2py''' Python microformats2 parser
** main entry: [[mf2py]]
** github open source: https://github.com/tommorris/mf2py
** live:
*** URL entry: [https://mf2py.herokuapp.com/ mf2py.herokuapp.com]
*** textarea entry: https://kartikprabhu.com/connection/mfparser
*** another textarea: http://www.unmung.com/?html=
*** URL and/or textarea: https://kylewm.com/services/mf2

==== Development parsers ====
The following parsers are in-development and have key microformats2 functionality yet are incomplete, not fully tested, or have other limitations. Contributions welcome!

===== Elixir =====
* '''ckruse/microformats-elixir''' Elixir microformats2 parser
** github open source: https://github.com/ckruse/microformats2-elixir

===== Go =====
* '''andyleap/microformats''' Golang microformats2 parser
** github open source: https://github.com/andyleap/microformats
** live textarea entry: http://mf2.vendaria.net

===== Haskell =====
* '''myfreeweb/microformats2-parser''' Haskell microformats2 parser
** github open source: https://github.com/myfreeweb/microformats2-parser
** live textarea entry: https://unrelenting.technology/mf2/

===== Java =====
* '''Apache Any23''' a library, a web service and a command line tool that extracts structured data in RDF format from a variety of Web documents. Supports Microformats1 and 2.
** Download recent release: http://any23.apache.org/download.html
** live: http://any23-vm.apache.org/
** source: http://any23.apache.org/build-src.html
* '''mf2j''' An early-stage Java microformats2 parser
** github open source: https://github.com/kylewm/mf2j
** live: https://mf2j.herokuapp.com/?url={http://example.com}

===== Ruby =====
* '''G5/microformats2''' Ruby microformats2 parser
** github open source: https://github.com/G5/microformats2

== Presentations ==
Presentations about microformats2:
* 2013-01-24 <cite>[http://waterpigs.co.uk/presentations/microformats-2/ Microformats 2]</cite> presentation by [[User:Barnabywalters|Barnaby Walters]] at the [[events/2013-01-24-exeter-web-meetup|Exeter Web Meetup]] in Devon, UK.
* 2012-09-21 <cite>[http://tantek.com/presentations/2012/09/microformats2/ microformats2 & bits of HTML5: The Evolution Of Web Data]</cite> presentation by [[User:Tantek|Tantek Çelik]] ([http://twitter.com/t @t]) at [[events/2012-09-21-refreshlx|RefreshLX]] in Lisbon, Portugal.
* 2012-07-21 <cite>[http://tantek.com/presentations/2012/07/html5-uf2/ HTML5 and microformats2: The Evolution Of Web Data]</cite> presentation by [[User:Tantek|Tantek Çelik]] ([http://twitter.com/t @t]) at [[events/2012-07-21-cascadesf|Innovators of the Web conference]] in San Francisco, CA.
* 2012-07-14 <cite>[http://tantek.com/presentations/2012/07/html5-microformats2/ HTML5 and microformats2: The Evolution Of Web Data]</cite> presentation by [[User:Tantek|Tantek Çelik]] ([http://twitter.com/t @t]) at [[events/2012-07-14-open-web-camp-4|Open Web Camp IV]] in San Jose, CA.

== Testimonials ==
* <blockquote class="twitter-tweet">To prove the web standards community can come up with better standards than the SE’s, compare this: http://microformats.org/wiki/microformats-2 with schema . org — Joost de Valk (@yoast) [https://twitter.com/yoast/status/298907685452124160 2013-02-05 13:35]</blockquote>
* <blockquote class="twitter-tweet">... I’m hoping SE’s will pick up microformats2. It’s SO much cleaner. — Joost de Valk (@yoast) [https://twitter.com/yoast/status/298911287117758464 2013-02-05 13:49]</blockquote>
* <blockquote class="twitter-tweet">... But damn Microformats2 are sexy. — Joost de Valk (@yoast) [https://twitter.com/yoast/status/298912179292344320 2013-02-05 13:53]</blockquote>

== About This Brainstorm ==
The rest of this page is a brainstorm currently written in narrative / exploratory format, that is, acknowledging the success that microformats have had, why so, and then a walk through of known issues with microformats in general along with iteration of ways to address said issues, ending up with the current microformats 2 design as a conclusion.

The proposals build on each other resulting in a solution that addresses the vast majority of general issues. The proposed changes merit a major version number increment, hence microformats 2.

This mathematical proof/derivation style is used to explicitly encourage understanding (and double-checking) of the rational steps taken in the development of microformats 2. Reasons are documented, sometimes along with alternatives considered (and reasons for rejection of those alternatives).

When the microformats 2 brainstorm has evolved sufficiently to demonstrate some degree of stability, usability, and implementability, it will be rewritten in a more declarative specification style, and this narrative/derivation will be archived to a background development page for historical purposes.

— [[User:Tantek|Tantek]]

== Background ==

2004: In early February microformats were introduced as a concept at eTech, and in September [[hCard]] and [[hCalendar]] were proposed at FOO Camp.

2010:
* 34% of webdevs use microformats ([http://www.webdirections.org/sotw10/markup/#semantics 2010 State of Web Development survey])
* 1.88 billion hCards (per [[Yahoo]] SearchMonkey)
* 36 million hCalendar events (ibid)

* XFN -> Social Graph API -> Web as Social Network / Address Book

== Addressing Issues ==
=== AUTHORS and PUBLISHING ===
Authors and publishers are perhaps the most important constituency in the microformats community. There are more of them than there are developers, programmers, parsers, etc. and they're the ones that solved the chicken-egg problem by publishing microformats even before tools were available for consuming them.

Therefore we must first address author/publisher general issues with microformats.

==== can we make the simplest case simpler ====
Issue: '''How can we make it easier for authors to publish microformats?'''

Currently the simplest hCard:
<source lang=html4strict>
<span class="vcard">
<span class="fn">
Chris Messina
</span>
</span>
</source>

requires 2 elements (nested, with perhaps at least one being pre-existing), and 2 class names.

Web authors/designers are used to the simplicity of most HTML tags, e.g. to mark up a heading:

<source lang=html4strict>
<h1>Chris Messina</h1>
</source>

requires just 1 element.

[http://zeldman.com/ Jeffrey Zeldman] pointed out this apparent perceived incremental complexity (2 elements vs 1) during a microformats workshop in 2009 in New York City.

'''How can we make microformats just as easy?'''

'''Proposal: allow root class name only.'''

This would enable:

<source lang=html4strict>
<h1 class="vcard">Chris Messina</h1>
</source>

requiring only 1 class name for the simplest case.

==== renaming for usability ====
Otherwise known as, choosing one form of consistency over another.

'''Can we do even better?'''

One of the most common questions asked about hCard is:

[[hcard-faq#Why_does_hCard_use_vcard_as_the_root_class_name|Why does hCard use vcard as the root class name?]]

This slight inconsistency between the name of the format and the name of the root class name consistently causes confusion in a large percentage of newcomers to microformats.
* See [[issues#hcard-vs-vcard-name]] for details/links.

Though in microformats we believe very strongly in the [[principle]] of [[reuse]], we have to admit that in this case experience/evidence has shown that this may be a case where we re-used something too far beyond it's original meaning. Thus:

'''Proposal: use root class name "hcard" instead of "vcard" for future hCards.'''

This would result in:

<source lang=html4strict>
<h1 class="hcard">Chris Messina</h1>
</source>

making the simple case even simpler:

Just 1 additional class name, named the same as the format you're adding. Think hCard, markup class="hcard".

At a minimum for compatibility we should document that parsers should accept "hcard" as an alternative to "vcard" as the root class name for hCard 1.0, and similarly for hCalendar 1.0: "hcalendar" in addition to "vcalendar", "hevent" in addition to "vevent".

However, for [[microformats-2]] we are going to distinguish root class names further by using an "h-" prefix (e.g. "h-card"). Read on to understand why.

==== simplifying to only needing one element ====
It's very important for the simple case to be as simple as possible, to enable the maximum number of people to get started with minimum effort. (The idea of using a single class name for a microformat was proposed by Ryan Cannon in 2006 specifically [[hcard-implied|for hCard]], and rediscovered by [[User:Tantek|Tantek]] in 2010 and subsequently generalized to all microformats.)

From there on, it's ok to require incremental effort for incremental return.

E.g. to add any additional information about a person, add explicit property names.

'''How does this simple root-only case work?'''

* root class name reflects name of the microformat
* every microformat must require at most 1 property (preferably 0)
** admit that requiring a field in an application just results in noise (the 90210 problem - apps which require zip code get lots of false 90210 entries), and specify that any application use cases which appear to "require" specific properties must instead define how to imply sensible defaults for them.
* when only a root class name is specified, imply the entire text contents of the element as the value of the primary property of the microformat. e.g.
** "hcard" implies "fn"
** hcalendar event - "hevent" - implies "summary"
** "hreview" implies "summary"
** "hentry" implies "entry-summary" (perhaps collapse into "summary" - in practice they're not sufficiently semantically distinct to require separate property names)
** '''OR''' instead of making the one implied property be vocabulary specific, introduce a new generic (applicable to all vocabularies) 'p-name' property (subsuming hCard's 'fn'). See [[microformats-2-brainstorming#further_simplifications|microformats 2 brainstorming: further simplifications]] for latest thoughts along these lines, including the following specific mark-up implied generic properties across all microformats (based on existing published markup use-cases)
*** 'p-name'
*** 'u-url'
*** 'u-photo'

==== flat sets of properties ====
'''What more can we simplify about microformats?'''

Numerous individuals have provided the feedback that whenever there is more than one level of hierarchy in a microformat, many (most?) developers get confused - in particular Kavi Goel of Google / Rich Snippets provided this feedback at a microformats dinner. Thus depending on multiple levels of hierarchy is likely resulting in a loss of authorability, perhaps even accuracy as confusion undoubtedly leads to more errors. Thus:

'''Proposal: simplify all microformats to flat sets of properties. '''

What this means:
* all microformats are simply an object with a set of properties with values.
* no more subproperties- drop the notion of subproperties.
* use composition of multiple microformats for any further hierarchy, e.g. the "location" of an hCalendar event can be an hCard, or the "agent" of one hCard can be another hCard.

For example for hCard this would mean the following specific changes to keep relevant functionality:
* drop "n", promote all "n" subproperties to full properties
** given-name, family-name, additional-name, honorific-prefix, honorific-suffix
* treat "geo" as a nested microformat
* treat "adr" as a nested microformat (what to do about adr's "type"?)
* treat "org" as a flat string and drop "organization-name" and "organization-unit" (in practice rarely used, also not revealed or ignored in contact management user interfaces - e.g. Address Book)

Example: add a middle initial to the previous example Chris Messina's name, and markup each name component:

<source lang=html4strict>
<h1 class="hcard">
<span class="fn">
<span class="given-name">Chris</span>
<abbr class="additional-name">R.</abbr>
<span class="family-name">Messina</span>
</span>
</h1>
</source>

Note:
# use of an explicit span with "fn" to markup his entire formatted name
# use of the abbr element to explicitly indicate the semantic that "R." is merely an abbreviation for his additional-name.

==== distinguishing properties from other classes ====
Current microformats properties re-use generic terms like "summary", "photo", "updated" both for ease of use and understanding.

However, through longer term experience, we've seen sites that accidentally drop (or break) their microformats support (e.g. Upcoming.org, Facebook) because web authors sometimes rewrite all their class names, and either are unaware that microformats were in the page, or couldn't easily distinguish microformats property class names from other site-specific class names.

This issue has been reported by a number of web authors.
* See: [[issues#class-collisions]]

Thus microformats 2 uses ''prefixes'' for property class names, e.g.:
* '''p-summary''' instead of ''summary''
* '''u-photo''' instead of ''photo''
* '''dt-updated''' instead of ''updated''

Such prefixing of all microformats class names was first suggested by Scott Isaacs of Microsoft to Tantek on a visit to Microsoft sometime in 2006/2007, but specifically aimed at making microformats easier to parse. At the time the suggestion was rejected since microformats were focused on web authors rather than parsers.

However, since experience has shown that distinguishing property class names is an issue for '''both web authors and parser developers''', this is a key change that microformats 2 is adopting. See the next section for details.

=== COMMUNITY and TOOLS ===
The second most important constituency in the microformats community are the developers, programmers, tool-makers.

A non-trivial number of them have been sufficiently frustrated with some general issues with microformats that they've done the significant extra work to support very different and less friendly alternatives (microdata, RDFa). Based on this real-world data (market behavior), it behooves us to address these general issues with microformats for this constituency.

==== existing microformats parsing requirements ====
COMMUNITY and TOOLS (that) USE MICROFORMATS
* parser / parsing
* structured
* getting the data out
* json - 1:1 mapping

[[parsing]] microformats currently requires
# a list of root class names of each microformat to be parsed
# a list of properties for each specific microformats, along with knowledge of the type of each property in order to parse their data from potentially different portions of the HTML markup
# some number of format-specific specific rules (markup/content optimizations)

This has meant that whenever a new microformat is drafted/specificied/adopted, parsers need to updated to handle it correctly, at a minimum to parse them when inside other microformats and avoid errantly implying properties from one to the other (containment, [[mfo]] problem).

==== naming conventions for generic parsing ====
I think there is a fairly simple solution to #1 and #2 from the above list, and we can make progress towards minimizing #3. In short:

'''Proposal: a set of naming conventions for microformat root class names and properties that make it obvious when:'''
* a class name represents a microformat root class name
* a class name represents a microformat property name
* a class name represents a microformat property that needs special parsing (specific type of property).

In particular - derived from the real world examples of existing proven microformats (rather than any abstraction of what a schema should have)
* '''"h-*" for root class names''', e.g. "h-card", "h-event", "h-entry"
** The 'h-' prefix is based on the existing microformats naming pattern of starting with 'h'.
* '''"p-*" for simple (text) properties''', e.g. "p-fn", "p-summary"
** vocabulary generic parsing, element text in general, treat certain HTML element/attribute combination as special and use those first, e.g. img/alt, abbr/title.
** The 'p-' prefix is based on the word "property" starting with 'p'.
* '''"u-*" for URL properties''', e.g. "u-url", "u-photo", "u-logo"
** special parsing required: prefer a/href, img/src, object/data etc. attributes to element contents.
** The 'u-' prefix is based on URL/URI starting with the letter 'u', which is the type of most of these related properties.
* '''"dt-*" for datetime properties''', e.g. "dt-start", "dt-end", "dt-bday"
** special parsing required: [[value-class-pattern]], in particular separate date time value parsing for better human readabillity / DRY balance.
** The 'dt-' prefix is based on "date time" having the initials "dt" and the preponderance of existing date time properties starting with "dt", e.g. dtstart, dtend, dtstamp, dtreviewed.
* '''"e-*" for element tree properties''' where the entire contained element hierarchy is the value, e.g. "e-content" (formerly "entry-content") for [[hAtom]]. The 'e-' prefix can also be mnemonically remembered as "element tree", "embedded markup", or "encapsulated markup".
** special parsing required: follow the [http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#serializing-html-fragments HTML spec: Serializing HTML Fragments algorithm] to create a serialization.

This provides a simpler transition/education story for existing microformats authors/publishers:
* "h*" to "h-*", "dt*" to "dt-*", url-like properties to "u-*", entire embedded markup to "e-*", and "p-*" for all "plain text" properties.

See [[microformats-2-prefixes]] for further thoughts and discussions on these and other class prefixes.

Example: taking that simple heading hCard example forward:

<source lang=html4strict>
<h1 class="h-card">Chris Messina</h1>
</source>

As part of microformats 2 we would immediately define root class names and property names for all existing microformats and drafts consistent with this naming convention, and require support thereof from all new implementations, as well as strongly encouraging existing implementations to adopt the simplified microformats 2 syntax and mechanism. Question: which microformats deserve explicit backward compatibility?

As a community we would continue to use the microformats [[process]] both for researching and determining the need for new microformats, and for naming new microformat property names for maximum re-use and interoperability of a shared vocabulary.

If it turns out we need a new property type in the future, we can use one of the remaining single-letter-prefixes to add it to microformats 2. This would require updating of parsers of course, but in practice the number of different types of properties has grown very slowly, and we know from other schema/programming languages that there's always some small limited number of scalar/atomic property types that you need, and using those you can create compound types/objects that represent richer / more complicated types of data. See [[microformats-2-prefixes]] for documentation of existing single-letter class name prefixes in practice.

=== ADVANTAGES ===
This has numerous advantages:
* '''better maintainability''' - much more obvious to web authors/designers/publishers which class names are for/from microformats.
* '''no chance of collision''' - for all practical purposes with existing class names and thus avoiding any need to add more complex CSS style rules to prevent unintended styling effects.
* '''simpler parsing''' - parsers can now do a simple stream-parse (or in-order DOM tree walk) and parse out '''all''' microformat objects, properties, and values, without having to know anything about any specific microformats.
* '''separation of syntax and vocabulary''' - by abstracting microformats 2 syntax independent of any vocabulary, it allows and encourages development of shared vocabularies that can work in alternative syntaxes.

More examples: here is that same heading example with name components:

<source lang=html4strict>
<h1 class="h-card">
<span class="p-fn">
<span class="p-given-name">Chris</span>
<abbr class="p-additional-name">R.</abbr>
<span class="p-family-name">Messina</span>
</span>
</h1>
</source>

with a hyperlink to Chris's URL:

<source lang=html4strict>
<h1 class="h-card">
<a class="p-fn u-url" href="http://factoryjoe.com/">
<span class="p-given-name">Chris</span>
<abbr class="p-additional-name">R.</abbr>
<span class="p-family-name">Messina</span>
</a>
</h1>
</source>

=== COMPATIBILITY ===

microformats 2 is backwards compatible in that in permits content authors to markup with both old and new class names for compatibility with old tools.

Here is a simple example:

<source lang=html4strict>
<h1 class="h-card vcard">
<span class="fn">Chris Messina</span>
</h1>
</source>

a microformats 2 parser would see the class name "h-card" and imply the one required property from the contents, while a microformats 1.0 parser would find the class name "vcard" and then look for the class name "fn". no data duplication is required. this is a very important continuing application of the <abbr title="don't repeat yourself">DRY</abbr> [[principle]].

And the above hyperlinked example with both sets of class names:

<source lang=html4strict>
<h1 class="h-card vcard">
<a class="p-fn u-url n fn url" href="http://factoryjoe.com/">
<span class="p-given-name given-name">Chris</span>
<abbr class="p-additional-name additional-name">R.</abbr>
<span class="p-family-name family-name">Messina</span>
</a>
</h1>
</source>

=== VENDOR EXTENSIONS ===

(this section was only discussed verbally and not written up during discussions - capturing here as it is topical)

Proprietary extensions to formats have typically been shortlived experimental failures with one big recent exception.

Proprietary or experimental CSS3 property implementations have been very successful.

There has been much use of border radius properties and animations/transitions which use CSS properties with vendor-specific prefixes like:

* -moz-border-radius
* -webkit-border-radius

etc.

Note that these are merely string '''prefixes''', not bound to any URL, and thus not namespaces in any practical sense of the word. This is quite an important distinction, as avoiding the need to bind to a URL has made them easier to support and use.

This use of vendor specific CSS properties has in recent years allowed the larger web design/development/implementor communities to experiment and iterate on new CSS features while the features were being developed and standardized.

The benefits have been two-fold:
* designers have been able to make more attractive sites sooner (at least in some browsers)
* features have been market / real-world tested before being fully standardized, thus resulting in better features

Implementers have used/introduced "x-" prefixes for IETF MIME/content-types for experimental content-types, MIME parameter extensions, and HTTP header extensions, per RFC 2045 Section 6.3, RFC 3798 section 3.3, and [https://secure.wikimedia.org/wikipedia/en/wiki/List_of_HTTP_header_fields#Common_non-standard_headers Wikipedia: HTTP header fields - non-standard headers] (could use RFC reference instead) respectively, like:

* application/x-latex (per [https://secure.wikimedia.org/wikipedia/en/wiki/Internet_media_type#Type_x Wikipedia Internet media type: Type x])
* x-spam-score (in email headers)
* X-Pingback (per [http://en.wikipedia.org/wiki/Pingback Wikipedia:Pingback])

Some standard types started as experimental "x-" types, thus demonstrating this experiment first, standardize later approach has worked for at least some cases:

* image/x-png (standardized as image/png, both per [http://tools.ietf.org/html/rfc2083 RFC2083])

There have been times when specific sites have wanted to extend microformats beyond what the set of properties in the microformat, and currently lack any '''experimental''' way to do so - to try and see if a feature (or even a whole format) is interesting in the real world before bothering to pursue researching and walking it through the microformats process. Thus:

'''Proposal:'''
* '*-x-' + '-' + meaningful name for root and property class names
** where "*" indicates the single-character-prefix as defined above
** where "x" indicates a literal 'x' for an experimental extension OR
** OR "x" indicates a vendor prefix (more than one character, e.g. like CSS vendor extension abbreviations, or some stock symbols, avoiding first words/phrases/abbreviations of microformats properties like dt-)
** e.g.
** "h-bigco-one-ring" - a hypothetical "bigco" vendor-specific "one-ring" microformat root class name.
** "p-goog-preptime" - to represent [http://www.google.com/support/webmasters/bin/answer.py?answer=173379 Google's "preptime" property extension] to [[hRecipe]] (aside: "duration" may be another property type to consider separate from "datetime" as it may be subject to different parsing rules.)
** "p-x-prep-time" - a possible experimental property name to be added to hRecipe upon consideration/documentation of real-world usage/uptake.

Background - this proposal is a composition of the following (at least somewhat) successful vendor extension syntaxes
* [http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords CSS 2.1 4.1.2.1 Vendor-specific extensions]
* IETF MIME/content-type "x-*" extensions per RFC 2045 Section 6.3. [http://en.wikipedia.org/wiki/Internet_media_type]
* IETF MIME experimental fields (e.g. x-spam-score)
* HTTP header extensions (e.g. x-pingback)
* note also [http://www.mnot.net/blog/2009/02/18/x- some critical thoughts from mnot]

=== USERS ===
Need more tools and interfaces that:
* publish
* copy/paste
* right-click on a microformat
* share
* search results

discussed some existing like: [[H2VX]] converts hCard to vCard, hCalendar to iCalendar

how would we re-implement Live Clipboard today, making it easier for publishers and developers?

=== SEE ALSO ===
* [[microformats2]]
* [[microformats2-brainstorming]] - moving more experimental / undeveloped / and rejected thoughts ideas here to simplify/progress *this* page further.
* [[microformats2-experimental-properties]] - listing experimental (-x- prefixed) properties and their use
* [[microformats2-prefixes]]
* [[microformats2-faq]]
* [[microformats2-parsing]]
* 2010-05-02 [[events/2010-05-02-microformats-2-0|microformats 2.0 discussion session at FOO East]]

rel-alternate

2013-08-25T18:14:41Z

Zearin: Heading: Minor formatting tweak

{{stub}}

== Special Combinations ==
While <code>rel="alternate"</code> does by itself mean that the destination is some alternate representation or version of the current page, it combines in special ways with other <code>rel</code> values and other attributes to provide different more specific meanings, in particular:

=== With <code>rel="stylesheet"</code> ===
==== Alternate stylesheets ====
<code>rel="alternate stylesheet"</code> is [http://www.w3.org/TR/html4/present/styles.html#h-14.3.1 how you provide an alternate stylesheet] for the document. Note that the stylesheet is ''not'' an alternate representation of the current page.

=== With <code>hreflang</code> ===
==== Alternate language versions ====
When used in combination with the <code>hreflang</code> attribute (with a value other than that of the document itself), <code>rel="alternate"</code> means a link to a version of the current document, but in the language indicated by the <code>hreflang</code> attribute.

Example from http://gmpg.org/xfn/creator :
<source lang=html4strict>
<link href="creator-fr" rel="alternate" hreflang="fr" title="Créateur XFN 1.1" />
</source>

See also: [http://support.google.com/webmasters/bin/answer.py?hl=en&answer=189077 Google Webmaster Tools Help: rel="alternate" hreflang="x"]

=== With <code>media</code> ===
==== Alternate devices and media ====
When used in combination with the <code>media</code> attribute, <code>rel="alternate"</code> means a link to a version of the current document, especially for the specified device or medium indicated by the <code>media</code> attribute.

For example, this is one possible way of linking to a site's mobile version:
<source lang="html4strict">
<a href="http://m.twitter.com" rel="alternate" media="handheld">Twitter mobile site</a>
</source>

=== With <code>type</code> ===
==== Page Feed ====

When used in combination with the <code>type</code> attribute (with a value other than that of the document itself; e.g. other than <code>"text/html"</code>), <code>rel="alternate"</code> means a link to a representation of the contents of the current document in a different format, as designated by the <code>type</code> attribute.

Examples:

<source lang="html4strict">
<link rel="alternate" type="application/rss+xml" href=".rss"
title="RSS feed for this page"/>
<link rel="alternate" type="application/atom+xml" href=".atom"
title="Atom feed for this page"/>
<link rel="alternate" type="application/activitystream+json" href=".as"
title="Activity Streams JSON feed for this page"/>
</source>

=== With <code>type</code> and <code>rel="home"</code> ===
==== Site Feed ====
{{main|rel-home#use_with_rel-alternate}}

'''Proposed:'''
When used in combination with the <code>type</code> attribute (with a value other than that of the document itself, e.g. other than <code>"text/html"</code>), <code>rel="alternate home"</code> means a link to a representation of the contents of the ''site'' (the home page for the current page) in a different format, as designated by the <code>type</code> attribute.

Examples:

<source lang="html4strict">
<link rel="alternate home" type="application/rss+xml" href=".rss"
title="RSS feed for this site"/>
<link rel="alternate home" type="application/atom+xml" href=".atom"
title="Atom feed for this site"/>
<link rel="alternate home" type="application/activitystream+json" href=".as"
title="Activity Streams JSON feed for this site"/>
</source>

== See Also ==
* [[existing-rel-values]]
* [[rel-faq]]
* [[rel-home]], in particular [[rel-home#use_with_rel-alternate|rel-home with rel-alternate proposal]]

rel-alternate

2013-08-25T18:14:03Z

Zearin: Minor edits to formatting, capitalization, and phrasing

{{stub}}

== Special Combinations ==
While <code>rel="alternate"</code> does by itself mean that the destination is some alternate representation or version of the current page, it combines in special ways with other <code>rel</code> values and other attributes to provide different more specific meanings, in particular:

=== With <code>rel="stylesheet"</code> ===
==== Alternate stylesheets ====
<code>rel="alternate stylesheet"</code> is [http://www.w3.org/TR/html4/present/styles.html#h-14.3.1 how you provide an alternate stylesheet] for the document. Note that the stylesheet is ''not'' an alternate representation of the current page.

=== With <code>hreflang</code> ===
==== Alternate language versions ====
When used in combination with the <code>hreflang</code> attribute (with a value other than that of the document itself), <code>rel="alternate"</code> means a link to a version of the current document, but in the language indicated by the <code>hreflang</code> attribute.

Example from http://gmpg.org/xfn/creator :
<source lang=html4strict>
<link href="creator-fr" rel="alternate" hreflang="fr" title="Créateur XFN 1.1" />
</source>

See also: [http://support.google.com/webmasters/bin/answer.py?hl=en&answer=189077 Google Webmaster Tools Help: rel="alternate" hreflang="x"]

=== With media ===
==== Alternate devices and media ====
When used in combination with the <code>media</code> attribute, <code>rel="alternate"</code> means a link to a version of the current document, especially for the specified device or medium indicated by the <code>media</code> attribute.

For example, this is one possible way of linking to a site's mobile version:
<source lang="html4strict">
<a href="http://m.twitter.com" rel="alternate" media="handheld">Twitter mobile site</a>
</source>

=== With <code>type</code> ===
==== Page Feed ====

When used in combination with the <code>type</code> attribute (with a value other than that of the document itself; e.g. other than <code>"text/html"</code>), <code>rel="alternate"</code> means a link to a representation of the contents of the current document in a different format, as designated by the <code>type</code> attribute.

Examples:

<source lang="html4strict">
<link rel="alternate" type="application/rss+xml" href=".rss"
title="RSS feed for this page"/>
<link rel="alternate" type="application/atom+xml" href=".atom"
title="Atom feed for this page"/>
<link rel="alternate" type="application/activitystream+json" href=".as"
title="Activity Streams JSON feed for this page"/>
</source>

=== With <code>type</code> and <code>rel="home"</code> ===
==== Site Feed ====
{{main|rel-home#use_with_rel-alternate}}

'''Proposed:'''
When used in combination with the <code>type</code> attribute (with a value other than that of the document itself, e.g. other than <code>"text/html"</code>), <code>rel="alternate home"</code> means a link to a representation of the contents of the ''site'' (the home page for the current page) in a different format, as designated by the <code>type</code> attribute.

Examples:

<source lang="html4strict">
<link rel="alternate home" type="application/rss+xml" href=".rss"
title="RSS feed for this site"/>
<link rel="alternate home" type="application/atom+xml" href=".atom"
title="Atom feed for this site"/>
<link rel="alternate home" type="application/activitystream+json" href=".as"
title="Activity Streams JSON feed for this site"/>
</source>

== See Also ==
* [[existing-rel-values]]
* [[rel-faq]]
* [[rel-home]], in particular [[rel-home#use_with_rel-alternate|rel-home with rel-alternate proposal]]

rfc-2445

2013-01-23T15:44:22Z

Zearin: Use the hypertext version of RFC documents

<h1>iCalendar <nowiki>RFC 2445</nowiki></h1>
{{TOC-right}}
[http://tools.ietf.org/html/rfc2445 RFC 2445], "Internet Calendaring and Scheduling Core Object Specification (iCalendar)", commonly referred to as iCalendar or iCal, forms the basis of the [[hcalendar|hCalendar]] microformat.

When normatively referencing <nowiki>RFC 2445</nowiki> on this wiki, either do so by linking to this page with:
<nowiki>{{RFC2445}}</nowiki>
or directly to http://tools.ietf.org/html/rfc2445.

== alternate references ==
Avoid linking to the informative HTML translation of rfc2445.txt, which you must explicitly do by avoiding simply using the string <nowiki>RFC 2445</nowiki> in your text, as MediaWiki appears to auto-hyperlink it to the HTML translation thus: RFC 2445.

== previous versions ==
=== vCalendar ===
[http://www.imc.org/pdi/vcal-10.txt vCalendar], sometimes referred to as "iCal 1.0", or vCal.

== see also ==
* [[icalendar-errata|iCalendar errata]]
* [[icalendar-implementations|iCalendar implementations]]
* [[hcalendar|hCalendar]]

hcard-implementations

2009-11-16T22:14:39Z

Zearin: Added vertical-align.

<h1>hCard Implementations</h1>
{{TOC-right}}

This page is an '''informative''' section of the [[hcard|hCard specification]].

The following implementations have been developed which either generate or parse [[hcard|hCards]]. If you have such an hCard implementation, feel free to add it to '''the top''' of the New Implementations section. If you have a page or site which just ''publishes'' hCards, please use [[hcard-examples-in-wild]] instead.

== New Implementations ==
Add new implementations here for evaluation and classification into the below taxonomy of implementations.


<table border="0" class="wikitable sortable" style="font-size: x-small; vertical-align: top">

<caption>hCard Implementations</caption>

<tr>
<th>Input (works with)</th>
<th>Output</th>
<th>Implementation</th>
<th>Description</th>
</tr>

<tr>
<td>vCard</td>
<td>HTML</td>
<td>[http://www.w3.org/2002/12/cal/vcardin.py vcardin.py]</td>
<td>Converts .vcf to .html based on a kid template. Part of [http://www.w3.org/2002/12/cal/ the <acronym title="Resource Description Framework">RDF</acronym> Calendar workspace]</td>
</tr>
<tr>
<td>hCard</td>
<td>vCard</td>
<td>[http://microform.at/hcard2qrcode/ hCard to QR-Code]</td>
<td>Converts a published hCard to a vCard and displays the matching QR-Code.</td>
</tr>
<tr>
<td>Verizon contacts (HTML)</td>
<td>hCard-enhanced input</td>
<td>[http://code.google.com/p/verizon-contact-exporter/ Verizon Contact Exporter]</td>
<td>Adds hcards to a typical HTML page of contacts from someone's Verizon online address book so that they can be exported (say, if someone wants to leave Verizon)</td>
</tr>
<tr>
<td>hCard</td>
<td>Validation results</td>
<td>[http://hcard.geekhood.net/ hCard Validator]</td>
<td>Finally!</td>
</tr>
<tr>
<td>?</td>
<td>?</td>
<td>[http://www.cogmap.com/ Cogmap]</td>
<td>Cogmap has a bunch of org charts marked up with hcard. Desperately needs [[XPN]]!</td>
</tr>
<tr>
<td>TripIt contacts</td>
<td>hCard-enhanced input</td>
<td>[http://www.tripit.com/ TripIt]</td>
<td>The TripIt contact list of your connections is marked up with hCard</td>
</tr>
<tr>
<td>hCard (WordPress plugin)</td>
<td>Avatars (HTML)</td>
<td>[[hAvatar]]</td>
<td>Wordpress plugin displaying avatars for commenters based on their hCard</td>
</tr>
<tr>
<td>hCard</td>
<td>hCard</td>
<td>[[org.microformats.hCard]]</td>
<td>Java hCard parser and creator.</td>
</tr>
<tr>
<td>vCard</td>
<td>hCard</td>
<td>[http://mobileonlinebusiness.com.au/uf/vCard_to_hCard_converter.html Mobile Online Business' vCard to hCard converter]</td>
<td> </td>
</tr>
<tr>
<td>vCard, CSV (Firefox extension)</td>
<td>vCard, hCard</td>
<td>[http://www.jamplanet.com Jam]</td>
<td>An active address book extension for Firefox/Flock. Jam imports Vcard and various CSV formats, and can output contacts in Vcard and hCard format.</td>
</tr>
<tr>
<td>? (Firefox extension)</td>
<td>?</td>
<td>[http://typo3.org/extensions/repository/view/tt_address/2.0.1/ tt_address]</td>
<td>A Firefox extension for [http://www.typo3.com TYPO3]. Supports hCard since the latest release, v2.0.0 </td>
</tr>
<tr>
<td>? (Firefox extension)</td>
<td>?</td>
<td>[https://addons.mozilla.org/firefox/4106/ Operator]</td>
<td>Lets you combine pieces of information on Web sites with applications in ways that are useful. (Firefox-plugin)</td>
</tr>
<tr>
<td>(Wordpress plugin)</td>
<td>hCard, vCard</td>
<td>[http://rafaeloliveira.net/labs/hcard_creator.zip Wordpress hCard Creator]</td>
<td>
I've made this simple plugin for wordpress.
It adds the hCard Options submenu at Options menu, where you can create a simple hCard and put it on your blog using < ?php hcard_creator() ?> to show it.
Also, it is possible to show an "export to vCard" link, which uses Brian Suda X2V. (Got send an e-mail to him regarding this)
</td>
</tr>
<tr>
<td>(Bookmarklet)</td>
<td>highlighted hCards/hCalendars</td>
<td>[http://leftlogic.com/lounge/articles/microformats_bookmarklet/ Microformats Bookmarklet]</td>
<td>A bookmarklet designed for IE6 and IE7, Firefox, Safari, Opera and Camino, that overlays on the current page to allow users to import individual hCards or hCalendars. Written by Remy Sharp.</td>
</tr>
<tr>
<td>(OS X)</td>
<td>hCards, vCards</td>
<td>[http://domanske.de/2006/09/vcardexplorer-04/ vCardExplorer]</td>
<td>A Mac OS X Application, that displays VCF-Files and extracts hCards from Websites written by [http://vcardexplorer.corefault.de Daniel Kagemann].</td>
</tr>
<tr>
<td>(NetNewsWire)</td>
<td>extracted hCards and hCalendars</td>
<td>[http://placenamehere.com/mf/nnwextract/ Extract Microformats]</td>
<td>
A script for NetNewsWire that supports extracting hCard and hCalendar data in blog posts (via technorati service).
Written by [[User:ChrisCasciano|Chris Casciano]]
</td>
</tr>
<tr>
<td>hCard</td>
<td>?</td>
<td>[http://allinthehead.com/hkit/ hKit]</td>
<td>Is an open source PHP 5 parsing library with support for hCard.</td>
</tr>

<tr>
<td>?</td>
<td>?</td>
<td>[http://kitchen.technorati.com/search Technorati Microformats Search]</td>
<td>
Indexes [[hcard|hCard]], [[hcalendar|hCalendar]], and [[hreview|hReview]] as [http://tantek.com/log/2006/05.html#d31t1802 announced by Tantek].

* list of pages with indexing Issues so they can be looked into as to why data is not being extracted
* suda.co.uk/contact
* multipack.co.uk
</td>
</tr>

<tr>
<td>(Dreamweaver 8)</td>
<td>hCards</td>
<td>[http://www.webstandards.org/action/dwtf/microformats/ Dreamweaver Extension suite]</td>
<td>
From the [http://webstandards.org/ Web Standards Project].
Enables the authoring of hCards from within Dreamweaver 8.
</td>
</tr>
<tr>
<td>?</td>
<td>hCards</td>
<td>[http://scooch.gr0w.com/ Scooch]</td>
<td>A slide show and presentation creator that generates a [[hCard]] for individual slide show authors and comment authors with a CSS button to parse and download via [http://suda.co.uk/projects/X2V/ X2V]. Also uses [[hReview]] for slide ratings and [[rel-tag]] for categories.</td>
</tr>
<tr>
<td>(Flock extension)</td>
<td>hCards, hCalendars, xFolk, hReviews</td>
<td>[http://blog.codeeg.com/2006/03/20/flock-tails-flocktails/ Flocktails]</td>
<td>A port of Tails extension for Flock 0.5.12 that looks for hCards, hCalendar, xFolk and hReview and tosses them into a handy topbar</td>
</tr>
<tr>
<td>hCalendar, hCard, hReview, rel-tag</td>
<td>?</td>
<td>[http://opensource.reevoo.com/2006/03/08/release-uformats-12/ uformats]</td>
<td>A Ruby library that can parse [[hCalendar]], [[hCard]], [[hReview]] and [[rel-tag]]</td>
</tr>
<tr>
<td>(Firefox extension)</td>
<td>hCard, hCalendar, hReview, xFolk</td>
<td>[http://blog.codeeg.com/tails-firefox-extension-03/ Tails]</td>
<td>
A Firefox Extension that will display the presence and details of microformats ([[hcard|hCard]], [[hcalendar|hCalendar]], [[hreview|hReview]], [[xfolk|xFolk]]) on a webpage.
[https://addons.mozilla.org/firefox/2240/ Tails Export] is an extended version.
</td>
</tr>
<tr>
<td>hCards(Firefox Extension)</td>
<td>Address Book contacts</td>
<td>[http://www.stripytshirt.co.uk/features/firefox/smartzilla Smartzilla]</td>
<td>A Firefox Extension that finds hCards on web pages and lets you add them to your addressbook.</td>
</tr>
<tr>
<td>(Textpattern plugin)</td>
<td>hCards, other microformats</td>
<td>[http://placenamehere.com/TXP/pnh_mf/ pnh_mf]</td>
<td>
A plugin for [http://textpattern.com/ Textpattern] that supports embedding hCard and other microformats in templates and blog posts.
Written by [http://placenamehere.com/ Chris Casciano].
</td>
</tr>
<tr>
<td>?</td>
<td>?</td>
<td>There is [http://flickr.com/photos/factoryjoe/68755089/ evidence of built-in hCard support in the Konqueror browser]</td>
<td>Specifically, Konqueror 3.5, in KDE 3.5 (kubuntu Breezy w/ update).</td>
</tr>
<tr>
<td>?</td>
<td>?</td>
<td>There is [http://tagcamp.org/index.cgi?ContactList evidence of a kwiki plugin for hCards]</td>
<td>
''Update:'' the [http://svn.kwiki.org/cwest/Kwiki-hCard/ hCard kwiki plugin svn repository].
See the [http://microwiki.caseywest.com/index.cgi?hCard documentation of the hCard kwiki plugin].
</td>
</tr>
<tr>
<td>hCard (Bookmarklet)</td>
<td>vCard</td>
<td>[http://suda.co.uk/projects/X2V/ X2V]</td>
<td>A bookmarklet that parses hCard and produces a .vcf (vCard) stream. Note: needs to be updated as the spec is refined.</td>
</tr>
<tr>
<td>hCard (Firefox extension)</td>
<td>vCard</td>
<td>[http://www.stripytshirt.co.uk/features/firefox/smartzilla Smartzilla]</td>
<td>
By [http://www.stripytshirt.co.uk Duncan Walker].
A [http://www.stripytshirt.co.uk/features/firefox/smartzilla a Firefox extension] that gets hCard data from a webpage, uses Brian Suda's XSL (locally) to transform it to vcard format and opens the resulting .vcf file.
</td>
</tr>
<tr>
<td>hCard (Greasemonkey script)</td>
<td>?</td>
<td>[http://george.hotelling.net/90percent/geekery/greasemonkey_and_microformats.php George's Greasemonkey user script]</td>
<td>
By [http://george.hotelling.net/90percent/ George].
A [http://george.hotelling.net/90percent/geekery/greasemonkey_and_microformats.php Greasemonkey user script] that detects hCards and allows users to easily add them to their address book application.
Relies on the X2V web service to do the conversion.
</td>
</tr>
<tr>
<td>hCard (Greasemonkey script)</td>
<td>vCard</td>
<td>[http://inside.glnetworks.de/2006/06/05/microformats-have-arrived-in-firefox-15-greasemonkey-06/ Greasemonkey script]</td>
<td>By [http://inside.glnetworks.de/ Martin Rehfeld]. An update to the work of [http://blogmatrix.blogmatrix.com/ David Janes]. Finds many microformat elements, including hCards, and [http://blog.davidjanes.com/mtarchives/2005_08.html#003379 provides a popup menu of actions]. The hCard to vCard conversion is done internally within the script. ''This will work with FireFox 1.5+/GreaseMonkey 0.6.4+ now.''</td>
</tr>
<tr>
<td>hCard (Greasemonkey)</td>
<td>vCard</td>
<td>an [http://diveintomark.org/projects/greasemonkey/hcard/ hCard parser Greasemonkey user script]</td>
<td>By [http://diveintomark.org/ Mark Pilgrim]. Self-contained and does not rely on the X2V web service.</td>
</tr>
<tr>
<td>hCard (PHP “extension”)</td>
<td>hCard access for PHP5</td>
<td>[http://www.oliverbrown.me.uk/2005/09/03/a-working-microformats-extension-to-simplexml/ a-working-microformats-extension-to-simplexml]</td>
<td>By Oliver Brown. An "extension" to [http://www.php.net/simplexml SimpleXML] that gives simple access to hCard information in PHP5.</td>
</tr>
<tr>
<td>☑</td>
<td>☒</td>
<td>[http://thedredge.org/2005/06/using-hcards-in-your-blog/ using hCards in your blog]</td>
<td>By [http://thedredge.org/ Andrew D. Hume]. A system (Wordpress plugin?) for [http://thedredge.org/2005/06/using-hcards-in-your-blog/ using hCards in your blog] to represent people leaving comments on blog posts.</td>
</tr>
<tr>
<td>?</td>
<td>hCard</td>
<td>[http://greenbytes.de/tech/webdav/rfc2629.xslt rfc2629.xslt]</td>
<td>Now attempts to generate hCard information ([http://ietf.org/rfc/rfc2629 RFC2629] is an XML format for authoring RFCs and Internet Drafts, see [http://greenbytes.de/tech/webdav/rfc2629xslt/rfc2629xslt.html example document])</td>
</tr>
<tr>
<td>iChat buddy list (OS X, AppleScript)</td>
<td>hCards</td>
<td>[http://tantek.com/microformats/buddylist2hcards.html iChat buddy list to hCards]</td>
<td>Open source AppleScript to automatically convert one's buddy list in the MacOSX iChat AIM client into a valid XHTML 1.0 Strict list of hCards. </td>
</tr>
<tr>
<td>?</td>
<td>?</td>
<td>[http://dev.w3.org/cvsweb/2001/palmagent/ palmagent]</td>
<td>
A collection of palmpilot and sidekick tools.
It includes X2V derivatives xhtml2hcard.xsl and toICal.xsl plus some [http://dev.w3.org/cvsweb/2001/palmagent/hcardTest.html hcardTest] materials.
</td>
</tr>
<tr>
<td>?</td>
<td>?</td>
<td>[http://www.openpsa.org/ OpenPsa 2.x]</td>
<td>
CRM application uses hCard for all person listings.
The widget is [http://www.midgard-project.org/midcom-permalink-922834501b71daad856f35ec593c7a6d reusable across Midgard CMS]
</td>
</tr>
<tr>
<td>URLs</td>
<td>URLs containing hCards</td>
<td>[http://www.metonymie.com/hCard_extract/app.html hCard finder and structured search application]</td>
<td>
By [http://www.metonymie.com Emiliano Martínez Luque].
An experimental [http://www.metonymie.com/hCard_extract/app.html hCard finder and structured search application] that finds hCards within a given set of URLs and returns the ones that match the specified search criteria.
</td>
</tr>
<tr>
<td>Address Book contacts (OS X)</td>
<td>CSV, TDF, Google contacts, hCards</td>
<td>[http://www.milkcarton.be/apps/lustro Lustro]</td>
<td>A free, open source Mac OS X application that exports your Address Book contacts to CSV, tab delimited, Google Contacts, and hCards (of course). It creates a single XHMTL webpage with all your contacts as hCards.</td>
</tr>


</table>

==Authoring==
Implementations you can use to author, create, and publish hCards.

===Web-based Creators===
;[http://microformats.org/code/hcard/creator hCard creator]:Create your own hCards; also has a [http://www.wnas.nl/microformats/hcard/hcardCreator.html Dutch interface]. [[hcard-creator-feedback|hCard Give feedback.]]

===Blogging and CMS tools===
;[http://euphemize.net/blog/plugins/textpattern/jmc_event_manager/ Textpattern plug-in]:jmc_event_manager is a plugin for [http://textpattern.com/ Textpattern] that outputs locations and events in hCard (and hCalendar) formats. Written by [http://euphemize.net/ Joel Courtney].
;[http://wordpress.org/extend/plugins/addressbook/ Wordpress Addressbook plugin]:Display list of addresses from the blog owner's address book, each marked up as an hCard. Maintained by [http://samwilson.id.au Sam Wilson].

===Browser scripts and plug-ins===
Browser plugins that work with existing authoring tools:
; Any browser with javascript and a little bit of CSS : [http://microformats.org/code/hcard/creator microformats.org hCard creator] (see also [http://tantek.com/ Tantek]'s original [http://tantek.com/microformats/hcard-creator.html hCard creator on tantek.com].

===Desktop Authoring Tools===
* ...

==Search and Discovery==
* [http://kitchen.technorati.com/search Technorati Microformats Search] indexes [[hcard|hCard]], [[hcalendar|hCalendar]], and [[hreview|hReview]] as [http://tantek.com/log/2006/05.html#d31t1802 announced by Tantek].
* [http://leftlogic.com/info/articles/microformats_bookmarklet Microformats Bookmarklet] is a bookmarklet designed for Safari (works in Firefox and Camino) that overlays on the current page to allow users to import individual [[hcard|hCards]] or [[hcalendar|hCalendars]]. Written by [http://leftlogic.com Remy Sharp].



==Conversion and Import==
Implementations you can use to importing into an address book application, typically by converting hCard to vCard.

===Web Services===
These return vCard (.vcf) and other contact formats for easy importing into typical address book programs or other processing.
* [http://www.tomota.de www.tomota.de] Online address book that allows to import, export and convert hCard into vCard, ldif, csv and plain text.

* ...

===Firefox Greasemonkey Plugins===
* [http://userscripts.org/scripts/show/36879 Oomph for GreaseMonkey] - Injects the [http://www.visitmix.com/lab/oomph Oomph] javascript for Greasemonkey

===Aggregators===
* ...

===Forms===
* [http://lib.omnia-computing.de/hcardmapper hCard Mapper] maps hCards onto form fields (Javascript based)

==Browsing==
Implementations that detect, display and otherwise highlight hCards in pages.
* ...

===Firefox extension===

[http://www.kaply.com/weblog/operator Operator] - This extension is casual-user, advanced-user and developer friendly. Very customizable and unobstrusive.

===Internet Explorer extension===

[http://www.visitmix.com/lab/oomph Oomph] - This Add-In to Internet Explorer will light up on pages with hCards.

===Flock extension===
* ...

==Open Source==

Open source libraries of hCard parsers and other related code for building hCard implementations. Note: it is very likely that above implementations may be duplicated in this section. That's ok.

;Javascript
: The [http://microformats.org/code/hcard/creator hCard creator] ([[hcard-creator-feedback|hCard creator feedback]]) is a very simple, yet illustrative, open source user interface / form / script which creates an hCard in real-time as you type in a set of contact information.
;Perl
* [http://search.cpan.org/~ussjoin/Data-Microformat-0.01/lib/Data/Microformat/hCard.pm Data::Microformat] - CPAN module for both creating and parsing hCards
;PHP
* [[hKit]]
;Python:
* [http://tommorris.org/files/gmail2hcard-py.txt gmail2hcard-py.txt] - for converting Gmail CSV address book export to hCards
;Ruby:
* [http://github.com/cyril/resumy Resumy] - small tool that is capable to generate Resumes marked up using the hResume Microformat standard into a W3C valid web page.
;Java:
* [[org.microformats.hCard]]
;Objective-C
* [http://www.milkcarton.be/apps/lustro Lustro] is a free and open source Mac OS X application that exports your Address Book contacts to CSV, tab delimited, Google Contacts and hCards off course. It creates a single XHMTL webpage with all your contacts as hCards.

== Additional Applications ==
This section should probably be incorporated into [[hcard-brainstorming]].

There are numerous potential additional uses and applications for hCards on the Web. The following are merely a few thoughts and possibilities that folks have come up with:

* As an open standard/format for [http://www.gravatar.com/ Gravatars].
** Like [http://alper.nl/cgi-bin/OpenAvatar.py?url=http://tantek.com this].
** Wordpress plugin with hCard based replacement for gravatar is in the make. [[User:Alper|Alper]] 12:59, 8 Aug 2007 (PDT)
* Marking up individual authors of blog posts on a group blog
* Marking up people's names and URLs in a blogroll
* Any reference to people in blog posts (e.g. when citing them, or referencing them, or describing them, by name).
* ...

== Related Pages ==
{{hcard-related-pages}}

hcard-implementations

2009-11-16T22:13:10Z

Zearin: Rearranged list into a table (for sorting). Needs further work, but I'm hoping it will be useful for things like sorting, filtering, etc.

<h1>hCard Implementations</h1>
{{TOC-right}}

This page is an '''informative''' section of the [[hcard|hCard specification]].

The following implementations have been developed which either generate or parse [[hcard|hCards]]. If you have such an hCard implementation, feel free to add it to '''the top''' of the New Implementations section. If you have a page or site which just ''publishes'' hCards, please use [[hcard-examples-in-wild]] instead.

== New Implementations ==
Add new implementations here for evaluation and classification into the below taxonomy of implementations.


<table border="0" class="wikitable sortable" style="font-size: x-small">

<caption>hCard Implementations</caption>

<tr>
<th>Input (works with)</th>
<th>Output</th>
<th>Implementation</th>
<th>Description</th>
</tr>

<tr>
<td>vCard</td>
<td>HTML</td>
<td>[http://www.w3.org/2002/12/cal/vcardin.py vcardin.py]</td>
<td>Converts .vcf to .html based on a kid template. Part of [http://www.w3.org/2002/12/cal/ the <acronym title="Resource Description Framework">RDF</acronym> Calendar workspace]</td>
</tr>
<tr>
<td>hCard</td>
<td>vCard</td>
<td>[http://microform.at/hcard2qrcode/ hCard to QR-Code]</td>
<td>Converts a published hCard to a vCard and displays the matching QR-Code.</td>
</tr>
<tr>
<td>Verizon contacts (HTML)</td>
<td>hCard-enhanced input</td>
<td>[http://code.google.com/p/verizon-contact-exporter/ Verizon Contact Exporter]</td>
<td>Adds hcards to a typical HTML page of contacts from someone's Verizon online address book so that they can be exported (say, if someone wants to leave Verizon)</td>
</tr>
<tr>
<td>hCard</td>
<td>Validation results</td>
<td>[http://hcard.geekhood.net/ hCard Validator]</td>
<td>Finally!</td>
</tr>
<tr>
<td>?</td>
<td>?</td>
<td>[http://www.cogmap.com/ Cogmap]</td>
<td>Cogmap has a bunch of org charts marked up with hcard. Desperately needs [[XPN]]!</td>
</tr>
<tr>
<td>TripIt contacts</td>
<td>hCard-enhanced input</td>
<td>[http://www.tripit.com/ TripIt]</td>
<td>The TripIt contact list of your connections is marked up with hCard</td>
</tr>
<tr>
<td>hCard (WordPress plugin)</td>
<td>Avatars (HTML)</td>
<td>[[hAvatar]]</td>
<td>Wordpress plugin displaying avatars for commenters based on their hCard</td>
</tr>
<tr>
<td>hCard</td>
<td>hCard</td>
<td>[[org.microformats.hCard]]</td>
<td>Java hCard parser and creator.</td>
</tr>
<tr>
<td>vCard</td>
<td>hCard</td>
<td>[http://mobileonlinebusiness.com.au/uf/vCard_to_hCard_converter.html Mobile Online Business' vCard to hCard converter]</td>
<td> </td>
</tr>
<tr>
<td>vCard, CSV (Firefox extension)</td>
<td>vCard, hCard</td>
<td>[http://www.jamplanet.com Jam]</td>
<td>An active address book extension for Firefox/Flock. Jam imports Vcard and various CSV formats, and can output contacts in Vcard and hCard format.</td>
</tr>
<tr>
<td>? (Firefox extension)</td>
<td>?</td>
<td>[http://typo3.org/extensions/repository/view/tt_address/2.0.1/ tt_address]</td>
<td>A Firefox extension for [http://www.typo3.com TYPO3]. Supports hCard since the latest release, v2.0.0 </td>
</tr>
<tr>
<td>? (Firefox extension)</td>
<td>?</td>
<td>[https://addons.mozilla.org/firefox/4106/ Operator]</td>
<td>Lets you combine pieces of information on Web sites with applications in ways that are useful. (Firefox-plugin)</td>
</tr>
<tr>
<td>(Wordpress plugin)</td>
<td>hCard, vCard</td>
<td>[http://rafaeloliveira.net/labs/hcard_creator.zip Wordpress hCard Creator]</td>
<td>
I've made this simple plugin for wordpress.
It adds the hCard Options submenu at Options menu, where you can create a simple hCard and put it on your blog using < ?php hcard_creator() ?> to show it.
Also, it is possible to show an "export to vCard" link, which uses Brian Suda X2V. (Got send an e-mail to him regarding this)
</td>
</tr>
<tr>
<td>(Bookmarklet)</td>
<td>highlighted hCards/hCalendars</td>
<td>[http://leftlogic.com/lounge/articles/microformats_bookmarklet/ Microformats Bookmarklet]</td>
<td>A bookmarklet designed for IE6 and IE7, Firefox, Safari, Opera and Camino, that overlays on the current page to allow users to import individual hCards or hCalendars. Written by Remy Sharp.</td>
</tr>
<tr>
<td>(OS X)</td>
<td>hCards, vCards</td>
<td>[http://domanske.de/2006/09/vcardexplorer-04/ vCardExplorer]</td>
<td>A Mac OS X Application, that displays VCF-Files and extracts hCards from Websites written by [http://vcardexplorer.corefault.de Daniel Kagemann].</td>
</tr>
<tr>
<td>(NetNewsWire)</td>
<td>extracted hCards and hCalendars</td>
<td>[http://placenamehere.com/mf/nnwextract/ Extract Microformats]</td>
<td>
A script for NetNewsWire that supports extracting hCard and hCalendar data in blog posts (via technorati service).
Written by [[User:ChrisCasciano|Chris Casciano]]
</td>
</tr>
<tr>
<td>hCard</td>
<td>?</td>
<td>[http://allinthehead.com/hkit/ hKit]</td>
<td>Is an open source PHP 5 parsing library with support for hCard.</td>
</tr>

<tr>
<td>?</td>
<td>?</td>
<td>[http://kitchen.technorati.com/search Technorati Microformats Search]</td>
<td>
Indexes [[hcard|hCard]], [[hcalendar|hCalendar]], and [[hreview|hReview]] as [http://tantek.com/log/2006/05.html#d31t1802 announced by Tantek].

* list of pages with indexing Issues so they can be looked into as to why data is not being extracted
* suda.co.uk/contact
* multipack.co.uk
</td>
</tr>

<tr>
<td>(Dreamweaver 8)</td>
<td>hCards</td>
<td>[http://www.webstandards.org/action/dwtf/microformats/ Dreamweaver Extension suite]</td>
<td>
From the [http://webstandards.org/ Web Standards Project].
Enables the authoring of hCards from within Dreamweaver 8.
</td>
</tr>
<tr>
<td>?</td>
<td>hCards</td>
<td>[http://scooch.gr0w.com/ Scooch]</td>
<td>A slide show and presentation creator that generates a [[hCard]] for individual slide show authors and comment authors with a CSS button to parse and download via [http://suda.co.uk/projects/X2V/ X2V]. Also uses [[hReview]] for slide ratings and [[rel-tag]] for categories.</td>
</tr>
<tr>
<td>(Flock extension)</td>
<td>hCards, hCalendars, xFolk, hReviews</td>
<td>[http://blog.codeeg.com/2006/03/20/flock-tails-flocktails/ Flocktails]</td>
<td>A port of Tails extension for Flock 0.5.12 that looks for hCards, hCalendar, xFolk and hReview and tosses them into a handy topbar</td>
</tr>
<tr>
<td>hCalendar, hCard, hReview, rel-tag</td>
<td>?</td>
<td>[http://opensource.reevoo.com/2006/03/08/release-uformats-12/ uformats]</td>
<td>A Ruby library that can parse [[hCalendar]], [[hCard]], [[hReview]] and [[rel-tag]]</td>
</tr>
<tr>
<td>(Firefox extension)</td>
<td>hCard, hCalendar, hReview, xFolk</td>
<td>[http://blog.codeeg.com/tails-firefox-extension-03/ Tails]</td>
<td>
A Firefox Extension that will display the presence and details of microformats ([[hcard|hCard]], [[hcalendar|hCalendar]], [[hreview|hReview]], [[xfolk|xFolk]]) on a webpage.
[https://addons.mozilla.org/firefox/2240/ Tails Export] is an extended version.
</td>
</tr>
<tr>
<td>hCards(Firefox Extension)</td>
<td>Address Book contacts</td>
<td>[http://www.stripytshirt.co.uk/features/firefox/smartzilla Smartzilla]</td>
<td>A Firefox Extension that finds hCards on web pages and lets you add them to your addressbook.</td>
</tr>
<tr>
<td>(Textpattern plugin)</td>
<td>hCards, other microformats</td>
<td>[http://placenamehere.com/TXP/pnh_mf/ pnh_mf]</td>
<td>
A plugin for [http://textpattern.com/ Textpattern] that supports embedding hCard and other microformats in templates and blog posts.
Written by [http://placenamehere.com/ Chris Casciano].
</td>
</tr>
<tr>
<td>?</td>
<td>?</td>
<td>There is [http://flickr.com/photos/factoryjoe/68755089/ evidence of built-in hCard support in the Konqueror browser]</td>
<td>Specifically, Konqueror 3.5, in KDE 3.5 (kubuntu Breezy w/ update).</td>
</tr>
<tr>
<td>?</td>
<td>?</td>
<td>There is [http://tagcamp.org/index.cgi?ContactList evidence of a kwiki plugin for hCards]</td>
<td>
''Update:'' the [http://svn.kwiki.org/cwest/Kwiki-hCard/ hCard kwiki plugin svn repository].
See the [http://microwiki.caseywest.com/index.cgi?hCard documentation of the hCard kwiki plugin].
</td>
</tr>
<tr>
<td>hCard (Bookmarklet)</td>
<td>vCard</td>
<td>[http://suda.co.uk/projects/X2V/ X2V]</td>
<td>A bookmarklet that parses hCard and produces a .vcf (vCard) stream. Note: needs to be updated as the spec is refined.</td>
</tr>
<tr>
<td>hCard (Firefox extension)</td>
<td>vCard</td>
<td>[http://www.stripytshirt.co.uk/features/firefox/smartzilla Smartzilla]</td>
<td>
By [http://www.stripytshirt.co.uk Duncan Walker].
A [http://www.stripytshirt.co.uk/features/firefox/smartzilla a Firefox extension] that gets hCard data from a webpage, uses Brian Suda's XSL (locally) to transform it to vcard format and opens the resulting .vcf file.
</td>
</tr>
<tr>
<td>hCard (Greasemonkey script)</td>
<td>?</td>
<td>[http://george.hotelling.net/90percent/geekery/greasemonkey_and_microformats.php George's Greasemonkey user script]</td>
<td>
By [http://george.hotelling.net/90percent/ George].
A [http://george.hotelling.net/90percent/geekery/greasemonkey_and_microformats.php Greasemonkey user script] that detects hCards and allows users to easily add them to their address book application.
Relies on the X2V web service to do the conversion.
</td>
</tr>
<tr>
<td>hCard (Greasemonkey script)</td>
<td>vCard</td>
<td>[http://inside.glnetworks.de/2006/06/05/microformats-have-arrived-in-firefox-15-greasemonkey-06/ Greasemonkey script]</td>
<td>By [http://inside.glnetworks.de/ Martin Rehfeld]. An update to the work of [http://blogmatrix.blogmatrix.com/ David Janes]. Finds many microformat elements, including hCards, and [http://blog.davidjanes.com/mtarchives/2005_08.html#003379 provides a popup menu of actions]. The hCard to vCard conversion is done internally within the script. ''This will work with FireFox 1.5+/GreaseMonkey 0.6.4+ now.''</td>
</tr>
<tr>
<td>hCard (Greasemonkey)</td>
<td>vCard</td>
<td>an [http://diveintomark.org/projects/greasemonkey/hcard/ hCard parser Greasemonkey user script]</td>
<td>By [http://diveintomark.org/ Mark Pilgrim]. Self-contained and does not rely on the X2V web service.</td>
</tr>
<tr>
<td>hCard (PHP “extension”)</td>
<td>hCard access for PHP5</td>
<td>[http://www.oliverbrown.me.uk/2005/09/03/a-working-microformats-extension-to-simplexml/ a-working-microformats-extension-to-simplexml]</td>
<td>By Oliver Brown. An "extension" to [http://www.php.net/simplexml SimpleXML] that gives simple access to hCard information in PHP5.</td>
</tr>
<tr>
<td>☑</td>
<td>☒</td>
<td>[http://thedredge.org/2005/06/using-hcards-in-your-blog/ using hCards in your blog]</td>
<td>By [http://thedredge.org/ Andrew D. Hume]. A system (Wordpress plugin?) for [http://thedredge.org/2005/06/using-hcards-in-your-blog/ using hCards in your blog] to represent people leaving comments on blog posts.</td>
</tr>
<tr>
<td>?</td>
<td>hCard</td>
<td>[http://greenbytes.de/tech/webdav/rfc2629.xslt rfc2629.xslt]</td>
<td>Now attempts to generate hCard information ([http://ietf.org/rfc/rfc2629 RFC2629] is an XML format for authoring RFCs and Internet Drafts, see [http://greenbytes.de/tech/webdav/rfc2629xslt/rfc2629xslt.html example document])</td>
</tr>
<tr>
<td>iChat buddy list (OS X, AppleScript)</td>
<td>hCards</td>
<td>[http://tantek.com/microformats/buddylist2hcards.html iChat buddy list to hCards]</td>
<td>Open source AppleScript to automatically convert one's buddy list in the MacOSX iChat AIM client into a valid XHTML 1.0 Strict list of hCards. </td>
</tr>
<tr>
<td>?</td>
<td>?</td>
<td>[http://dev.w3.org/cvsweb/2001/palmagent/ palmagent]</td>
<td>
A collection of palmpilot and sidekick tools.
It includes X2V derivatives xhtml2hcard.xsl and toICal.xsl plus some [http://dev.w3.org/cvsweb/2001/palmagent/hcardTest.html hcardTest] materials.
</td>
</tr>
<tr>
<td>?</td>
<td>?</td>
<td>[http://www.openpsa.org/ OpenPsa 2.x]</td>
<td>
CRM application uses hCard for all person listings.
The widget is [http://www.midgard-project.org/midcom-permalink-922834501b71daad856f35ec593c7a6d reusable across Midgard CMS]
</td>
</tr>
<tr>
<td>URLs</td>
<td>URLs containing hCards</td>
<td>[http://www.metonymie.com/hCard_extract/app.html hCard finder and structured search application]</td>
<td>
By [http://www.metonymie.com Emiliano Martínez Luque].
An experimental [http://www.metonymie.com/hCard_extract/app.html hCard finder and structured search application] that finds hCards within a given set of URLs and returns the ones that match the specified search criteria.
</td>
</tr>
<tr>
<td>Address Book contacts (OS X)</td>
<td>CSV, TDF, Google contacts, hCards</td>
<td>[http://www.milkcarton.be/apps/lustro Lustro]</td>
<td>A free, open source Mac OS X application that exports your Address Book contacts to CSV, tab delimited, Google Contacts, and hCards (of course). It creates a single XHMTL webpage with all your contacts as hCards.</td>
</tr>


</table>

==Authoring==
Implementations you can use to author, create, and publish hCards.

===Web-based Creators===
;[http://microformats.org/code/hcard/creator hCard creator]:Create your own hCards; also has a [http://www.wnas.nl/microformats/hcard/hcardCreator.html Dutch interface]. [[hcard-creator-feedback|hCard Give feedback.]]

===Blogging and CMS tools===
;[http://euphemize.net/blog/plugins/textpattern/jmc_event_manager/ Textpattern plug-in]:jmc_event_manager is a plugin for [http://textpattern.com/ Textpattern] that outputs locations and events in hCard (and hCalendar) formats. Written by [http://euphemize.net/ Joel Courtney].
;[http://wordpress.org/extend/plugins/addressbook/ Wordpress Addressbook plugin]:Display list of addresses from the blog owner's address book, each marked up as an hCard. Maintained by [http://samwilson.id.au Sam Wilson].

===Browser scripts and plug-ins===
Browser plugins that work with existing authoring tools:
; Any browser with javascript and a little bit of CSS : [http://microformats.org/code/hcard/creator microformats.org hCard creator] (see also [http://tantek.com/ Tantek]'s original [http://tantek.com/microformats/hcard-creator.html hCard creator on tantek.com].

===Desktop Authoring Tools===
* ...

==Search and Discovery==
* [http://kitchen.technorati.com/search Technorati Microformats Search] indexes [[hcard|hCard]], [[hcalendar|hCalendar]], and [[hreview|hReview]] as [http://tantek.com/log/2006/05.html#d31t1802 announced by Tantek].
* [http://leftlogic.com/info/articles/microformats_bookmarklet Microformats Bookmarklet] is a bookmarklet designed for Safari (works in Firefox and Camino) that overlays on the current page to allow users to import individual [[hcard|hCards]] or [[hcalendar|hCalendars]]. Written by [http://leftlogic.com Remy Sharp].



==Conversion and Import==
Implementations you can use to importing into an address book application, typically by converting hCard to vCard.

===Web Services===
These return vCard (.vcf) and other contact formats for easy importing into typical address book programs or other processing.
* [http://www.tomota.de www.tomota.de] Online address book that allows to import, export and convert hCard into vCard, ldif, csv and plain text.

* ...

===Firefox Greasemonkey Plugins===
* [http://userscripts.org/scripts/show/36879 Oomph for GreaseMonkey] - Injects the [http://www.visitmix.com/lab/oomph Oomph] javascript for Greasemonkey

===Aggregators===
* ...

===Forms===
* [http://lib.omnia-computing.de/hcardmapper hCard Mapper] maps hCards onto form fields (Javascript based)

==Browsing==
Implementations that detect, display and otherwise highlight hCards in pages.
* ...

===Firefox extension===

[http://www.kaply.com/weblog/operator Operator] - This extension is casual-user, advanced-user and developer friendly. Very customizable and unobstrusive.

===Internet Explorer extension===

[http://www.visitmix.com/lab/oomph Oomph] - This Add-In to Internet Explorer will light up on pages with hCards.

===Flock extension===
* ...

==Open Source==

Open source libraries of hCard parsers and other related code for building hCard implementations. Note: it is very likely that above implementations may be duplicated in this section. That's ok.

;Javascript
: The [http://microformats.org/code/hcard/creator hCard creator] ([[hcard-creator-feedback|hCard creator feedback]]) is a very simple, yet illustrative, open source user interface / form / script which creates an hCard in real-time as you type in a set of contact information.
;Perl
* [http://search.cpan.org/~ussjoin/Data-Microformat-0.01/lib/Data/Microformat/hCard.pm Data::Microformat] - CPAN module for both creating and parsing hCards
;PHP
* [[hKit]]
;Python:
* [http://tommorris.org/files/gmail2hcard-py.txt gmail2hcard-py.txt] - for converting Gmail CSV address book export to hCards
;Ruby:
* [http://github.com/cyril/resumy Resumy] - small tool that is capable to generate Resumes marked up using the hResume Microformat standard into a W3C valid web page.
;Java:
* [[org.microformats.hCard]]
;Objective-C
* [http://www.milkcarton.be/apps/lustro Lustro] is a free and open source Mac OS X application that exports your Address Book contacts to CSV, tab delimited, Google Contacts and hCards off course. It creates a single XHMTL webpage with all your contacts as hCards.

== Additional Applications ==
This section should probably be incorporated into [[hcard-brainstorming]].

There are numerous potential additional uses and applications for hCards on the Web. The following are merely a few thoughts and possibilities that folks have come up with:

* As an open standard/format for [http://www.gravatar.com/ Gravatars].
** Like [http://alper.nl/cgi-bin/OpenAvatar.py?url=http://tantek.com this].
** Wordpress plugin with hCard based replacement for gravatar is in the make. [[User:Alper|Alper]] 12:59, 8 Aug 2007 (PDT)
* Marking up individual authors of blog posts on a group blog
* Marking up people's names and URLs in a blogroll
* Any reference to people in blog posts (e.g. when citing them, or referencing them, or describing them, by name).
* ...

== Related Pages ==
{{hcard-related-pages}}

Main Page

2008-12-27T02:38:34Z

Zearin: Rearranged the bulleted links alphabetically

<entry-title>Welcome to the microformats wiki!</entry-title>
__TOC__
Please start with the [[introduction]] page and read [[how-to-play]] before making any edits.

==Introduction==
* Learn what it means to be [http://microformats.org/wiki/posh <abbr title="Plain Old Semantic HTML">POSH</abbr>].
* See the [http://microformats.org/about/ about page], [http://microformats.org/ latest news], [[press]], [[presentations]], [[books]], [[podcasts]], & [[screencasts]].
* Have questions? Read the [[faq|frequently asked questions]] and see the [[glossary]] for new terms.
* Want to learn more in person? Check out microformats [[events]].
* The microformats wiki has a number of neat enhancements to assist development and contributions to microformats. See the [[wiki-2]] introduction page for a summary of how best to publish on this wiki.

==Definition==
Microformats are small bits of HTML that represent things like people, events, tags, etc. in web pages.

Microformats enable the publishing of higher fidelity information on the Web, providing the fastest and simplest way to support feeds and APIs for your website. See more explanations of [[what-are-microformats|what are microformats]], and [[what-can-you-do-with-microformats|what you can do with them]].

== How to contribute ==
Do you want to help take microformats to the next level? You can:

* [[get-started|Get started]] by adding microformats to your website, services, and products.
* [[advocacy|Advocate]] the use of microformats on other web sites, especially those you use.
* Write a [[testimonial]].
* Do something on the [[to-do|to do list]].
* Join the [[irc|IRC Channel]] and [[mail|mailing lists]] to learn and help answer questions (read the [[mailing-lists#General_guidelines|general guidelines]] before posting).
* [[Main_Page#microformats_wiki_translations|Translate this microformats wiki into other languages]] to make microformats more accessible to readers of languages around the world.
* Before proposing any new microformats, make sure your website is [[POSH]], [[get-started|uses existing microformats]], and then read the [[process]].

== Specifications ==
[[microformats|Microformats]] open standards specifications.

* [[hcalendar|hCalendar]] - [http://microformats.org/code/hcalendar/creator hCalendar creator]
* [[hcard|hCard]] - [http://microformats.org/code/hcard/creator hCard creator]
* [[rel-license]]
* [[rel-nofollow]]
* [[rel-tag]]
* [[vote-links|VoteLinks]]
* [[XFN]] - [http://gmpg.org/xfn/creator XFN creator]
* [[XMDP]]
* [[xoxo|XOXO]]

== Drafts ==
* [[adr|adr]] - for marking up address information
* [[geo|geo]] - for marking up [http://en.wikipedia.org/wiki/WGS84 WGS84] geographic coordinates (latitude; longitude)
* [[hatom|hAtom]] - syndicating episodic content (e.g. weblog postings)
* [[haudio|hAudio]]
* [[hproduct|hProduct]]
* [[recipe|hRecipe]]
* [[hresume|hResume]] - for publishing resumes and CVs
* [[hreview|hReview]] - [http://microformats.org/code/hreview/creator hReview creator]
* [[rel-directory]] - to indicate that the destination of a hyperlink is a directory listing containing an entry for the current page
* [[rel-enclosure]] - for indicating attachments (e.g. files) to download and cache
* [[rel-home]] - indicate a hyperlink to the homepage of the site
* [[rel-payment]] - indicate a payment mechanism
* [[robots-exclusion|robots exclusion]]
* [[xfolk|xFolk]]

== Design Patterns ==
{{design_patterns}} 
* [[elemental-microformat|elemental microformats]]
* [[compound-microformat|compound microformats]]

== Exploratory Discussions ==
See: [[exploratory-discussions]] for details of research and analysis of real-world [[examples]], existing formats, and brainstorming of possible new microformats, per the microformats [[process]].

== Examples ==
* [[examples-in-the-wild]]
* [[implementations]]
* [[zen-garden]]

== Resources ==
See [[resources]].

== User centric development ==
*[[user-interface]]
*[[data-portability]]
*[[social-network-portability]]

== Shared work areas ==
* [[to-do]]
* [[templates]]
* [http://microformats.org/wiki/delete pages for deletion] 
* [[Special:Specialpages|"Special" wiki pages]]
* [[year-in-review]]

== Tools, test cases, additional research ==
The first place to look for examples, code, and test cases is in the pages for each individual microformat. There are only a few cross-cutting [[tools|tools and services]] that need to process more than one microformat. That section is intended for editors, parsers, validators, test cases, and other information relevant across multiple microformats.

== Microformats wiki translations ==
<span id="microformats_wiki_translations_in_other_languages">You may read and edit microformats articles in many other languages:</span>

* languages with over 100 articles
** [[Main_Page-fr|<span lang="fr">Français</span> (French)]] <span lang="fr">{{UpdateMarker-fr}}</span>
* languages with over 10 articles
** [[Main_Page-pt-br|<span lang="pt-br">Português</span> (Brazilian Portuguese)]]
** [[Main_Page-ja|<span lang="ja">日本語</span> (Japanese)]]
** [[Main_Page-ru|<span lang="ru">Русский</span> (Russian)]]
* languages with over 2 articles
** [[Main_Page-cs|<span lang="cs">Česky</span> (Czech)]] {{NewMarker}}
** [[Main_Page-de|<span lang="de">Deutsch</span> (German)]]
** [[Main_Page-es|<span lang="es">Español</span> (Spanish)]]
** [[Main_Page-gl|<span lang="gl">Galego</span> (Galician)]] {{NewMarker}}
** [[Main_Page-pl|<span lang="pl">Polski</span> (Polish)]]
** [[Main_Page-ro|<span lang="ro">Română</span> (Romanian)]] {{NewMarker}}
** [[Main_Page-zh|<span lang="zh">汉语</span> (Chinese)]]
* languages just started
** [[Main_Page-ar|<span lang="ar">العربية</span> (Arabic)]]
** [[Main_Page-th|<span lang="th">ภาษาไทย</span> (Thai)]]
** [[Main_Page-it|<span lang="it">Italiano</span> (Italian)]] {{NewMarker}}
** [[Main_Page-ko|<span lang="ko">한국어</span> (Korean)]] {{NewMarker}}
* elsewhere
**[http://en.wikipedia.org/wiki/Microformat Wikipedia's article on microformats] has been translated into a number of languages.

See also [[other-languages]], and [[how-to-start-new-translation|how-to-start-a-new-translation]].