Microformats Wiki - User contributions [en]

microformats2-json

2021-12-25T22:38:08Z

Zegnat: JSON Schema has moved to its own repository with automated testing

This page contains an informative description of <dfn style="font-style:normal;font-weight:bold">microformats2 JSON</dfn>, the canonical output format of the [[microformats2-parsing|microformats2 parsing]] algorithm. Note that the [[microformats2-parsing|microformats2 parsing specification]] is the only authoritative source for its own output.

'''Goal:''' Document possible values – with examples – of the official serialisation format of microformats generated by [[microformats2#Parsers|microformats2 parsers]]. This format can be used to compare parsers and create [[test-suite|test suites]]. It also clarifies the format for other specifications that rely on the serialisation, such as [https://micropub.net/ Micropub].

'''Audience:''' Parser authors, parser users, web developers. This document is written for anyone working with microformats2 in their serialised form, so they can read about the format generated by the parsing algorithm without having to understand the actual parsing itself.

'''Author(s):''' [[User:Zegnat|Martijn van der Ven]]

<div style="margin:1em;padding:1em;background:#FFDC00;font-size:smaller">⚠️ The JSON format used is not pinned to a specific [https://indieweb.org/JSON#Specs JSON specification]. See [https://github.com/microformats/microformats2-parsing/issues/23 issue #23] for a discussion on the subject.</div>

== Parsed Document Format ==

Parsers collect not only microformats2 objects, but also [[rel|link relationships]]. Parsing an entire document will result in an outer object with 3 members named <code>items</code>, <code>rels</code>, and <code>rel-urls</code>:

<source lang=javascript>{
"items": [],
"rels": {},
"rel-urls": {}
}</source>

# <code>items</code> is an array of [[microformats2-json#microformat2_Objects|microformats2 objects]], ordered according to their order in the source document.
# <code>rels</code> is an object where the member names reflect all <code>rel</code>-values found in the source document.
# <code>rel-urls</code> is an object where the member names reflect all URLs found in the source document with <code>rel</code>-values attached.

== microformat2 Objects ==

<div style="margin:1em;padding:1em;background:#F8F7EC;font-size:smaller">🕰️ '''This section is outdated.''' An extra optional member called <code>id</code> was [http://microformats.org/wiki/index.php?title=microformats2-parsing&diff=66967&oldid=66966 added in December].</div>

The '''microformats2 object''' is an object with 2 required members named <code>type</code> and <code>properties</code>, as well as an optional member named <code>children</code>:

<source lang=javascript>{
"type": [],
"properties": {},
"children": []
}</source>

# <code>type</code> is an array of the types that identify the microformat, ordered alphabetically.
# <code>properties</code> is an object where the member names reflect all properties found for the microformat.
# The optional member <code>children</code> is an array of other microformats2 objects that were found nested in the current one.

=== type ===

<div style="margin:1em;padding:1em;background:#7FDBFF;font-size:smaller">ℹ️ '''This section needs expanding.''' It needs an example of a microformats2 object that uses multiple types and still makes sense.</div>

The <code>type</code> member contains an alphabetically sorted array of root class names. These names express what the microformat is expressing, and are often coupled to which properties to expect through documented conventions.

The root class names are individual strings that match the pattern <code>h-([0-9a-z]+-)?[a-z]+</code>.

The following example shows an <code>h-entry</code> type microformats2 object, with a single property attached. The <code>h-entry</code> type is [[h-entry|documented on the wiki]], this way types point towards documented conventions that hold true no matter what the source document was.

<source lang=javascript>{
"type": ["h-entry"],
"properties": {
"summary": ["A short published note."]
}
}</source>

=== properties ===

<div style="margin:1em;padding:1em;background:#F8F7EC;font-size:smaller">🕰️ '''This section is outdated.''' A new [[microformats2-parsing#parse_an_img_element_for_src_and_alt|valid value for images]] was [http://microformats.org/wiki/index.php?title=microformats2-parsing&diff=66969&oldid=66967 added in January].</div>

The <code>properties</code> member contains an object where every member name is a microformats2 property name, and every member value is an array of the found microformats2 values. Even when only one value is given, it will be inside an array.

Valid values in the value array are one of the following:

# a string value, the most common value,
# an embedded markup object, containing both a plain string value and the verbatim mark-up from the source document, or
# another microformat2 object.

If a microformat2 object is used as the value of a property, it will gain the additional member <code>value</code> to express a plain string representation. If a consuming application does not understand the nested microformat2 object, it can opt to treat it as that string.

If a microformat2 object is used as the value of a property, when the parser is also instructed to return it as an embedded markup object, it will gain the additional member <code>html</code>.

The following example shows an <code>h-entry</code> type microformats2 object, with 3 properties to show the 3 different types of properties. The <code>name</code> is a single string, the <code>content</code> contains verbatim HTML from the source document, and the <code>author</code> is a nested microformat2 <code>h-card</code> object. The <code>in-reply-to</code> property has been added to show how one property may contain multiple valid values.

To see what these properties mean in the context of an <code>h-entry</code> type, see [[h-entry#Core_Properties|the Core Properties section on the type’s wiki page]].

<source lang=javascript>{
"type": ["h-entry"],
"properties": {
"name": ["An example entry"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut. Dicta ut repellat quisquam repellendus et iste consequatur.</p>\n<p>Consequuntur repellat sed aut in et dolores. Consequatur amet quo enim.</p>",
"value": "Ut non sit saepe porro porro est aut. Dicta ut repellat quisquam repellendus et iste consequatur.\nConsequuntur repellat sed aut in et dolores. Consequatur amet quo enim."
}
],
"author": [
{
"type": ["h-card"],
"properties": {
"name": ["Mx Example"],
"url": ["https://example.com/"]
},
"value": "Mx Example"
}
],
"in-reply-to": [
{
"type": ["h-cite"],
"properties": {
"name": ["Example Domain"],
"author": ["IANA"],
"url": ["https://example.org/"]
},
"value": "https://example.org/"
},
"https://example.net/"
]
}
}</source>

=== children ===

The optional <code>children</code> member is added when nested microformats are found and contains an array of microformat2 objects.

This happens when other objects are contained with outer ones, e.g. data is marked up with microformats within the content of an <code>h-entry</code>. Another possibility is that the outer object exists to group all its nested objects, such as an <code>[[h-feed]]</code>.

The following example shows an <code>h-feed</code> type microformats2 object with a few properties that describe the feed, and an array of <code>h-entry</code> objects as its children.

<source lang=javascript>{
"type": ["h-feed"],
"properties": {
"author": ["https://example.org/"],
"name": ["Example Feed"]
},
"children": [
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 1"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
},
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 2"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
},
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 3"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
}
]
}</source>

== rels Object ==

The '''rels object''' is an object with any amount of members, where every member name is a link relationship (see [[existing-rel-values|the documented existing relationships]] for examples) and every member value is an array of URLs.

Any relationship can have 1 or more URLs in its matching array. And any URL can be in several arrays, if it has several relationships associated with it.

The following example shows a rels object where 4 URLs were found in the source document:

* <code><nowiki>https://example.com/</nowiki></code> identifies the homepage using [[rel-home|the <code>home</code> relationship value]],
* <code><nowiki>https://example.com/fr/</nowiki></code> identifies an alternative version of the home page, combining the <code>home</code> and [[rel-alternate|<code>alternate</code> relationship]] values,
* <code><nowiki>https://example.com/a</nowiki></code> and <code><nowiki>https://example.com/b</nowiki></code> both identify an author of the current page using [[rel-author|the <code>author</code> relationship value]].

<source lang=javascript>{
"home": [
"https://example.com/",
"https://example.com/fr/"
],
"author": [
"https://example.com/a",
"https://example.com/b"
],
"alternate": ["https://example.com/fr/"]
}</source>

== rel-urls Object ==

The '''rel-urls object''' is an object with any amount of members, where every member name is a URL and every member value is an object.

The value object will always contain a member with the name <code>rels</code>. That member’s value will be an array of alphabeticall sorted link relationships applicable to the URL.

The value object may additionally contain any members with the following names:

* <code>hreflang</code>
* <code>media</code>
* <code>title</code>
* <code>type</code>

The values of these members are always a single string. The value is taken from the link’s attribute in the source document matching the member name. E.g. in HTML the value of an <code><a></code> element’s <code>hreflang</code> attribute will be the value of the URL’s <code>hreflang</code> member in the rel-urls object.

In addition the optional member named <code>text</code> is added if any text is associated with the URL in the source document. E.g. in HTML the text within an <code><a></code> element will be used.

The following example shows what the companion rel-urls object to the above rels object might look like. It shows the text that was used to link to the authors, giving us more context of who they are. It also makes clear that the alternative version of the home page is in fact in French and meant for handheld devices.

<source lang=javascript>{
"https://example.com/": {
"rels": ["home"],
"text": "Example Homepage"
},
"https://example.com/a": {
"rels": ["author"],
"text": "Mx Adam"
},
"https://example.com/b": {
"rels": ["author"],
"text": "Mx Baker"
},
"https://example.com/fr/": {
"rels": ["alternate", "home"],
"hreflang": "fr",
"media": "handheld",
"text": "Example page d’accueil"
}
}</source>

The rel-urls object was a later addition to the specification. It exists because so much information was lost when only the rels object was created. The discussion that shaped it [[microformats2-parsing-brainstorming#more_information_for_rel-based_formats|can be read on the brainstorming page]].

== See Also ==

* [https://tools.ietf.org/html/rfc8259 RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format]
* [https://github.com/Zegnat/microformats2-json-schema JSON Schema for microformats2 objects], by [https://vanderven.se/martijn/ Martijn van der Ven]
* [https://github.com/cleverdevil/microformats2 Type- and vocabulary-aware microformats2 JSON validator in Python], by [https://cleverdevil.io/ Jonathan LaCour]

irc

2021-05-31T21:18:57Z

Zegnat: /* Logs */ Fix minority of LogBot links, add note on LogBot only logging Freenode and shutting down soon

{{DISPLAYTITLE:#microformats on libera.chat}}
{{TOC-right}}
;shortURL
:http://ufs.cc/w/irc

== Quick Start ==
You may use a IRC client application such as [http://colloquy.info/ Colloquy] (Mac or iOS) or [https://market.android.com/details?id=org.yaaic&feature=search_result Yaaic on Android] to join:
* irc://irc.libera.chat/microformats






The microformats IRC channel is hosted on the libera.chat server. See [[irc#Joining_a_server_and_channel|Joining a server and channel]] help for further information and use of client applications which provide additional services (authenticated nicknames, logging, etc.).

== Logs ==
Recent logs of the Freenode #microformats IRC channel can be found at:
* https://chat.indieweb.org/microformats (Libera.Chat)
* https://freenode.logbot.info/microformats (Freenode, [https://freenode.logbot.info/_shutdown shutting down 2021-06])

Older logs can be found at the following locations for the following periods:
* [https://chat.indieweb.org/microformats/2011-02-12 2011-02-12]–[https://chat.indieweb.org/microformats current] at https://chat.indieweb.org/microformats (switched from Freenode to Libera.Chat on [https://chat.indieweb.org/microformats/2021-05-26 2021-05-26])
* [http://logbot.glob.com.au/?c=freenode%23microformats&s=20090220&e=20090220 2009-02-20]–[https://freenode.logbot.info/microformats current] at [https://freenode.logbot.info/microformats freenode.logbot.info microformats IRC Logs] (continues to log Freenode even after 2021-05-26)
----
* [http://krijnhoetmer.nl/irc-logs/microformats/20131028 2013-10-28] (partial) - [https://krijnhoetmer.nl/irc-logs/microformats/20160129 2016-01-29] (partial) at [http://krijnhoetmer.nl/irc-logs/microformats krijnhoetmer microformats IRC Logs]
* [http://krijnhoetmer.nl/irc-logs/microformats/20130811 2013-08-11] (partial) - [http://krijnhoetmer.nl/irc-logs/microformats/20130917 2013-09-17] (partial) at [http://krijnhoetmer.nl/irc-logs/microformats krijnhoetmer microformats IRC Logs]
* [http://krijnhoetmer.nl/irc-logs/microformats/20120726 2012-10-09] (partial) - [http://krijnhoetmer.nl/irc-logs/microformats/20130807 2013-08-07] at [http://krijnhoetmer.nl/irc-logs/microformats krijnhoetmer microformats IRC Logs]
* [http://krijnhoetmer.nl/irc-logs/microformats/20120726 2012-07-26] - [http://krijnhoetmer.nl/irc-logs/microformats/20120916 2012-09-16] (partial) at [http://krijnhoetmer.nl/irc-logs/microformats krijnhoetmer microformats IRC Logs]
* [http://krijnhoetmer.nl/irc-logs/microformats/20090220 2009-02-20] - [http://krijnhoetmer.nl/irc-logs/microformats/20120621 2012-06-21] (partial) at [http://krijnhoetmer.nl/irc-logs/microformats krijnhoetmer microformats IRC Logs]
* [http://rbach.priv.at/Microformats/IRC/2011-04-05 2011-04-05] at [http://rbach.priv.at/Microformats-IRC/ rbach microformats IRC Logs]
* [http://rbach.priv.at/Microformats/IRC/2011-02-24 2011-02-24] - [http://rbach.priv.at/Microformats/IRC/2011-03-03 2011-03-03] at [http://rbach.priv.at/Microformats-IRC/ rbach microformats IRC Logs]
* [http://rbach.priv.at/Microformats/IRC/2009-08-28 2009-08-28] - [http://rbach.priv.at/Microformats/IRC/2010-09-27 2010-09-27] at [http://rbach.priv.at/Microformats-IRC/ rbach microformats IRC Logs]
* [http://rbach.priv.at/Microformats/IRC/2009-03-26 2009-03-26] - [http://rbach.priv.at/Microformats/IRC/2009-06-29 2009-06-29] at [http://rbach.priv.at/Microformats-IRC/ rbach microformats IRC Logs]
* 2009-02-09 - 2009-02-20 '''missing'''. if anyone has any logs for this time period, please upload them and add links here.
* [http://rbach.priv.at/Microformats/IRC/2009-01-14 2009-01-14] - [http://rbach.priv.at/Microformats/IRC/2009-02-09 2009-02-09] at [http://rbach.priv.at/Microformats-IRC/ rbach microformats IRC Logs]
* [http://krijnhoetmer.nl/irc-logs/microformats/20080825 2008-08-25] - [http://krijnhoetmer.nl/irc-logs/microformats/20090114 2009-01-14] at [http://krijnhoetmer.nl/irc-logs/microformats krijnhoetmer microformats IRC Logs]
* 2008-08-16 - 2008-08-24 '''missing'''. if anyone has any logs for this time period, please upload them and add links here.
* [http://rbach.priv.at/Microformats/IRC/2005-11-16 2005-11-16] - [http://rbach.priv.at/Microformats/IRC/2008-08-16 2008-08-16] at [http://rbach.priv.at/Microformats-IRC/ rbach microformats IRC Logs]

Until sometime on 2007-07-16, there was an [http://microformat.makedatamakesense.com/log_feed/ atom feed] provided for the [http://rbach.priv.at/Microformats-IRC/ rbach IRC Logs].

=== logs status ===
* [http://logbot.glob.com.au/?c=freenode%23microformats logbot.glob.com.au microformats IRC Logs] are current and live
* [http://krijnhoetmer.nl/irc-logs/microformats krijnhoetmer microformats IRC Logs] appears to have stopped logging as of 2016-01.
** I emailed and heard back from Krijn on 2016-03-19 "Yeah, sorry, I know, server resources are very low for that (old) machine. I think it's sort of EOL.." [http://logs.glob.uno/?c=freenode%23microformats&s=21+Mar+2016&e=21+Mar+2016&h=Krijn#c86411] -- gRegor
* [http://rbach.priv.at/Microformats-IRC/ rbach IRC Logs] appear to have stopped logging as of 2009-06-29.

== People on IRC ==
See our [[irc-people|list of IRC regulars]] and their normal timezones.

Our channel has regular admins, who are also mailing list and wiki admins. If you want to get their attention, just say "adminhelp".

==Bots on IRC==
The IRC channel uses these bots:
* [[Loqi]] - logs IRC, posts notifications to IRC of wiki edits
** If Loqi is missing, see https://indieweb.org/Loqi for instructions
** If Wiki edits are missing, ask an admin for "adminhelp", and reference [[admin-how-to#irc]]

=== Previous Bots ===
These bots were active ~2005-2009? (actual dates can likely be confirmed by checking old IRC logs)
* [[mfbot]] - logs all edits to this wiki. (Contact: [[User:RyanKing|Ryan King]])
* [[mflogbot]] - logs the irc channel itself to archives on the web. (Contact: [[User:RobertBachmann|Robert Bachmann]])
* [http://joiwiki.ito.com/joiwiki/index.cgi?jibot jibot]

==== Greeting Bot ====
To display a brief description of who you are each time you join the channel, you can use “JiBot” to create a definition for your username. To do so pass the <tt>?def</tt> command using something like the following convention (be brief):

<code>?def jdoe is John Doe and can be found online at <nowiki>http://www.example.com</nowiki></code>

More information about using JiBot commands can be found on the [http://joiwiki.ito.com/joiwiki/index.cgi?jibot jibot website]

== Getting started with IRC ==
'''Please note:''' These directions relate specifically to the services that [http://libera.chat/ Libera.chat] offers. Other IRC servers may differ with the services they offer and how to operate them. You can also read a complete guide at https://libera.chat/guides

===Joining a server and channel===
Most clients will offer you a connection dialogue showing the required fields for connection. The details to connect to the server are:

*Server: <code>irc.libera.chat</code>
*Port: <code>6667</code> (usually default)

You should also fill in any fields to set your alias, real name and email address. If available, save these settings for later to speed up connecting in future.

More on setting a password protected alias can be [[irc#Creating_a_registered_nickname|read here]].

Once connected, you will most likely be presented with the "MOTD" (message of the day). For the first visit, it is advisable to read this to find out about the server's policies and other important pieces of news and help, otherwise it can be ignored and you can either [[irc#Creating_a_registered_nickname|authenticate your alias]] or join a channel.

Your client may display to you a listing of all available channels. Locate <code>#microformats</code> and select to join, or type <code>'''/join #microformats'''</code> into the command line available to you in your client (where you've just been shown your connection).

Assuming you've connected correctly, you should now find youself in the microformats channel!

More detailed, but general, advice can be [http://www.irchelp.org/irchelp/irctutorial.html#intro read here].

===Creating a registered nickname===
Registration means that a password becomes associated with your alias/nickname/sign-in name and from the point of registration authorisation is required to communicate using that alias.

Registration of a nickname is required for some channels, and should be done to protect your identity.

To register with [https://libera.chat Libera.chat], you must communicate with their service known as NickServ. The two basic command you will need to get started are:

For registration: <code>/msg nickserv register ''password'' ''email''</code>

With <code>''password''</code> being a value of your choice. You must also associate an email address with your nickname

Your client may offer you an option to set your alias and password, so that you will not have to manually enter this information on each join. Refer to your client's help files for more on this.

These commands can be typed directly into the server window upon join, or whilst in a channel, just as you would normally send a message.

More detailed user registration command information can be found in [https://libera.chat/guides/registration Libera's guides]

===Communicating===
Sending a message to a channel may be as simple as joining the channel and typing into the window, just as you would with an Instant Messenger. You can refer to your client's help files for quicker/alternative methods of doing the following. For all clients the following commands are available (the parts in bold must be used, but are not seen by others):

'''Sending a message to the entire channel you are currently in:'''

Command: <kbd>'''/msg''' Hello world!</kbd>

Result: <samp><Bill> Hello world!</samp>

'''Sending an action/emotive/3rd person statement:'''

Command: <kbd>'''/me''' dances a code jig</kbd>

Result: <samp>Bill dances a code jig</samp>

'''Sending a message to one person only (private chat):'''

Command: <kbd>'''/msg Bob''' Hi, would you like to code jig?</kbd>

Result (for Bob only): <samp><Bill> Hi, would you like to code jig?</samp>

==Clients==
The following clients are recommended by #microformats participants:



===Windows===
* [http://www.mirc.com/ mIRC] — Popular Windows client. Trial version only.
* [http://xchat.org/ X-Chat] — Popular cross-platform client. [http://www.silverex.org/download/ Free Windows version] available.
* [http://www.adiirc.com/ AdiIRC] — Simple C# based IRC client.
* [http://www.miranda-im.org/ Miranda] — Lightweight, muti-protocol instant messenger.

=== Mac ===
* [http://colloquy.info Colloquy] — open source, free
* [http://homepage.mac.com/philrobin/conversation/ Conversation]
* [http://sourceforge.net/projects/fire Fire] — open source, free
* [http://www.conceitedsoftware.com/products/linkinus Linkinus]
* [http://www.chipersoft.com/minerva/ Minerva]
* [http://www.snak.com/ Snak]
* [http://xchataqua.sourceforge.net/twiki/bin/view/Main/WebHome X-Chat Aqua]
** now has [http://www.portableapps.org PortableApps] version — [http://www.macupdate.com/info.php/id/21685/portable-x-chat-aqua MacUpdate link]
* [http://www.aquaticx.com/ Xirc]

===Cross-platform===
* [http://pidgin.im/ Pidgin] — Popular open-source multi-protocol windows client, using libpurple
* [http://irssi.org/ Irssi] — Unix client, often run from a shell, sometimes [http://f0rked.com/articles/irssi in conjunction with 'screen'].
* [http://jirc.hick.org/jirc/ jIRCii]

== meetups ==
The idea of having IRC meetups (a set time for a meeting on IRC) has been suggested by [[User:RyanKing|Ryan King]], as it appears to work well for the WordPress community and may help us from time-to-time. As of yet, there are no plans to have meetups.

==IRC and microformats==
=== hCard ===
<div class="discussion">
* ''How do we maintain info about ircing in our hCards (nick, network, fav-channels?)?''
** presumably this would be done with a URL. - [[User:Tantek|Tantek]] 18:42, 30 July 2009 (UTC)
</div>

== Related discussions ==
* [[chat]] [[chat-examples|chat examples]], [[chat-formats|chat formats]], and [[chat-brainstorming|chat brainstorming]]

==See also==
*[[irc-meetups]]
*[[discuss|Other discussion fora]]

spread-microformats

2020-10-10T11:23:05Z

Zegnat: Update to btrem's CC0 release of the SVG!

{{DISPLAYTITLE:Spread Microformats}}

Inspired by [http://spreadfirefox.com/ Spread Firefox], this page is for sharing community resources for marketing microformats such as [[buttons]], banners, wallpaper / desktop screens, logo graphics, [[stickers]], t-shirts etc.

== Email ==
* See [[advocacy-email-samples]] for some sample emails you can copy/customize and send to site owners to encourage them adopt microformats.

== Wallpaper ==
=== Wallpaper and desktop screens. ===
* A [https://web.archive.org/web/20111128072549/http://remiprevost.com/images/wallpapers/microformats/ wallpaper] by [[User:Remi|Rémi Prévost]]

== Logo ==
https://indieweb.org/images/8/80/microformats-logo.png

=== logo text ===
https://web.archive.org/web/20110820103746/http://img.skitch.com/20090715-c3xmikadkj8udt4sq6aqfkqtac.png

* High-resolution [http://vault.simplebits.com/bits/microformats/microformats-logo.eps EPS] and [http://vault.simplebits.com/bits/microformats/microformats-logo.png transparent PNG] versions of the microformats logo text by [[User:DanCederholm|Dan Cederholm]].
* the microformats typeface is [https://www.emigre.com/Fonts/Solex Solex Medium] by Emigre.

=== logo mark ===
* An [https://web.archive.org/web/20111128072549/http://remiprevost.com/images/wallpapers/microformats/mf-vector.svg SVG] and [https://web.archive.org/web/20111128072549/http://remiprevost.com/images/wallpapers/microformats/mf-vector.png PNG] (for Fireworks) version, by [[User:Remi|Rémi Prévost]]. Released under [https://creativecommons.org/licenses/by-nc-sa/3.0/ CC BY-NC-SA].
* An [https://github.com/btrem/microformats/blob/master/logos/microformats.svg SVG] version (and alternative [https://github.com/btrem/microformats/blob/master/logos/microformats-orange.svg orange colour]) by [https://btrem.com Brian Tremblay]. Released under [https://creativecommons.org/publicdomain/zero/1.0/ CC0 1.0 Universal (CC0 1.0) Public Domain Dedication].
** Also available (slightly modified) [https://github.com/edent/SuperTinyIcons/pull/442 as part of] the [https://github.com/edent/SuperTinyIcons Super Tiny Web Icons collection]. Released under [https://github.com/edent/SuperTinyIcons/blob/e6ea45f6441bd0111295b2713df73c1502de6ec5/LICENSE MIT License].

== POSH ==
* [[posh|POSH]] logos and buttons

== stickers ==
See the [[stickers]] page to easily order a set of moo microformats stickers!

== T-Shirts ==
* See [http://flickr.com/photos/tags/microformatstshirt photos of microformats tshirts on Flickr] (the [http://flickr.com/photos/tags/microformatstshirt/clusters/ clusters] are especially fun)
** Note also [http://pixelsebi.com/2006-10-26/microformats-t-shirt-in-second-life/ microformats t-shirt in Second Life]
=== do it yourself tshirts ===
[[User:TheJbf|Burcu Dogan]] has made her own microformats t-shirt:

http://web.archive.org/web/20120528054541if_/http://i44.tinypic.com/2s01i1j.jpg

For those who are not able to find a microformats t-shirt, it is possible to make one at home less than an hour. The requirements for such a pressing process are listed below:
* A high quality microformats logo (which can be found below the '''Logo headline''' on this page)
* A black t-shirt
* An iron-on transfer paper for '''dark t-shirts''' (note that printers doesn't print white, so there're special papers to print white on dark)
* An iron an a hard surface. (Ironing press with a large surface is highly recommended.)
* A laser printer
* Sharp and sensitive scissors
* Non-metalic heat resisting papers

('''Warning:''' Take the instructions on the transfer paper you bought as the first reference, we're not responsible for unsuccessful attempts. Tips about pressing can change from paper to paper.)

Firstly, you need to print the logo on the transfer paper. Transfer papers for dark t-shirts are sticky backed white papers which vary in size. You need to decide which size you want to press on your t-shirt. A4 and A3 are suitable for microformats t-shirts.

Print the logo with a black background. The result of the paper printed should look like this:

http://web.archive.org/web/20120528052329if_/http://i40.tinypic.com/2ylqqmb.jpg

(You can, of course decrease, the amount of background area to save ink)

Now it is time to separate logo from the background. Carefully clip the edges and get the logo all alone. White borders should stay with the green layers, don't make a mistake by clipping them out.

Prepare the iron press, you will need the highest temperature with no stream to transfer successfully. Give your press at least 10 minutes to heat fully. While the iron is heating, decide which position your logo should appear. Use a ruler to check if the logo is positioned symmetrically.

http://web.archive.org/web/20120528061614if_/http://i41.tinypic.com/2v334pc.png

If your iron press is heated, gently peel the tiny paper on the back of the transfer paper to make it sticky. Place it on the t-shirt and put 1 or 2 non-metalic heat resisting paper of any kind on the logo. Be sure that transfer paper doesn't overlap.

http://web.archive.org/web/20120601000105if_/http://i40.tinypic.com/kcl7gk.png

Press the iron for 10-15 seconds. This actually depends on the paper you are using, so it is best to follow the instructions on the iron-on transfer paper you purchased. If necessary repress the iron on the whole surface for 5-10 seconds again.

And, you made a new microformats t-shirt! Don't forget to take a picture and share.

Note that you should hand wash your t-shirt and iron it from back carefully. Don't forget that it is also possible to use another fabrics such as bags to print microformats logos. We're waiting for your creations.

== External online community resources ==

=== Video ===
* See [http://www.youtube.com/results?search_query=microformats videos of microformats on YouTube] or [http://vimeo.com/groups/microformats Vimeo], in particular, a [http://www.youtube.com/watch?v=UAV4SGpPuQI video of a microformats tshirt] ([http://www.flickr.com/photos/fumi/372068162/ photo]).

===Social networking===
Groups for fans and advocates of microformats to join or follow:
* [http://www.facebook.com/microformats Facebook microformats fan page]
* [http://www.facebook.com/group.php?gid=2374732285 Facebook microformats group]
* [http://flickr.com/groups/microformats/ Flickr microformats group]
* [http://getsatisfaction.com/microformats microformats on Satisfaction]
* [http://twitter.com/microformats microformats on Twitter].

=== wiki-communities ===
* [http://en.wikipedia.org/wiki/Wikipedia:WikiProject_Microformats Wikipedia: Project Microformats]
**[http://ko.wikipedia.org/wiki/%EC%9C%84%ED%82%A4%EB%B0%B1%EA%B3%BC:%EC%9C%84%ED%82%A4%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8_%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C%ED%8F%AC%EB%A7%B7 -" - in Korean]
**[http://zh.wikipedia.org/wiki/Wikipedia:%E5%B0%88%E9%A1%8C/%E5%BE%AE%E6%A0%BC%E5%BC%8F -" - in Chinese]
* [http://www.usemod.com/cgi-bin/mb.pl?MicroFormats meatball:microformats] -- a first page (stub to be reviewed) dedicated to have any review/opinion from the meatballers especially on the wiki-formats.
* [http://communitywiki.org/fr/MicroFormats communitywiki:microformats] -- an old multilingual page with a blockcodemachine proposal.

== See Also ==
* [[advocacy]]
* [[buttons]]
* [[podcasts]]
* [[presentations]]
* [[press]]
* [[2d_barcodes]]

User:Zegnat

2020-10-08T17:39:04Z

Zegnat: Add CC PD.

[[User:Zegnat|Zegnat]] is the handle of [https://vanderven.se/martijn Martijn van der Ven].

Mostly focussed on [[microformats2-parsing|microformats2 parsing]] ([https://github.com/microformats/microformats2-parsing/issues?utf8=%E2%9C%93&q=author%3AZegnat GitHub issues opened]) and have started contributing to [https://github.com/indieweb/php-mf2 the PHP parser].

You can also find me [https://indieweb.org/User:Vanderven.se_martijn on the IndieWeb] and [[IRC|#microformats on freenode]].

----
{{cc-public-domain-release}}

spread-microformats

2020-10-08T17:30:11Z

Zegnat: /* Logo */ Fix Dan Cederholm links, point typeface link to a non-white page, add more licensing information

{{DISPLAYTITLE:Spread Microformats}}

Inspired by [http://spreadfirefox.com/ Spread Firefox], this page is for sharing community resources for marketing microformats such as [[buttons]], banners, wallpaper / desktop screens, logo graphics, [[stickers]], t-shirts etc.

== Email ==
* See [[advocacy-email-samples]] for some sample emails you can copy/customize and send to site owners to encourage them adopt microformats.

== Wallpaper ==
=== Wallpaper and desktop screens. ===
* A [https://web.archive.org/web/20111128072549/http://remiprevost.com/images/wallpapers/microformats/ wallpaper] by [[User:Remi|Rémi Prévost]]

== Logo ==
https://indieweb.org/images/8/80/microformats-logo.png

=== logo text ===
https://web.archive.org/web/20110820103746/http://img.skitch.com/20090715-c3xmikadkj8udt4sq6aqfkqtac.png

* High-resolution [http://vault.simplebits.com/bits/microformats/microformats-logo.eps EPS] and [http://vault.simplebits.com/bits/microformats/microformats-logo.png transparent PNG] versions of the microformats logo text by [[User:DanCederholm|Dan Cederholm]].
* the microformats typeface is [https://www.emigre.com/Fonts/Solex Solex Medium] by Emigre.

=== logo mark ===
* An [https://web.archive.org/web/20111128072549/http://remiprevost.com/images/wallpapers/microformats/mf-vector.svg SVG] and [https://web.archive.org/web/20111128072549/http://remiprevost.com/images/wallpapers/microformats/mf-vector.png PNG] (for Fireworks) version, by [[User:Remi|Rémi Prévost]]. Released under [https://creativecommons.org/licenses/by-nc-sa/3.0/ CC BY-NC-SA].
* An [https://github.com/btrem/svg-graphics/blob/master/web-technologies/microformats.svg SVG] version by [https://btrem.com Brian Tremblay]. Released under [https://github.com/btrem/svg-graphics/blob/72b50c0690ccd8db3198118468868679540eb358/LICENSE GNU General Public License v3.0].
** Also available (slightly modified) [https://github.com/edent/SuperTinyIcons/pull/442 as part of] the [https://github.com/edent/SuperTinyIcons Super Tiny Web Icons collection]. Released under [https://github.com/edent/SuperTinyIcons/blob/e6ea45f6441bd0111295b2713df73c1502de6ec5/LICENSE MIT License].

== POSH ==
* [[posh|POSH]] logos and buttons

== stickers ==
See the [[stickers]] page to easily order a set of moo microformats stickers!

== T-Shirts ==
* See [http://flickr.com/photos/tags/microformatstshirt photos of microformats tshirts on Flickr] (the [http://flickr.com/photos/tags/microformatstshirt/clusters/ clusters] are especially fun)
** Note also [http://pixelsebi.com/2006-10-26/microformats-t-shirt-in-second-life/ microformats t-shirt in Second Life]
=== do it yourself tshirts ===
[[User:TheJbf|Burcu Dogan]] has made her own microformats t-shirt:

http://web.archive.org/web/20120528054541if_/http://i44.tinypic.com/2s01i1j.jpg

For those who are not able to find a microformats t-shirt, it is possible to make one at home less than an hour. The requirements for such a pressing process are listed below:
* A high quality microformats logo (which can be found below the '''Logo headline''' on this page)
* A black t-shirt
* An iron-on transfer paper for '''dark t-shirts''' (note that printers doesn't print white, so there're special papers to print white on dark)
* An iron an a hard surface. (Ironing press with a large surface is highly recommended.)
* A laser printer
* Sharp and sensitive scissors
* Non-metalic heat resisting papers

('''Warning:''' Take the instructions on the transfer paper you bought as the first reference, we're not responsible for unsuccessful attempts. Tips about pressing can change from paper to paper.)

Firstly, you need to print the logo on the transfer paper. Transfer papers for dark t-shirts are sticky backed white papers which vary in size. You need to decide which size you want to press on your t-shirt. A4 and A3 are suitable for microformats t-shirts.

Print the logo with a black background. The result of the paper printed should look like this:

http://web.archive.org/web/20120528052329if_/http://i40.tinypic.com/2ylqqmb.jpg

(You can, of course decrease, the amount of background area to save ink)

Now it is time to separate logo from the background. Carefully clip the edges and get the logo all alone. White borders should stay with the green layers, don't make a mistake by clipping them out.

Prepare the iron press, you will need the highest temperature with no stream to transfer successfully. Give your press at least 10 minutes to heat fully. While the iron is heating, decide which position your logo should appear. Use a ruler to check if the logo is positioned symmetrically.

http://web.archive.org/web/20120528061614if_/http://i41.tinypic.com/2v334pc.png

If your iron press is heated, gently peel the tiny paper on the back of the transfer paper to make it sticky. Place it on the t-shirt and put 1 or 2 non-metalic heat resisting paper of any kind on the logo. Be sure that transfer paper doesn't overlap.

http://web.archive.org/web/20120601000105if_/http://i40.tinypic.com/kcl7gk.png

Press the iron for 10-15 seconds. This actually depends on the paper you are using, so it is best to follow the instructions on the iron-on transfer paper you purchased. If necessary repress the iron on the whole surface for 5-10 seconds again.

And, you made a new microformats t-shirt! Don't forget to take a picture and share.

Note that you should hand wash your t-shirt and iron it from back carefully. Don't forget that it is also possible to use another fabrics such as bags to print microformats logos. We're waiting for your creations.

== External online community resources ==

=== Video ===
* See [http://www.youtube.com/results?search_query=microformats videos of microformats on YouTube] or [http://vimeo.com/groups/microformats Vimeo], in particular, a [http://www.youtube.com/watch?v=UAV4SGpPuQI video of a microformats tshirt] ([http://www.flickr.com/photos/fumi/372068162/ photo]).

===Social networking===
Groups for fans and advocates of microformats to join or follow:
* [http://www.facebook.com/microformats Facebook microformats fan page]
* [http://www.facebook.com/group.php?gid=2374732285 Facebook microformats group]
* [http://flickr.com/groups/microformats/ Flickr microformats group]
* [http://getsatisfaction.com/microformats microformats on Satisfaction]
* [http://twitter.com/microformats microformats on Twitter].

=== wiki-communities ===
* [http://en.wikipedia.org/wiki/Wikipedia:WikiProject_Microformats Wikipedia: Project Microformats]
**[http://ko.wikipedia.org/wiki/%EC%9C%84%ED%82%A4%EB%B0%B1%EA%B3%BC:%EC%9C%84%ED%82%A4%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8_%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C%ED%8F%AC%EB%A7%B7 -" - in Korean]
**[http://zh.wikipedia.org/wiki/Wikipedia:%E5%B0%88%E9%A1%8C/%E5%BE%AE%E6%A0%BC%E5%BC%8F -" - in Chinese]
* [http://www.usemod.com/cgi-bin/mb.pl?MicroFormats meatball:microformats] -- a first page (stub to be reviewed) dedicated to have any review/opinion from the meatballers especially on the wiki-formats.
* [http://communitywiki.org/fr/MicroFormats communitywiki:microformats] -- an old multilingual page with a blockcodemachine proposal.

== See Also ==
* [[advocacy]]
* [[buttons]]
* [[podcasts]]
* [[presentations]]
* [[press]]
* [[2d_barcodes]]

spread-microformats

2020-10-08T17:12:09Z

Zegnat: /* logo mark */ Add Brian Tremblay's SVG work

{{DISPLAYTITLE:Spread Microformats}}

Inspired by [http://spreadfirefox.com/ Spread Firefox], this page is for sharing community resources for marketing microformats such as [[buttons]], banners, wallpaper / desktop screens, logo graphics, [[stickers]], t-shirts etc.

== Email ==
* See [[advocacy-email-samples]] for some sample emails you can copy/customize and send to site owners to encourage them adopt microformats.

== Wallpaper ==
=== Wallpaper and desktop screens. ===
* A [https://web.archive.org/web/20111128072549/http://remiprevost.com/images/wallpapers/microformats/ wallpaper] by [[User:Remi|Rémi Prévost]]

== Logo ==
https://indieweb.org/images/8/80/microformats-logo.png
=== logo text ===

https://web.archive.org/web/20110820103746/http://img.skitch.com/20090715-c3xmikadkj8udt4sq6aqfkqtac.png

* High-resolution [http://simplebits.com/bits/microformats/microformats-logo.eps EPS] and [http://simplebits.com/bits/microformats/microformats-logo.png transparent PNG] versions of the microformats logo text by [[User:DanCederholm|Dan Cederholm]].
* the microformats typeface is [http://new.myfonts.com/fonts/emigre/solex/medium/ Solex] by Emigre.

=== logo mark ===
* An [https://web.archive.org/web/20111128072549/http://remiprevost.com/images/wallpapers/microformats/mf-vector.svg SVG] and [https://web.archive.org/web/20111128072549/http://remiprevost.com/images/wallpapers/microformats/mf-vector.png PNG] (for Fireworks) version, by [[User:Remi|Rémi Prévost]]. Released under [https://creativecommons.org/licenses/by-nc-sa/3.0/ CC BY-NC-SA].
* An [https://github.com/btrem/svg-graphics/blob/master/web-technologies/microformats.svg SVG] version by [https://btrem.com Brian Tremblay]. Also available [https://github.com/edent/SuperTinyIcons/pull/442 as part of] the [https://github.com/edent/SuperTinyIcons Super Tiny Web Icons collection].

== POSH ==
* [[posh|POSH]] logos and buttons

== stickers ==
See the [[stickers]] page to easily order a set of moo microformats stickers!

== T-Shirts ==
* See [http://flickr.com/photos/tags/microformatstshirt photos of microformats tshirts on Flickr] (the [http://flickr.com/photos/tags/microformatstshirt/clusters/ clusters] are especially fun)
** Note also [http://pixelsebi.com/2006-10-26/microformats-t-shirt-in-second-life/ microformats t-shirt in Second Life]
=== do it yourself tshirts ===
[[User:TheJbf|Burcu Dogan]] has made her own microformats t-shirt:

http://web.archive.org/web/20120528054541if_/http://i44.tinypic.com/2s01i1j.jpg

For those who are not able to find a microformats t-shirt, it is possible to make one at home less than an hour. The requirements for such a pressing process are listed below:
* A high quality microformats logo (which can be found below the '''Logo headline''' on this page)
* A black t-shirt
* An iron-on transfer paper for '''dark t-shirts''' (note that printers doesn't print white, so there're special papers to print white on dark)
* An iron an a hard surface. (Ironing press with a large surface is highly recommended.)
* A laser printer
* Sharp and sensitive scissors
* Non-metalic heat resisting papers

('''Warning:''' Take the instructions on the transfer paper you bought as the first reference, we're not responsible for unsuccessful attempts. Tips about pressing can change from paper to paper.)

Firstly, you need to print the logo on the transfer paper. Transfer papers for dark t-shirts are sticky backed white papers which vary in size. You need to decide which size you want to press on your t-shirt. A4 and A3 are suitable for microformats t-shirts.

Print the logo with a black background. The result of the paper printed should look like this:

http://web.archive.org/web/20120528052329if_/http://i40.tinypic.com/2ylqqmb.jpg

(You can, of course decrease, the amount of background area to save ink)

Now it is time to separate logo from the background. Carefully clip the edges and get the logo all alone. White borders should stay with the green layers, don't make a mistake by clipping them out.

Prepare the iron press, you will need the highest temperature with no stream to transfer successfully. Give your press at least 10 minutes to heat fully. While the iron is heating, decide which position your logo should appear. Use a ruler to check if the logo is positioned symmetrically.

http://web.archive.org/web/20120528061614if_/http://i41.tinypic.com/2v334pc.png

If your iron press is heated, gently peel the tiny paper on the back of the transfer paper to make it sticky. Place it on the t-shirt and put 1 or 2 non-metalic heat resisting paper of any kind on the logo. Be sure that transfer paper doesn't overlap.

http://web.archive.org/web/20120601000105if_/http://i40.tinypic.com/kcl7gk.png

Press the iron for 10-15 seconds. This actually depends on the paper you are using, so it is best to follow the instructions on the iron-on transfer paper you purchased. If necessary repress the iron on the whole surface for 5-10 seconds again.

And, you made a new microformats t-shirt! Don't forget to take a picture and share.

Note that you should hand wash your t-shirt and iron it from back carefully. Don't forget that it is also possible to use another fabrics such as bags to print microformats logos. We're waiting for your creations.

== External online community resources ==

=== Video ===
* See [http://www.youtube.com/results?search_query=microformats videos of microformats on YouTube] or [http://vimeo.com/groups/microformats Vimeo], in particular, a [http://www.youtube.com/watch?v=UAV4SGpPuQI video of a microformats tshirt] ([http://www.flickr.com/photos/fumi/372068162/ photo]).

===Social networking===
Groups for fans and advocates of microformats to join or follow:
* [http://www.facebook.com/microformats Facebook microformats fan page]
* [http://www.facebook.com/group.php?gid=2374732285 Facebook microformats group]
* [http://flickr.com/groups/microformats/ Flickr microformats group]
* [http://getsatisfaction.com/microformats microformats on Satisfaction]
* [http://twitter.com/microformats microformats on Twitter].

=== wiki-communities ===
* [http://en.wikipedia.org/wiki/Wikipedia:WikiProject_Microformats Wikipedia: Project Microformats]
**[http://ko.wikipedia.org/wiki/%EC%9C%84%ED%82%A4%EB%B0%B1%EA%B3%BC:%EC%9C%84%ED%82%A4%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8_%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C%ED%8F%AC%EB%A7%B7 -" - in Korean]
**[http://zh.wikipedia.org/wiki/Wikipedia:%E5%B0%88%E9%A1%8C/%E5%BE%AE%E6%A0%BC%E5%BC%8F -" - in Chinese]
* [http://www.usemod.com/cgi-bin/mb.pl?MicroFormats meatball:microformats] -- a first page (stub to be reviewed) dedicated to have any review/opinion from the meatballers especially on the wiki-formats.
* [http://communitywiki.org/fr/MicroFormats communitywiki:microformats] -- an old multilingual page with a blockcodemachine proposal.

== See Also ==
* [[advocacy]]
* [[buttons]]
* [[podcasts]]
* [[presentations]]
* [[press]]
* [[2d_barcodes]]

h-card-brainstorming

2019-04-11T07:57:15Z

Zegnat: /* Pronouns */ Add link to Jamie Tanna

{{stub}}

<entry-title>h-card Brainstorming </entry-title>
This page is for brainstorming about various uses, details of, and additions to [[h-card]].

This page contains <em>proposals</em>. For the current state please see [[h-card]].

__TOC__
Brainstorm proposals that illustrate how to use the existing hCard spec will likely be incorporated into existing hCard documentation such as:
* [[h-card-authoring]]
* [[h-card-examples]]
* ... and potentially additional documentation.

== Explorations ==
Add new explorations here as === === triple level headings

=== Pronouns ===
Ashton McAllan marks up her pronouns as:
<source lang=html4strict>
<span class="p-x-pronoun-nominative">she</span> /
<span class="p-x-pronoun-oblique">her</span> /
<span class="p-x-pronoun-posessive">hers</span>
</source>
in her [[h-card]] on http://acegiak.net/

Each pronoun is listed individually with it's form allowing parsers and programs to identify them for different uses. Other languages may include different forms of pronoun. This solution is suggested after reading [https://en.wikipedia.org/wiki/Personal_pronoun the Wikipedia Personal Pronouns article]

[[User:GRegorLove|gRegor Morrill]] marks up his pronouns similarly (note corrected spelling of "possessive"):
<source lang=html4strict>
<p>Pronouns: <span class="p-x-pronoun-nominative">he</span>/
<span class="p-x-pronoun-oblique">him</span>/
<span class="p-x-pronoun-possessive">his</span></p>
</source>
on http://gregorlove.com/about/

[https://www.jvt.me/ Jamie Tanna] followed this same pattern, and [https://www.jvt.me/posts/2019/04/10/pronouns-microformats/ blogged about implementing it, and why].

[http://vanderven.se/martijn/ Martijn van der Ven] marks up his pronouns (more clearly on [http://vanderven.se/martijn/gender/ his gender page]) using only a dictionary URL:
<source lang=html4strict>
<p>
I use male pronouns (
<a href="https://nl.wiktionary.org/wiki/hij#Persoonlijk_voornaamwoord" lang="nl" class="u-pronoun">hij</a>,
<a href="https://sv.wiktionary.org/wiki/han#Pronomen" lang="sv" class="u-pronoun">han</a>,
<a href="https://en.wiktionary.org/wiki/he#Pronoun" class="u-pronoun">he</a>,
<a href="https://de.wiktionary.org/wiki/er#Personalpronomen" lang="de" class="u-pronoun">er</a>
) but also accept gender-neutral pronouns (
<a href="https://sv.wiktionary.org/wiki/hen#Pronomen" lang="sv" class="u-pronoun">hen</a>,
<a href="https://en.wiktionary.org/wiki/they#Pronoun" class="u-pronoun">they</a>
). If you are writing about me and are in doubt: ask.
</p></source>

* There is no way Martijn sees himself supporting 4 cases for English (subjective, objective, reflexive, and possessive), 5 cases for German (nominative, accusative, genitive, dative, and possessive), and a possible 13 cases for Finnish in the future. Doubtful anyone else will be doing that either: at least 1 implementation (by [https://unrelenting.technology/ Greg V]) of English p-x-pronoun-* exists in the wild that only specifies 2 cases.
* Simplifying for human visitors who can instantly get started with my pronoun of choice is seen as more important than catering to theoretical computer parsers.
* His thought process [http://wiki.zegnat.net/microformats/pronoun has been documented].
* [https://00dani.me/ Danielle McLean] is also using <code>u-pronoun</code>, linking to the popular [https://pronoun.is/ Pronoun Island] registry page for her pronouns: <code><nowiki><a class="u-pronoun" href="https://pronoun.is/she/her">she/her</a></nowiki></code>.
** Started looking for a way to mark-up pronouns because the p-sex/p-gender-identity combo is “[https://chat.indieweb.org/2017-10-29/1509268972735000 unbelievably terrible]”.
** [https://chat.indieweb.org/2017-10-29/1509269322353000 Agreed with Martijn’s arguments] for why a link is better than per-case mark-up.
* [[User:Sknebel|sknebel]] [https://chat.indieweb.org/microformats/2018-08-19#t1534703222243600 notes] (2018-08-19) that he would prefer to see text (that possibly leads him to Google for proper use) than just URLs in the parser output. Although the URLs are useful, [https://chat.indieweb.org/microformats/2018-08-19#t1534705418184500 a simple name:url pair] would increase the usefulness.
** Possibly something like <code>.[up]-pronoun.h-pronoun > .u-url</code> paired with <code>.[up]-pronoun.h-pronoun > .p-name</code>. [[h-cite]] would be prior art as also expressing “a reference to <i>[something]</i> in some way with name and url”. [https://chat.indieweb.org/microformats/2018-08-19/1534705492641900]

==== Other Platforms ====
A [https://github.com/tootsuite/mastodon/issues/3211 GitHub issue about adding pronoun fields] to [https://indieweb.org/Mastodon Mastodon] was [https://chat.indieweb.org/microformats/2018-08-19#t1534700249077000 discussed in #microformats] on 2018-08-19. The comments in the issue bring up some points previously brought up by Martijn in regards to how useful it would be for machines. Also includes interesting survey data showing that just listing the minimal amount of cases does not show all inflections, e.g. does “ne/nim” refer to “ne/nem/neir/neirs/nemself” or “ne/nem/nayr/nayrs/nemself”?

==== Pronouns Prior Art ====
* MediaWiki preferences, e.g. https://www.w3.org/wiki/Special:Preferences (when logged in) has a radio button group from you can choose your nominative pronoun (or none).
<blockquote><pre>
How do you prefer to be described?
(*) (I prefer not to say)
( ) She edits wiki pages
( ) He edits wiki pages
</pre></blockquote>

== See Also ==
* [[h-card]]
* [[hcard-brainstorming]] - for additional proposals to bring forth to h-card

microformats2-experimental-properties

2019-04-11T07:55:23Z

Zegnat: /* p-x-pronoun-* */ Refer to the brainstorm discussion

== h-as-* ==
ActivityStreams-based post types, usually done in combination with h-entry.

=== Usage ===

* [http://glennjones.net/ glennjones.net] ([http://glennjones.net/notes/2015-07-11 example: h-as-note])

Formerly:
* tantek.com - used to (~2014) use h-as-article and h-as-note but decided this type of explicit typing was unnecessary from a format perspective so dropped them. [[User:Tantek|Tantek]] 19:52, 11 July 2015 (UTC)

== h-x-username ==

=== Usage ===

* [http://glennjones.net/ glennjones.net] ([http://glennjones.net/notes/2015-07-11 example])
* [http://tantek.com/ tantek.com] ([http://tantek.com/2015/191/t1/indiewebcamp-pre-party example])

how is this different from [[h-card]]'s p-nickname ? [[User:Kevin Marks|Kevin Marks]]

== p-x-dietary-preference ==

For dietary preferences (vegetarian, vegan etc.) - the intention is to help event organisers organise catering by aggregating together the dietary preferences of attendees.

=== Suggested values ===
* ovo-lacto vegetarian
* lacto vegetarian
* ovo vegetarian
* vegan
* pescatarian
* omnivore
* gluten-free
* lactose-free

=== Usage ===
* [https://tommorris.org/ tommorris.org]

== p-x-pronoun-* ==

Properties to identify a user's preferred pronouns

; p-x-pronoun-nominative: the user's preferred nominative pronoun (e.g. he, she, they)
; p-x-pronoun-oblique: the user's preferred oblique pronoun (e.g. him, her, them)
; p-x-pronoun-possessive: the user's preferred possessive pronoun (e.g. his, hers, theirs)

See also the [[h-card-brainstorming#Pronouns|h-card brainstorming]] page for more pronoun discussion and alternative properties.

=== Usage ===

* [https://waterpigs.co.uk/ waterpigs.co.uk]
* [https://unrelenting.technology/ unrelenting.technology]
* [[User:GRegorLove|gRegor]] on https://gregorlove.com/about

== p-x-sexual-orientation ==

For when we eventually build the open web dating service.

;Suggested values:
:* straight or heterosexual
:* bisexual
:* pansexual
:* gay or lesbian or homosexual
:* asexual

=== Usage ===
* [https://tommorris.org/ tommorris.org]

microformats2-json

2019-03-09T22:07:40Z

Zegnat: Add a more complete document preface

This page contains an informative description of <dfn style="font-style:normal;font-weight:bold">microformats2 JSON</dfn>, the canonical output format of the [[microformats2-parsing|microformats2 parsing]] algorithm. Note that the [[microformats2-parsing|microformats2 parsing specification]] is the only authoritative source for its own output.

'''Goal:''' Document possible values – with examples – of the official serialisation format of microformats generated by [[microformats2#Parsers|microformats2 parsers]]. This format can be used to compare parsers and create [[test-suite|test suites]]. It also clarifies the format for other specifications that rely on the serialisation, such as [https://micropub.net/ Micropub].

'''Audience:''' Parser authors, parser users, web developers. This document is written for anyone working with microformats2 in their serialised form, so they can read about the format generated by the parsing algorithm without having to understand the actual parsing itself.

'''Author(s):''' [[User:Zegnat|Martijn van der Ven]]

<div style="margin:1em;padding:1em;background:#FFDC00;font-size:smaller">⚠️ The JSON format used is not pinned to a specific [https://indieweb.org/JSON#Specs JSON specification]. See [https://github.com/microformats/microformats2-parsing/issues/23 issue #23] for a discussion on the subject.</div>

== Parsed Document Format ==

Parsers collect not only microformats2 objects, but also [[rel|link relationships]]. Parsing an entire document will result in an outer object with 3 members named <code>items</code>, <code>rels</code>, and <code>rel-urls</code>:

<source lang=javascript>{
"items": [],
"rels": {},
"rel-urls": {}
}</source>

# <code>items</code> is an array of [[microformats2-json#microformat2_Objects|microformats2 objects]], ordered according to their order in the source document.
# <code>rels</code> is an object where the member names reflect all <code>rel</code>-values found in the source document.
# <code>rel-urls</code> is an object where the member names reflect all URLs found in the source document with <code>rel</code>-values attached.

== microformat2 Objects ==

<div style="margin:1em;padding:1em;background:#F8F7EC;font-size:smaller">🕰️ '''This section is outdated.''' An extra optional member called <code>id</code> was [http://microformats.org/wiki/index.php?title=microformats2-parsing&diff=66967&oldid=66966 added in December].</div>

The '''microformats2 object''' is an object with 2 required members named <code>type</code> and <code>properties</code>, as well as an optional member named <code>children</code>:

<source lang=javascript>{
"type": [],
"properties": {},
"children": []
}</source>

# <code>type</code> is an array of the types that identify the microformat, ordered alphabetically.
# <code>properties</code> is an object where the member names reflect all properties found for the microformat.
# The optional member <code>children</code> is an array of other microformats2 objects that were found nested in the current one.

=== type ===

<div style="margin:1em;padding:1em;background:#7FDBFF;font-size:smaller">ℹ️ '''This section needs expanding.''' It needs an example of a microformats2 object that uses multiple types and still makes sense.</div>

The <code>type</code> member contains an alphabetically sorted array of root class names. These names express what the microformat is expressing, and are often coupled to which properties to expect through documented conventions.

The root class names are individual strings that match the pattern <code>h-([0-9a-z]+-)?[a-z]+</code>.

The following example shows an <code>h-entry</code> type microformats2 object, with a single property attached. The <code>h-entry</code> type is [[h-entry|documented on the wiki]], this way types point towards documented conventions that hold true no matter what the source document was.

<source lang=javascript>{
"type": ["h-entry"],
"properties": {
"summary": ["A short published note."]
}
}</source>

=== properties ===

<div style="margin:1em;padding:1em;background:#F8F7EC;font-size:smaller">🕰️ '''This section is outdated.''' A new [[microformats2-parsing#parse_an_img_element_for_src_and_alt|valid value for images]] was [http://microformats.org/wiki/index.php?title=microformats2-parsing&diff=66969&oldid=66967 added in January].</div>

The <code>properties</code> member contains an object where every member name is a microformats2 property name, and every member value is an array of the found microformats2 values. Even when only one value is given, it will be inside an array.

Valid values in the value array are one of the following:

# a string value, the most common value,
# an embedded markup object, containing both a plain string value and the verbatim mark-up from the source document, or
# another microformat2 object.

If a microformat2 object is used as the value of a property, it will gain the additional member <code>value</code> to express a plain string representation. If a consuming application does not understand the nested microformat2 object, it can opt to treat it as that string.

If a microformat2 object is used as the value of a property, when the parser is also instructed to return it as an embedded markup object, it will gain the additional member <code>html</code>.

The following example shows an <code>h-entry</code> type microformats2 object, with 3 properties to show the 3 different types of properties. The <code>name</code> is a single string, the <code>content</code> contains verbatim HTML from the source document, and the <code>author</code> is a nested microformat2 <code>h-card</code> object. The <code>in-reply-to</code> property has been added to show how one property may contain multiple valid values.

To see what these properties mean in the context of an <code>h-entry</code> type, see [[h-entry#Core_Properties|the Core Properties section on the type’s wiki page]].

<source lang=javascript>{
"type": ["h-entry"],
"properties": {
"name": ["An example entry"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut. Dicta ut repellat quisquam repellendus et iste consequatur.</p>\n<p>Consequuntur repellat sed aut in et dolores. Consequatur amet quo enim.</p>",
"value": "Ut non sit saepe porro porro est aut. Dicta ut repellat quisquam repellendus et iste consequatur.\nConsequuntur repellat sed aut in et dolores. Consequatur amet quo enim."
}
],
"author": [
{
"type": ["h-card"],
"properties": {
"name": ["Mx Example"],
"url": ["https://example.com/"]
},
"value": "Mx Example"
}
],
"in-reply-to": [
{
"type": ["h-cite"],
"properties": {
"name": ["Example Domain"],
"author": ["IANA"],
"url": ["https://example.org/"]
},
"value": "https://example.org/"
},
"https://example.net/"
]
}
}</source>

=== children ===

The optional <code>children</code> member is added when nested microformats are found and contains an array of microformat2 objects.

This happens when other objects are contained with outer ones, e.g. data is marked up with microformats within the content of an <code>h-entry</code>. Another possibility is that the outer object exists to group all its nested objects, such as an <code>[[h-feed]]</code>.

The following example shows an <code>h-feed</code> type microformats2 object with a few properties that describe the feed, and an array of <code>h-entry</code> objects as its children.

<source lang=javascript>{
"type": ["h-feed"],
"properties": {
"author": ["https://example.org/"],
"name": ["Example Feed"]
},
"children": [
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 1"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
},
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 2"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
},
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 3"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
}
]
}</source>

== rels Object ==

The '''rels object''' is an object with any amount of members, where every member name is a link relationship (see [[existing-rel-values|the documented existing relationships]] for examples) and every member value is an array of URLs.

Any relationship can have 1 or more URLs in its matching array. And any URL can be in several arrays, if it has several relationships associated with it.

The following example shows a rels object where 4 URLs were found in the source document:

* <code><nowiki>https://example.com/</nowiki></code> identifies the homepage using [[rel-home|the <code>home</code> relationship value]],
* <code><nowiki>https://example.com/fr/</nowiki></code> identifies an alternative version of the home page, combining the <code>home</code> and [[rel-alternate|<code>alternate</code> relationship]] values,
* <code><nowiki>https://example.com/a</nowiki></code> and <code><nowiki>https://example.com/b</nowiki></code> both identify an author of the current page using [[rel-author|the <code>author</code> relationship value]].

<source lang=javascript>{
"home": [
"https://example.com/",
"https://example.com/fr/"
],
"author": [
"https://example.com/a",
"https://example.com/b"
],
"alternate": ["https://example.com/fr/"]
}</source>

== rel-urls Object ==

The '''rel-urls object''' is an object with any amount of members, where every member name is a URL and every member value is an object.

The value object will always contain a member with the name <code>rels</code>. That member’s value will be an array of alphabeticall sorted link relationships applicable to the URL.

The value object may additionally contain any members with the following names:

* <code>hreflang</code>
* <code>media</code>
* <code>title</code>
* <code>type</code>

The values of these members are always a single string. The value is taken from the link’s attribute in the source document matching the member name. E.g. in HTML the value of an <code><a></code> element’s <code>hreflang</code> attribute will be the value of the URL’s <code>hreflang</code> member in the rel-urls object.

In addition the optional member named <code>text</code> is added if any text is associated with the URL in the source document. E.g. in HTML the text within an <code><a></code> element will be used.

The following example shows what the companion rel-urls object to the above rels object might look like. It shows the text that was used to link to the authors, giving us more context of who they are. It also makes clear that the alternative version of the home page is in fact in French and meant for handheld devices.

<source lang=javascript>{
"https://example.com/": {
"rels": ["home"],
"text": "Example Homepage"
},
"https://example.com/a": {
"rels": ["author"],
"text": "Mx Adam"
},
"https://example.com/b": {
"rels": ["author"],
"text": "Mx Baker"
},
"https://example.com/fr/": {
"rels": ["alternate", "home"],
"hreflang": "fr",
"media": "handheld",
"text": "Example page d’accueil"
}
}</source>

The rel-urls object was a later addition to the specification. It exists because so much information was lost when only the rels object was created. The discussion that shaped it [[microformats2-parsing-brainstorming#more_information_for_rel-based_formats|can be read on the brainstorming page]].

== See Also ==

* [https://tools.ietf.org/html/rfc8259 RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format]
* [https://gist.github.com/Zegnat/65ed9a9fb0546fb8c4aa0c0b790b8a40 JSON Schema for microformats2 objects], by [https://vanderven.se/martijn/ Martijn van der Ven]
* [https://github.com/cleverdevil/microformats2 Type- and vocabulary-aware microformats2 JSON validator in Python], by [https://cleverdevil.io/ Jonathan LaCour]

microformats2-json

2019-03-09T19:48:44Z

Zegnat: /* properties */ Outdated: image value (featuring alt) is not documented

<dfn style="font-style:normal;font-weight:bold">microformats2 JSON</dfn> is the canonical output format of the [[microformats2-parsing|microformats2 parsing]] algorithm. As such it can be used to compare parsers and create [[test-suite|test suites]]. It is also used as the official serialisation format of microformats objects, and relied upon by specifications such as [https://micropub.net/ Micropub].

<div style="margin:1em;padding:1em;background:#FFDC00;font-size:smaller">⚠️ The JSON format used is not pinned to a specific [https://indieweb.org/JSON#Specs JSON specification]. See [https://github.com/microformats/microformats2-parsing/issues/23 issue #23] for a discussion on the subject.</div>

== Parsed Document Format ==

Parsers collect not only microformats2 objects, but also [[rel|link relationships]]. Parsing an entire document will result in an outer object with 3 members named <code>items</code>, <code>rels</code>, and <code>rel-urls</code>:

<source lang=javascript>{
"items": [],
"rels": {},
"rel-urls": {}
}</source>

# <code>items</code> is an array of [[microformats2-json#microformat2_Objects|microformats2 objects]], ordered according to their order in the source document.
# <code>rels</code> is an object where the member names reflect all <code>rel</code>-values found in the source document.
# <code>rel-urls</code> is an object where the member names reflect all URLs found in the source document with <code>rel</code>-values attached.

== microformat2 Objects ==

<div style="margin:1em;padding:1em;background:#F8F7EC;font-size:smaller">🕰️ '''This section is outdated.''' An extra optional member called <code>id</code> was [http://microformats.org/wiki/index.php?title=microformats2-parsing&diff=66967&oldid=66966 added in December].</div>

The '''microformats2 object''' is an object with 2 required members named <code>type</code> and <code>properties</code>, as well as an optional member named <code>children</code>:

<source lang=javascript>{
"type": [],
"properties": {},
"children": []
}</source>

# <code>type</code> is an array of the types that identify the microformat, ordered alphabetically.
# <code>properties</code> is an object where the member names reflect all properties found for the microformat.
# The optional member <code>children</code> is an array of other microformats2 objects that were found nested in the current one.

=== type ===

<div style="margin:1em;padding:1em;background:#7FDBFF;font-size:smaller">ℹ️ '''This section needs expanding.''' It needs an example of a microformats2 object that uses multiple types and still makes sense.</div>

The <code>type</code> member contains an alphabetically sorted array of root class names. These names express what the microformat is expressing, and are often coupled to which properties to expect through documented conventions.

The root class names are individual strings that match the pattern <code>h-([0-9a-z]+-)?[a-z]+</code>.

The following example shows an <code>h-entry</code> type microformats2 object, with a single property attached. The <code>h-entry</code> type is [[h-entry|documented on the wiki]], this way types point towards documented conventions that hold true no matter what the source document was.

<source lang=javascript>{
"type": ["h-entry"],
"properties": {
"summary": ["A short published note."]
}
}</source>

=== properties ===

<div style="margin:1em;padding:1em;background:#F8F7EC;font-size:smaller">🕰️ '''This section is outdated.''' A new [[microformats2-parsing#parse_an_img_element_for_src_and_alt|valid value for images]] was [http://microformats.org/wiki/index.php?title=microformats2-parsing&diff=66969&oldid=66967 added in January].</div>

The <code>properties</code> member contains an object where every member name is a microformats2 property name, and every member value is an array of the found microformats2 values. Even when only one value is given, it will be inside an array.

Valid values in the value array are one of the following:

# a string value, the most common value,
# an embedded markup object, containing both a plain string value and the verbatim mark-up from the source document, or
# another microformat2 object.

If a microformat2 object is used as the value of a property, it will gain the additional member <code>value</code> to express a plain string representation. If a consuming application does not understand the nested microformat2 object, it can opt to treat it as that string.

If a microformat2 object is used as the value of a property, when the parser is also instructed to return it as an embedded markup object, it will gain the additional member <code>html</code>.

The following example shows an <code>h-entry</code> type microformats2 object, with 3 properties to show the 3 different types of properties. The <code>name</code> is a single string, the <code>content</code> contains verbatim HTML from the source document, and the <code>author</code> is a nested microformat2 <code>h-card</code> object. The <code>in-reply-to</code> property has been added to show how one property may contain multiple valid values.

To see what these properties mean in the context of an <code>h-entry</code> type, see [[h-entry#Core_Properties|the Core Properties section on the type’s wiki page]].

<source lang=javascript>{
"type": ["h-entry"],
"properties": {
"name": ["An example entry"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut. Dicta ut repellat quisquam repellendus et iste consequatur.</p>\n<p>Consequuntur repellat sed aut in et dolores. Consequatur amet quo enim.</p>",
"value": "Ut non sit saepe porro porro est aut. Dicta ut repellat quisquam repellendus et iste consequatur.\nConsequuntur repellat sed aut in et dolores. Consequatur amet quo enim."
}
],
"author": [
{
"type": ["h-card"],
"properties": {
"name": ["Mx Example"],
"url": ["https://example.com/"]
},
"value": "Mx Example"
}
],
"in-reply-to": [
{
"type": ["h-cite"],
"properties": {
"name": ["Example Domain"],
"author": ["IANA"],
"url": ["https://example.org/"]
},
"value": "https://example.org/"
},
"https://example.net/"
]
}
}</source>

=== children ===

The optional <code>children</code> member is added when nested microformats are found and contains an array of microformat2 objects.

This happens when other objects are contained with outer ones, e.g. data is marked up with microformats within the content of an <code>h-entry</code>. Another possibility is that the outer object exists to group all its nested objects, such as an <code>[[h-feed]]</code>.

The following example shows an <code>h-feed</code> type microformats2 object with a few properties that describe the feed, and an array of <code>h-entry</code> objects as its children.

<source lang=javascript>{
"type": ["h-feed"],
"properties": {
"author": ["https://example.org/"],
"name": ["Example Feed"]
},
"children": [
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 1"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
},
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 2"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
},
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 3"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
}
]
}</source>

== rels Object ==

The '''rels object''' is an object with any amount of members, where every member name is a link relationship (see [[existing-rel-values|the documented existing relationships]] for examples) and every member value is an array of URLs.

Any relationship can have 1 or more URLs in its matching array. And any URL can be in several arrays, if it has several relationships associated with it.

The following example shows a rels object where 4 URLs were found in the source document:

* <code><nowiki>https://example.com/</nowiki></code> identifies the homepage using [[rel-home|the <code>home</code> relationship value]],
* <code><nowiki>https://example.com/fr/</nowiki></code> identifies an alternative version of the home page, combining the <code>home</code> and [[rel-alternate|<code>alternate</code> relationship]] values,
* <code><nowiki>https://example.com/a</nowiki></code> and <code><nowiki>https://example.com/b</nowiki></code> both identify an author of the current page using [[rel-author|the <code>author</code> relationship value]].

<source lang=javascript>{
"home": [
"https://example.com/",
"https://example.com/fr/"
],
"author": [
"https://example.com/a",
"https://example.com/b"
],
"alternate": ["https://example.com/fr/"]
}</source>

== rel-urls Object ==

The '''rel-urls object''' is an object with any amount of members, where every member name is a URL and every member value is an object.

The value object will always contain a member with the name <code>rels</code>. That member’s value will be an array of alphabeticall sorted link relationships applicable to the URL.

The value object may additionally contain any members with the following names:

* <code>hreflang</code>
* <code>media</code>
* <code>title</code>
* <code>type</code>

The values of these members are always a single string. The value is taken from the link’s attribute in the source document matching the member name. E.g. in HTML the value of an <code><a></code> element’s <code>hreflang</code> attribute will be the value of the URL’s <code>hreflang</code> member in the rel-urls object.

In addition the optional member named <code>text</code> is added if any text is associated with the URL in the source document. E.g. in HTML the text within an <code><a></code> element will be used.

The following example shows what the companion rel-urls object to the above rels object might look like. It shows the text that was used to link to the authors, giving us more context of who they are. It also makes clear that the alternative version of the home page is in fact in French and meant for handheld devices.

<source lang=javascript>{
"https://example.com/": {
"rels": ["home"],
"text": "Example Homepage"
},
"https://example.com/a": {
"rels": ["author"],
"text": "Mx Adam"
},
"https://example.com/b": {
"rels": ["author"],
"text": "Mx Baker"
},
"https://example.com/fr/": {
"rels": ["alternate", "home"],
"hreflang": "fr",
"media": "handheld",
"text": "Example page d’accueil"
}
}</source>

The rel-urls object was a later addition to the specification. It exists because so much information was lost when only the rels object was created. The discussion that shaped it [[microformats2-parsing-brainstorming#more_information_for_rel-based_formats|can be read on the brainstorming page]].

== See Also ==

* [https://tools.ietf.org/html/rfc8259 RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format]
* [https://gist.github.com/Zegnat/65ed9a9fb0546fb8c4aa0c0b790b8a40 JSON Schema for microformats2 objects], by [https://vanderven.se/martijn/ Martijn van der Ven]
* [https://github.com/cleverdevil/microformats2 Type- and vocabulary-aware microformats2 JSON validator in Python], by [https://cleverdevil.io/ Jonathan LaCour]

microformats2-json

2019-03-09T19:41:10Z

Zegnat: /* microformat2 Objects */ Sneaking in some outdated warnings.

<dfn style="font-style:normal;font-weight:bold">microformats2 JSON</dfn> is the canonical output format of the [[microformats2-parsing|microformats2 parsing]] algorithm. As such it can be used to compare parsers and create [[test-suite|test suites]]. It is also used as the official serialisation format of microformats objects, and relied upon by specifications such as [https://micropub.net/ Micropub].

<div style="margin:1em;padding:1em;background:#FFDC00;font-size:smaller">⚠️ The JSON format used is not pinned to a specific [https://indieweb.org/JSON#Specs JSON specification]. See [https://github.com/microformats/microformats2-parsing/issues/23 issue #23] for a discussion on the subject.</div>

== Parsed Document Format ==

Parsers collect not only microformats2 objects, but also [[rel|link relationships]]. Parsing an entire document will result in an outer object with 3 members named <code>items</code>, <code>rels</code>, and <code>rel-urls</code>:

<source lang=javascript>{
"items": [],
"rels": {},
"rel-urls": {}
}</source>

# <code>items</code> is an array of [[microformats2-json#microformat2_Objects|microformats2 objects]], ordered according to their order in the source document.
# <code>rels</code> is an object where the member names reflect all <code>rel</code>-values found in the source document.
# <code>rel-urls</code> is an object where the member names reflect all URLs found in the source document with <code>rel</code>-values attached.

== microformat2 Objects ==

<div style="margin:1em;padding:1em;background:#F8F7EC;font-size:smaller">🕰️ '''This section is outdated.''' An extra optional member called <code>id</code> was [http://microformats.org/wiki/index.php?title=microformats2-parsing&diff=66967&oldid=66966 added in December].</div>

The '''microformats2 object''' is an object with 2 required members named <code>type</code> and <code>properties</code>, as well as an optional member named <code>children</code>:

<source lang=javascript>{
"type": [],
"properties": {},
"children": []
}</source>

# <code>type</code> is an array of the types that identify the microformat, ordered alphabetically.
# <code>properties</code> is an object where the member names reflect all properties found for the microformat.
# The optional member <code>children</code> is an array of other microformats2 objects that were found nested in the current one.

=== type ===

<div style="margin:1em;padding:1em;background:#7FDBFF;font-size:smaller">ℹ️ '''This section needs expanding.''' It needs an example of a microformats2 object that uses multiple types and still makes sense.</div>

The <code>type</code> member contains an alphabetically sorted array of root class names. These names express what the microformat is expressing, and are often coupled to which properties to expect through documented conventions.

The root class names are individual strings that match the pattern <code>h-([0-9a-z]+-)?[a-z]+</code>.

The following example shows an <code>h-entry</code> type microformats2 object, with a single property attached. The <code>h-entry</code> type is [[h-entry|documented on the wiki]], this way types point towards documented conventions that hold true no matter what the source document was.

<source lang=javascript>{
"type": ["h-entry"],
"properties": {
"summary": ["A short published note."]
}
}</source>

=== properties ===

The <code>properties</code> member contains an object where every member name is a microformats2 property name, and every member value is an array of the found microformats2 values. Even when only one value is given, it will be inside an array.

Valid values in the value array are one of the following:

# a string value, the most common value,
# an embedded markup object, containing both a plain string value and the verbatim mark-up from the source document, or
# another microformat2 object.

If a microformat2 object is used as the value of a property, it will gain the additional member <code>value</code> to express a plain string representation. If a consuming application does not understand the nested microformat2 object, it can opt to treat it as that string.

If a microformat2 object is used as the value of a property, when the parser is also instructed to return it as an embedded markup object, it will gain the additional member <code>html</code>.

The following example shows an <code>h-entry</code> type microformats2 object, with 3 properties to show the 3 different types of properties. The <code>name</code> is a single string, the <code>content</code> contains verbatim HTML from the source document, and the <code>author</code> is a nested microformat2 <code>h-card</code> object. The <code>in-reply-to</code> property has been added to show how one property may contain multiple valid values.

To see what these properties mean in the context of an <code>h-entry</code> type, see [[h-entry#Core_Properties|the Core Properties section on the type’s wiki page]].

<source lang=javascript>{
"type": ["h-entry"],
"properties": {
"name": ["An example entry"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut. Dicta ut repellat quisquam repellendus et iste consequatur.</p>\n<p>Consequuntur repellat sed aut in et dolores. Consequatur amet quo enim.</p>",
"value": "Ut non sit saepe porro porro est aut. Dicta ut repellat quisquam repellendus et iste consequatur.\nConsequuntur repellat sed aut in et dolores. Consequatur amet quo enim."
}
],
"author": [
{
"type": ["h-card"],
"properties": {
"name": ["Mx Example"],
"url": ["https://example.com/"]
},
"value": "Mx Example"
}
],
"in-reply-to": [
{
"type": ["h-cite"],
"properties": {
"name": ["Example Domain"],
"author": ["IANA"],
"url": ["https://example.org/"]
},
"value": "https://example.org/"
},
"https://example.net/"
]
}
}</source>

=== children ===

The optional <code>children</code> member is added when nested microformats are found and contains an array of microformat2 objects.

This happens when other objects are contained with outer ones, e.g. data is marked up with microformats within the content of an <code>h-entry</code>. Another possibility is that the outer object exists to group all its nested objects, such as an <code>[[h-feed]]</code>.

The following example shows an <code>h-feed</code> type microformats2 object with a few properties that describe the feed, and an array of <code>h-entry</code> objects as its children.

<source lang=javascript>{
"type": ["h-feed"],
"properties": {
"author": ["https://example.org/"],
"name": ["Example Feed"]
},
"children": [
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 1"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
},
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 2"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
},
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 3"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
}
]
}</source>

== rels Object ==

The '''rels object''' is an object with any amount of members, where every member name is a link relationship (see [[existing-rel-values|the documented existing relationships]] for examples) and every member value is an array of URLs.

Any relationship can have 1 or more URLs in its matching array. And any URL can be in several arrays, if it has several relationships associated with it.

The following example shows a rels object where 4 URLs were found in the source document:

* <code><nowiki>https://example.com/</nowiki></code> identifies the homepage using [[rel-home|the <code>home</code> relationship value]],
* <code><nowiki>https://example.com/fr/</nowiki></code> identifies an alternative version of the home page, combining the <code>home</code> and [[rel-alternate|<code>alternate</code> relationship]] values,
* <code><nowiki>https://example.com/a</nowiki></code> and <code><nowiki>https://example.com/b</nowiki></code> both identify an author of the current page using [[rel-author|the <code>author</code> relationship value]].

<source lang=javascript>{
"home": [
"https://example.com/",
"https://example.com/fr/"
],
"author": [
"https://example.com/a",
"https://example.com/b"
],
"alternate": ["https://example.com/fr/"]
}</source>

== rel-urls Object ==

The '''rel-urls object''' is an object with any amount of members, where every member name is a URL and every member value is an object.

The value object will always contain a member with the name <code>rels</code>. That member’s value will be an array of alphabeticall sorted link relationships applicable to the URL.

The value object may additionally contain any members with the following names:

* <code>hreflang</code>
* <code>media</code>
* <code>title</code>
* <code>type</code>

The values of these members are always a single string. The value is taken from the link’s attribute in the source document matching the member name. E.g. in HTML the value of an <code><a></code> element’s <code>hreflang</code> attribute will be the value of the URL’s <code>hreflang</code> member in the rel-urls object.

In addition the optional member named <code>text</code> is added if any text is associated with the URL in the source document. E.g. in HTML the text within an <code><a></code> element will be used.

The following example shows what the companion rel-urls object to the above rels object might look like. It shows the text that was used to link to the authors, giving us more context of who they are. It also makes clear that the alternative version of the home page is in fact in French and meant for handheld devices.

<source lang=javascript>{
"https://example.com/": {
"rels": ["home"],
"text": "Example Homepage"
},
"https://example.com/a": {
"rels": ["author"],
"text": "Mx Adam"
},
"https://example.com/b": {
"rels": ["author"],
"text": "Mx Baker"
},
"https://example.com/fr/": {
"rels": ["alternate", "home"],
"hreflang": "fr",
"media": "handheld",
"text": "Example page d’accueil"
}
}</source>

The rel-urls object was a later addition to the specification. It exists because so much information was lost when only the rels object was created. The discussion that shaped it [[microformats2-parsing-brainstorming#more_information_for_rel-based_formats|can be read on the brainstorming page]].

== See Also ==

* [https://tools.ietf.org/html/rfc8259 RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format]
* [https://gist.github.com/Zegnat/65ed9a9fb0546fb8c4aa0c0b790b8a40 JSON Schema for microformats2 objects], by [https://vanderven.se/martijn/ Martijn van der Ven]
* [https://github.com/cleverdevil/microformats2 Type- and vocabulary-aware microformats2 JSON validator in Python], by [https://cleverdevil.io/ Jonathan LaCour]

h-resume

2018-08-23T20:40:37Z

Zegnat: /* Examples in the Wild */ Add petermolnar

<entry-title>h-resume</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-resume</dfn> is a simple, open format for publishing resumes and CVs on on the web. h-resume is one of several open [[microformats|microformat]] draft standards suitable for embedding data in HTML.

h-resume is the [[microformats2]] update to [[hResume]].

{{cc0-owfa-license}}

== Example ==
Here is a simple resume example:

<source lang=html4strict>
<div class="h-resume">
<span class="p-name">
<a class="p-contact h-card" href="http://example.org">
<img src="http://example.org/photo.png" alt="" />
Joe Bloggs
</a>
resume
</span>

<p class="p-summary">Joe is a top-notch llama farmer with a degree in <span class="p-skill">Llama husbandry</span> and a thirst to produce the finest wool known to man</p>
</div>
</source>

Parsed JSON:
<source lang=javascript>
{
"items": [
{
"type": [
"h-resume"
],
"properties": {
"name": [
"Joe Bloggs resume"
],
"contact": [
{
"value": "Joe Bloggs",
"type": [
"h-card"
],
"properties": {
"name": [
"Joe Bloggs"
],
"photo": [
"http://example.org/photo.png"
],
"url": [
"http://example.org"
]
}
}
],
"summary": [
"Joe is a top-notch llama farmer with a degree in Llama husbandry and a thirst to produce the finest wool known to man"
],
"skill": [
"Llama husbandry"
]
}
}
]
}
</source>

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

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

== Properties ==
h-resume properties, inside an element with class '''h-resume''':
* '''<code>p-name</code>''' - brief name of the resume
* '''<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-event]]</code> event, years, embedded <code>[[h-card]]</code> of the school, location. {{main|h-event}} {{main|h-card}}
* '''<code>p-experience</code>''' - a job or other professional experience <code>[[h-event]]</code> event, years, embedded <code>[[h-card]]</code> of the organization, location, job-title. {{main|h-event}} {{main|h-card}}
* '''<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

All properties are optional.

== Status ==

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

h-resume is ready to use and implemented in the wild, but for backwards compatibility you should also mark h-resumes up with classic [[hResume]] classnames.

== Property Details ==

(stub, add any property explanations here)

'''p-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-skill vocabulary with p-name, p-rating, and dt-duration properties.

== Examples in the Wild ==
* [https://lejenome.github.io/ Moez Bouhlel] has marked up his [https://lejenome.github.io/resume résumé] using h-resume.
* [[User:Almorca|Almorca]] has marked up [http://www.almorca.es/ his personal web page (in spanish)].
* [https://petermolnar.net/ Peter Molnar] has marked up [https://petermolnar.net/about.html his resume] (on his about page) using h-resume.
* … add any h-resume examples you find in the wild

'''Archived examples''' (past examples from sites that may be gone, down, or had markup changes)
* [[User:Csarven|Sarven Capadisli]] marked up his [https://web.archive.org/web/20160309095003/http://csarven.ca/cv Curriculum Vitae] as an h-resume.
* … find archive.org links for any broken examples above and move them here

== Validating ==
{{h-spec-section-validating}}

== Backward Compatibility ==
=== Publisher Compatibility ===
(stub)
=== Parser Compatibility ===
Microformats parsers {{should}} detect the following root class name and property names. A microformats2 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>

== Background ==

h-resume is based on the existing [[hResume]] specification.

== See Also ==

* [[microformats2]]
* [[h-card]] and [[h-event]] are both embedded in h-resume
* The [[include-pattern]] is likely to be useful to avoid repeating information in any embedded h-cards
* [[hResume]] is the classic microformat replaced by h-resume

[[Category:Draft Specifications]]

h-card-brainstorming

2018-08-19T20:37:09Z

Zegnat: /* Pronouns */ Add link to Mastodon discussion as discussed on IRC. Add feedback from User:Sknebel on User:Zegnat’s pronoun work.

{{stub}}

<entry-title>h-card Brainstorming </entry-title>
This page is for brainstorming about various uses, details of, and additions to [[h-card]].

This page contains <em>proposals</em>. For the current state please see [[h-card]].

__TOC__
Brainstorm proposals that illustrate how to use the existing hCard spec will likely be incorporated into existing hCard documentation such as:
* [[h-card-authoring]]
* [[h-card-examples]]
* ... and potentially additional documentation.

== Explorations ==
Add new explorations here as === === triple level headings

=== Pronouns ===
Ashton McAllan marks up her pronouns as:
<source lang=html4strict>
<span class="p-x-pronoun-nominative">she</span> /
<span class="p-x-pronoun-oblique">her</span> /
<span class="p-x-pronoun-posessive">hers</span>
</source>
in her [[h-card]] on http://acegiak.net/

Each pronoun is listed individually with it's form allowing parsers and programs to identify them for different uses. Other languages may include different forms of pronoun. This solution is suggested after reading [https://en.wikipedia.org/wiki/Personal_pronoun the Wikipedia Personal Pronouns article]

[[User:GRegorLove|gRegor Morrill]] marks up his pronouns similarly (note corrected spelling of "possessive"):
<source lang=html4strict>
<p>Pronouns: <span class="p-x-pronoun-nominative">he</span>/
<span class="p-x-pronoun-oblique">him</span>/
<span class="p-x-pronoun-possessive">his</span></p>
</source>
on http://gregorlove.com/about/

[http://vanderven.se/martijn/ Martijn van der Ven] marks up his pronouns (more clearly on [http://vanderven.se/martijn/gender/ his gender page]) using only a dictionary URL:
<source lang=html4strict>
<p>
I use male pronouns (
<a href="https://nl.wiktionary.org/wiki/hij#Persoonlijk_voornaamwoord" lang="nl" class="u-pronoun">hij</a>,
<a href="https://sv.wiktionary.org/wiki/han#Pronomen" lang="sv" class="u-pronoun">han</a>,
<a href="https://en.wiktionary.org/wiki/he#Pronoun" class="u-pronoun">he</a>,
<a href="https://de.wiktionary.org/wiki/er#Personalpronomen" lang="de" class="u-pronoun">er</a>
) but also accept gender-neutral pronouns (
<a href="https://sv.wiktionary.org/wiki/hen#Pronomen" lang="sv" class="u-pronoun">hen</a>,
<a href="https://en.wiktionary.org/wiki/they#Pronoun" class="u-pronoun">they</a>
). If you are writing about me and are in doubt: ask.
</p></source>

* There is no way Martijn sees himself supporting 4 cases for English (subjective, objective, reflexive, and possessive), 5 cases for German (nominative, accusative, genitive, dative, and possessive), and a possible 13 cases for Finnish in the future. Doubtful anyone else will be doing that either: at least 1 implementation (by [https://unrelenting.technology/ Greg V]) of English p-x-pronoun-* exists in the wild that only specifies 2 cases.
* Simplifying for human visitors who can instantly get started with my pronoun of choice is seen as more important than catering to theoretical computer parsers.
* His thought process [http://wiki.zegnat.net/microformats/pronoun has been documented].
* [https://00dani.me/ Danielle McLean] is also using <code>u-pronoun</code>, linking to the popular [https://pronoun.is/ Pronoun Island] registry page for her pronouns: <code><nowiki><a class="u-pronoun" href="https://pronoun.is/she/her">she/her</a></nowiki></code>.
** Started looking for a way to mark-up pronouns because the p-sex/p-gender-identity combo is “[https://chat.indieweb.org/2017-10-29/1509268972735000 unbelievably terrible]”.
** [https://chat.indieweb.org/2017-10-29/1509269322353000 Agreed with Martijn’s arguments] for why a link is better than per-case mark-up.
* [[User:Sknebel|sknebel]] [https://chat.indieweb.org/microformats/2018-08-19#t1534703222243600 notes] (2018-08-19) that he would prefer to see text (that possibly leads him to Google for proper use) than just URLs in the parser output. Although the URLs are useful, [https://chat.indieweb.org/microformats/2018-08-19#t1534705418184500 a simple name:url pair] would increase the usefulness.
** Possibly something like <code>.[up]-pronoun.h-pronoun > .u-url</code> paired with <code>.[up]-pronoun.h-pronoun > .p-name</code>. [[h-cite]] would be prior art as also expressing “a reference to <i>[something]</i> in some way with name and url”. [https://chat.indieweb.org/microformats/2018-08-19/1534705492641900]

==== Other Platforms ====
A [https://github.com/tootsuite/mastodon/issues/3211 GitHub issue about adding pronoun fields] to [https://indieweb.org/Mastodon Mastodon] was [https://chat.indieweb.org/microformats/2018-08-19#t1534700249077000 discussed in #microformats] on 2018-08-19. The comments in the issue bring up some points previously brought up by Martijn in regards to how useful it would be for machines. Also includes interesting survey data showing that just listing the minimal amount of cases does not show all inflections, e.g. does “ne/nim” refer to “ne/nem/neir/neirs/nemself” or “ne/nem/nayr/nayrs/nemself”?

==== Pronouns Prior Art ====
* MediaWiki preferences, e.g. https://www.w3.org/wiki/Special:Preferences (when logged in) has a radio button group from you can choose your nominative pronoun (or none).
<blockquote><pre>
How do you prefer to be described?
(*) (I prefer not to say)
( ) She edits wiki pages
( ) He edits wiki pages
</pre></blockquote>

== See Also ==
* [[h-card]]
* [[hcard-brainstorming]] - for additional proposals to bring forth to h-card

jf2

2018-06-25T17:21:42Z

Zegnat: /* Specification */ Update the URLs

{{stub}}

'''<dfn>jf2</dfn>''' is a working name for a simplified more minimal JSON representation of [[microformats2]].

== Basic Example ==
<source lang="javascript">
{
"type": "entry",
"author": {
"type": "card",
"name": "Tantek Çelik",
"url": "http:\/\/tantek.com\/",
"photo": "http:\/\/tantek.com\/photo.jpg"
},
"published": "2015-10-21T12:34-0700",
"category": ["simple", "example"],
"content": "Example of a simple note"
}
</source>

== Specification ==
* [https://jf2.spec.indieweb.org/ JF2 Post Serialization Format]
** [https://github.com/indieweb/jf2 On GitHub]

== Implementations ==
=== Parsers ===
Open source parsers:
* [https://github.com/dissolve/socialstream github.com/dissolve/socialstream] - Sample php code to convert MF2 -> JS2
* [http://www.unmung.com/ unmung.com] - another conversion service that can convert mf2 to jf2

=== Consuming Code ===
Service that converts jf2 into readable HTML:
* [http://stream.thatmustbe.us/ stream.thatmustbe.us] - Service running the socialstream code

== Name Candidates ==
As 'jf2' is only a working name let's collect alternatives:

;JFDI
:Backronym: JSON For Data Interchange
;jf2
:Minimal JSON for mf2

== Prior Work ==
* [[microformats2]] JSON

== Prior Simplifications ==
Output from:

=== [http://webmention.io webmention.io] ===
This service outputs a list of webmentions received for a post. It recognizes when a post is a reply, like, repost, invitation, RSVP, and mention. Example JSON output:

<source lang="javascript">
{
"source": "http://tantek.com/2013/112/t2/milestone-show-indieweb-comments-h-entry-pingback",
"verified": true,
"verified_date": "2013-04-25T17:09:33-07:00",
"id": 900,
"data": {
"author": {
"name": "Tantek Çelik",
"url": "http://tantek.com/",
"photo": "http://tantek.com/logo.jpg"
},
"name": "Another milestone: @eschnou automatically shows #indieweb comments with h-entry sent via pingback http://eschnou.com/entry/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html",
"content": "Another milestone: <a class=\"auto-link h-x-username\" href=\"https:\/\/twitter.com\/eschnou\">@eschnou<\/a> automatically shows #indieweb comments with h-entry sent via pingback <a class=\"auto-link\" href=\"http:\/\/eschnou.com\/entry\/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html\">http:\/\/eschnou.com\/entry\/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html<\/a>",
"published": "2013-04-22T15:03:00-07:00",
"published_ts": 1366668180,
"url": "http://tantek.com/2013/112/t2/milestone-show-indieweb-comments-h-entry-pingback"
}
}
</source>

=== webmention.herokuapp.com ===

This site outputs in multiple formats, based on receiving webmentions, parsing them for microformats and consolidating into a single feed. Live examples for kevinmarks.com:
*[https://webmention.herokuapp.com/api/mentions?site=kevinmarks.com&format=html HTML mf2 markup]
<source lang=html4strict>
<div class="h-entry">
<a href="http://waterpigs.co.uk/" class="p-author h-card">
<img src="http://waterpigs.co.uk/photo.jpg" alt="">
Barnaby Walters
</a>
<div class="p-summary p-name">@kevinmarks awesome demos as always! Thanks for live posting! #indiewebcampsf</div>
<footer>
<time class="dt-published" datetime="2014-04-01T14:25:14.000Z" pubdate="">
<a class="u-url u-uid" href="http://waterpigs.co.uk/notes/4VMERE/">2 years ago</a>
</time>
mentioning <a href="http://kevinmarks.com/">http://kevinmarks.com/</a>
</footer>
</div>
</source>
*[http://www.unmung.com/mf2?url=https%3A%2F%2Fwebmention.herokuapp.com%2Fapi%2Fmentions%3Fsite%3Dkevinmarks.com%26format%3Dhtml&html=&pretty=on parsed JSON form of the HTML]

<source lang=javascript>
{
"type": ["h-entry"],
"properties": {
"uid": ["http://waterpigs.co.uk/notes/4VMERE/"],
"author": [
{"type": ["h-card"],
"properties": {
"url": ["http://waterpigs.co.uk/"],
"photo": ["http://waterpigs.co.uk/photo.jpg"],
"name": [""]
},
"value": "Barnaby Walters"
}],
"url": ["http://waterpigs.co.uk/notes/4VMERE/"],
"summary": ["@kevinmarks awesome demos as always! Thanks for live posting! #indiewebcampsf"],
"published": ["2014-04-01T14:25:14Z"],
"name": [ "@kevinmarks awesome demos as always! Thanks for live posting! #indiewebcampsf"]
}
}
</source>

*[https://webmention.herokuapp.com/api/mentions?site=kevinmarks.com&format=json simplified JSON] (whitespace added)

<source lang=javascript>
{
"url":"http://waterpigs.co.uk/notes/4VMERE/",
"name":null,
"published":1396362314000,
"summary":"@kevinmarks awesome demos as always! Thanks for live posting! #indiewebcampsf",
"author": {
"name":"Barnaby Walters",
"photo":"http://waterpigs.co.uk/photo.jpg",
"url":"http://waterpigs.co.uk/"
},
"interactions": ["http://www.kevinmarks.com/indiewebsfdemowrapup.html"],
"targets":["http://kevinmarks.com/"],
"type":"reply",
"interactionTarget":false
}
</source>

=== [https://github.com/indieweb/php-comments php-comments] library ===
This library takes HTML and converts it to a simple PHP data structure. Example post:

<source lang="php">
$result = array(
'type' => 'reply',
'author' => array(
'name' => 'Aaron Parecki',
'photo' => 'http://aaronparecki.com/images/aaronpk.png',
'url' => 'http://aaronparecki.com/'
),
'published' => '2014-02-16T18:48:17-0800',
'name' => 'Example Note',
'text' => 'this text is displayed as the comment',
'url' => 'http://aaronparecki.com/post/1'
);
</source>

== See Also ==
* [[json]]
* [[microformats2]]
* [[microformats2-parsing]]

User:Zegnat

2018-06-11T17:19:43Z

Zegnat: Linkify it nice.

User:Zegnat

2018-06-11T17:17:06Z

Zegnat: Just trying to move the link…

[[User:Zegnat|Zegnat]] is the handle of [https://vanderven.se/martijn Martijn van der Ven].

Mostly focussed on [[microformats2-parsing|microformats2 parsing]] (GitHub issues opened: <code>https://github.com/microformats/microformats2-parsing/issues?utf8=%E2%9C%93&q=author%3AZegnat</code>) and have started contributing to the PHP parser (<code>https://github.com/indieweb/php-mf2</code>).

You can also find me on the IndieWeb (<code>https://indieweb.org/User:Vanderven.se_martijn</code>) and in [[irc|#microformats on freenode]].

User:Zegnat

2018-06-11T17:08:00Z

Zegnat: Create short blurb.

[[User:Zegnat|Zegnat]] is the handle of Martijn van der Ven (<code><nowiki>https://vanderven.se/martijn/</nowiki></code>).

Mostly focussed on [[microformats2-parsing|microformats2 parsing]] (GitHub issues opened: <code><nowiki>https://github.com/microformats/microformats2-parsing/issues?utf8=%E2%9C%93&q=author%3AZegnat</nowiki></code>) and have started contributing to the PHP parser (<code><nowiki>https://github.com/indieweb/php-mf2</nowiki></code>).

You can also find me on the IndieWeb (<code><nowiki>https://indieweb.org/User:Vanderven.se_martijn</nowiki></code>) and in [[#microformats on freenode]].

rel-me

2018-05-03T17:32:51Z

Zegnat: /* articles */ Add write-up “The Real Deal About rel="me"”

<entry-title>rel="me"</entry-title>
;short URL
:http://ufs.cc/w/relme

[[XFN]] 1.1 introduced the "me" [[rel]] value which is used to indicate profile equivalence and for [[identity-consolidation]].

== example ==
<code>rel="me"</code> is used on hyperlinks from one page about a person to other pages about that same person.

For example, [[User:Tantek|Tantek]]'s [http://tantek.com/ home page] has (markup simplified)

<source lang=html4strict><a href="https://twitter.com/t" rel="me">@t</a></source>

And his Twitter profile itself has (markup simplified)

<source lang=html4strict><a href="http://tantek.com/" rel="me">http://tantek.com/</a></source>

Thus establishing a bi-directional rel-me link and confirming that the two URLs represent the same person.

Publishers can use the [http://gmpg.org/xfn/creator XFN creator] form to create rel-me hyperlinks.

== screencast and videos ==
Watch some short videos:
* [http://www.sixapart.com/static_news/opening_social_graph/xfn_links/xfn_links.html David Recordon's excellent *30 second* explanation of XFN rel="me"].
* [http://www.youtube.com/watch?v=LabCylbapuM Brad Fitzpatrick explains rel="me" and more XFN].
* [http://www.podtech.net/scobleshow/technology/1611/plaxo-to-ship-online-identity-aggregator-based-on-microformats Joseph Smarr's whiteboard explanation] of rel="me" as implemented in the Plaxo online identity aggregator.
Longer:
* [https://www.youtube.com/watch?v=Q2WzVSVxrrI Gavin Bell on "What is your provenance?"] (40 minutes) - provides a much broader discussion of the problem statement of who is a person on the Web, and starting at about 0:07:30 explains how [[hCard]] + rel="me" helps solve this problem.

== tutorials ==
[http://ungeekdapo.wordpress.com/2008/04/29/a-simple-data-portability-project-or-is-it/ A simple data portability project or is it] rel=me summary by Bob Ngu

== domain verification ==
rel=me is the standard way to check that a website belongs to a user on a 3rd party site.

* read a user's website that they entered into their 3rd party site profile
* check for a rel=me hyperlink from their website to their 3rd party site profile
* if such a rel=me hyperlink is found, then the user has proven that they control that personal website sufficient to put a link back to their 3rd party site profile, and thus domain verification succeeds.

If you're the implementer of such a 3rd party site with user profiles, implement the above to implement a personal website domain verification feature.

== rel-me-auth ==
[[RelMeAuth]] is a proposed open standard for using [[rel-me]] links to profiles on [[OAuth]] supporting services to authenticate via either those profiles or your own site.

In short it is a combination of '''domain verification''' as documented above, and OAuth authorization on the 3rd party site that the user's domain links to.

Read more about how to implement [[RelMeAuth]] and [[web sign-in]].

== implementations ==
Notable Sites:
* '''[https://support.google.com/webmasters/answer/1229920 Google]''' uses reciprocal rel=me links for domain verification, which it also uses for independent site [[rel-author]] support.
* '''[http://blog.app.net/2013/04/29/announcing-domain-verification/ App.net]''' implements rel-me for officially connecting your domain to your app.net account, as well as publishing rel-me on your site.

Services:
* '''[http://indieauth.com/ IndieAuth]''' is perhaps the most comprehensive [[rel-me]] implementation, using it to implement [[RelMeAuth]] and a superset of [[web-sign-in]] that is focused on [http://indiewebcamp.com/ independent websites].

[[wordpress-plugins|WordPress plugins]]:
* [http://blog.maybe5.com/?page_id=94 Social Links Wordpress plugin] - supports rel-me links to other services
* [http://code.l0g.in/about-me/ About Me plugin] (on github) - supports creation of an About Me page with rel-me links to other profiles.

=== advocacy ===
Advocating rel=me support can be done a few ways, if a site has:
* user profiles but no "website" field - ask them to add a "website" field and mark it up with rel=me.
* a "website" field on profiles - ask it to support publishing rel=me
* a notion of "verification" or "verified" profiles - ask it to do so via confirming reciprocal rel=me
* login/sign-in - ask it to support [[RelMeAuth]] with a [[Web sign-in]] user interface.

Current requests:
* [https://github.com/gittip/www.gittip.com/issues/2477 Gittip: Add "website" profile field #2477] - requested 2014-06-07 by Aaron Parecki.
* ...

== examples in the wild ==
Examples of sites publishing rel=me support, e.g. on user profiles.

See:
* [[hcard-xfn-supporting-friends-lists#Services_with_XFN_rel.3D.22me.22_to_multiple_external_sites|services supporting XFN rel=me]]

== articles ==
* 2018-04-26 [https://vanderven.se/martijn/ Martijn van der Ven]: [https://wiki.zegnat.net/media/the-real-deal-about-rel-me.html The Real Deal About <code>rel="me"</code>]

== see also ==
* [[hcard-xfn-supporting-friends-lists#Services_with_XFN_rel.3D.22me.22_to_multiple_external_sites|services that support rel="me"]]
* [[rel-me-faq]]
* [[xfn]]
* [[rel]]
* [[social network portability]]
* [http://gmpg.org/xfn/11 XFN 1.1 profile]

h-card

2018-04-30T15:37:36Z

Zegnat: /* Properties */ Oops, copied but didn’t edit

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

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.

Experimental properties currently in use in the wild but not (yet) part of the official h-card spec.

* '''<code>u-sound</code>''' - sound file containing the proper pronunciation of the name property, per vCard (RFC 6350).
** Used by [https://vanderven.se/martijn/ Martijn van der Ven] with a clip of his given name.

== 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, clustering which properties go with which address keeps them deterministically together, instead of depending on array indices or other heuristics.

=== 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 of sites and services that publish or consume h-card:

* ... add uses of h-card you see in the wild here.
* [http://www.securityjobslondon.co.uk Security Jobs London] uses h-card with legacy [[hCard]] fallback markup (to satisfy [https://search.google.com/structured-data/testing-tool Google's Structured Data Testing Tool]) in the footer of each page
* 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])
* [https://joelpurra.com/ Joel Purra] uses a hidden h-card with legacy [[hCard]] fallback markup (to satisfy [https://search.google.com/structured-data/testing-tool Google's Structured Data Testing Tool]) on the front page
* 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.me/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}}

== Implementations ==
Software implementations that publish or consume h-card, including themes, plugins, or extensions:

(This section is a stub that needs expansion! In practice, nearly every CMS on every [https://indieweb.org/ indie web] site supports publishing h-card by default.)

When adding an implementation, please provide and link to its home page and open source repo if any.
* [https://gnu.io/social/ GNUsocial] [https://git.gnu.io/gnu/gnu-social/ source code]
* [https://hubzilla.org/hubzilla/ Hubzilla] [https://github.org/redmatrix/hubzilla source code]
* [http://friendica.com/ Friendica] [https://github.org/friendica/friendica source code]
* [http://github.com/dissolve/inkblot InkBlot]
* ...
* ...

== 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 the vCard4 vocabulary, 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]]

h-card

2018-04-30T15:25:52Z

Zegnat: /* Properties */ List the (u-)sound property, with example in the wild.

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

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.

Experimental properties currently in use in the wild but not (yet) part of the official h-review spec.

* '''<code>u-sound</code>''' - sound file containing the proper pronunciation of the name property, per vCard (RFC 6350).
** Used by [https://vanderven.se/martijn/ Martijn van der Ven] with a clip of his given name.

== 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, clustering which properties go with which address keeps them deterministically together, instead of depending on array indices or other heuristics.

=== 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 of sites and services that publish or consume h-card:

* ... add uses of h-card you see in the wild here.
* [http://www.securityjobslondon.co.uk Security Jobs London] uses h-card with legacy [[hCard]] fallback markup (to satisfy [https://search.google.com/structured-data/testing-tool Google's Structured Data Testing Tool]) in the footer of each page
* 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])
* [https://joelpurra.com/ Joel Purra] uses a hidden h-card with legacy [[hCard]] fallback markup (to satisfy [https://search.google.com/structured-data/testing-tool Google's Structured Data Testing Tool]) on the front page
* 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.me/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}}

== Implementations ==
Software implementations that publish or consume h-card, including themes, plugins, or extensions:

(This section is a stub that needs expansion! In practice, nearly every CMS on every [https://indieweb.org/ indie web] site supports publishing h-card by default.)

When adding an implementation, please provide and link to its home page and open source repo if any.
* [https://gnu.io/social/ GNUsocial] [https://git.gnu.io/gnu/gnu-social/ source code]
* [https://hubzilla.org/hubzilla/ Hubzilla] [https://github.org/redmatrix/hubzilla source code]
* [http://friendica.com/ Friendica] [https://github.org/friendica/friendica source code]
* [http://github.com/dissolve/inkblot InkBlot]
* ...
* ...

== 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 the vCard4 vocabulary, 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-json

2018-04-24T09:40:29Z

Zegnat: /* See Also */ Remove link, now mentioned in the rel-urls object write-up

<dfn style="font-style:normal;font-weight:bold">microformats2 JSON</dfn> is the canonical output format of the [[microformats2-parsing|microformats2 parsing]] algorithm. As such it can be used to compare parsers and create [[test-suite|test suites]]. It is also used as the official serialisation format of microformats objects, and relied upon by specifications such as [https://micropub.net/ Micropub].

<div style="margin:1em;padding:1em;background:#FFDC00;font-size:smaller">⚠️ The JSON format used is not pinned to a specific [https://indieweb.org/JSON#Specs JSON specification]. See [https://github.com/microformats/microformats2-parsing/issues/23 issue #23] for a discussion on the subject.</div>

== Parsed Document Format ==

Parsers collect not only microformats2 objects, but also [[rel|link relationships]]. Parsing an entire document will result in an outer object with 3 members named <code>items</code>, <code>rels</code>, and <code>rel-urls</code>:

<source lang=javascript>{
"items": [],
"rels": {},
"rel-urls": {}
}</source>

# <code>items</code> is an array of [[microformats2-json#microformat2_Objects|microformats2 objects]], ordered according to their order in the source document.
# <code>rels</code> is an object where the member names reflect all <code>rel</code>-values found in the source document.
# <code>rel-urls</code> is an object where the member names reflect all URLs found in the source document with <code>rel</code>-values attached.

== microformat2 Objects ==

The '''microformats2 object''' is an object with 2 required members named <code>type</code> and <code>properties</code>, as well as an optional member named <code>children</code>:

<source lang=javascript>{
"type": [],
"properties": {},
"children": []
}</source>

# <code>type</code> is an array of the types that identify the microformat, ordered alphabetically.
# <code>properties</code> is an object where the member names reflect all properties found for the microformat.
# The optional member <code>children</code> is an array of other microformats2 objects that were found nested in the current one.

=== type ===

<div style="margin:1em;padding:1em;background:#7FDBFF;font-size:smaller">ℹ️ '''This section needs expanding.''' It needs an example of a microformats2 object that uses multiple types and still makes sense.</div>

The <code>type</code> member contains an alphabetically sorted array of root class names. These names express what the microformat is expressing, and are often coupled to which properties to expect through documented conventions.

The root class names are individual strings that match the pattern <code>h-([0-9a-z]+-)?[a-z]+</code>.

The following example shows an <code>h-entry</code> type microformats2 object, with a single property attached. The <code>h-entry</code> type is [[h-entry|documented on the wiki]], this way types point towards documented conventions that hold true no matter what the source document was.

<source lang=javascript>{
"type": ["h-entry"],
"properties": {
"summary": ["A short published note."]
}
}</source>

=== properties ===

The <code>properties</code> member contains an object where every member name is a microformats2 property name, and every member value is an array of the found microformats2 values. Even when only one value is given, it will be inside an array.

Valid values in the value array are one of the following:

# a string value, the most common value,
# an embedded markup object, containing both a plain string value and the verbatim mark-up from the source document, or
# another microformat2 object.

If a microformat2 object is used as the value of a property, it will gain the additional member <code>value</code> to express a plain string representation. If a consuming application does not understand the nested microformat2 object, it can opt to treat it as that string.

If a microformat2 object is used as the value of a property, when the parser is also instructed to return it as an embedded markup object, it will gain the additional member <code>html</code>.

The following example shows an <code>h-entry</code> type microformats2 object, with 3 properties to show the 3 different types of properties. The <code>name</code> is a single string, the <code>content</code> contains verbatim HTML from the source document, and the <code>author</code> is a nested microformat2 <code>h-card</code> object. The <code>in-reply-to</code> property has been added to show how one property may contain multiple valid values.

To see what these properties mean in the context of an <code>h-entry</code> type, see [[h-entry#Core_Properties|the Core Properties section on the type’s wiki page]].

<source lang=javascript>{
"type": ["h-entry"],
"properties": {
"name": ["An example entry"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut. Dicta ut repellat quisquam repellendus et iste consequatur.</p>\n<p>Consequuntur repellat sed aut in et dolores. Consequatur amet quo enim.</p>",
"value": "Ut non sit saepe porro porro est aut. Dicta ut repellat quisquam repellendus et iste consequatur.\nConsequuntur repellat sed aut in et dolores. Consequatur amet quo enim."
}
],
"author": [
{
"type": ["h-card"],
"properties": {
"name": ["Mx Example"],
"url": ["https://example.com/"]
},
"value": "Mx Example"
}
],
"in-reply-to": [
{
"type": ["h-cite"],
"properties": {
"name": ["Example Domain"],
"author": ["IANA"],
"url": ["https://example.org/"]
},
"value": "https://example.org/"
},
"https://example.net/"
]
}
}</source>

=== children ===

The optional <code>children</code> member is added when nested microformats are found and contains an array of microformat2 objects.

This happens when other objects are contained with outer ones, e.g. data is marked up with microformats within the content of an <code>h-entry</code>. Another possibility is that the outer object exists to group all its nested objects, such as an <code>[[h-feed]]</code>.

The following example shows an <code>h-feed</code> type microformats2 object with a few properties that describe the feed, and an array of <code>h-entry</code> objects as its children.

<source lang=javascript>{
"type": ["h-feed"],
"properties": {
"author": ["https://example.org/"],
"name": ["Example Feed"]
},
"children": [
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 1"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
},
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 2"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
},
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 3"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
}
]
}</source>

== rels Object ==

The '''rels object''' is an object with any amount of members, where every member name is a link relationship (see [[existing-rel-values|the documented existing relationships]] for examples) and every member value is an array of URLs.

Any relationship can have 1 or more URLs in its matching array. And any URL can be in several arrays, if it has several relationships associated with it.

The following example shows a rels object where 4 URLs were found in the source document:

* <code><nowiki>https://example.com/</nowiki></code> identifies the homepage using [[rel-home|the <code>home</code> relationship value]],
* <code><nowiki>https://example.com/fr/</nowiki></code> identifies an alternative version of the home page, combining the <code>home</code> and [[rel-alternate|<code>alternate</code> relationship]] values,
* <code><nowiki>https://example.com/a</nowiki></code> and <code><nowiki>https://example.com/b</nowiki></code> both identify an author of the current page using [[rel-author|the <code>author</code> relationship value]].

<source lang=javascript>{
"home": [
"https://example.com/",
"https://example.com/fr/"
],
"author": [
"https://example.com/a",
"https://example.com/b"
],
"alternate": ["https://example.com/fr/"]
}</source>

== rel-urls Object ==

The '''rel-urls object''' is an object with any amount of members, where every member name is a URL and every member value is an object.

The value object will always contain a member with the name <code>rels</code>. That member’s value will be an array of alphabeticall sorted link relationships applicable to the URL.

The value object may additionally contain any members with the following names:

* <code>hreflang</code>
* <code>media</code>
* <code>title</code>
* <code>type</code>

The values of these members are always a single string. The value is taken from the link’s attribute in the source document matching the member name. E.g. in HTML the value of an <code><a></code> element’s <code>hreflang</code> attribute will be the value of the URL’s <code>hreflang</code> member in the rel-urls object.

In addition the optional member named <code>text</code> is added if any text is associated with the URL in the source document. E.g. in HTML the text within an <code><a></code> element will be used.

The following example shows what the companion rel-urls object to the above rels object might look like. It shows the text that was used to link to the authors, giving us more context of who they are. It also makes clear that the alternative version of the home page is in fact in French and meant for handheld devices.

<source lang=javascript>{
"https://example.com/": {
"rels": ["home"],
"text": "Example Homepage"
},
"https://example.com/a": {
"rels": ["author"],
"text": "Mx Adam"
},
"https://example.com/b": {
"rels": ["author"],
"text": "Mx Baker"
},
"https://example.com/fr/": {
"rels": ["alternate", "home"],
"hreflang": "fr",
"media": "handheld",
"text": "Example page d’accueil"
}
}</source>

The rel-urls object was a later addition to the specification. It exists because so much information was lost when only the rels object was created. The discussion that shaped it [[microformats2-parsing-brainstorming#more_information_for_rel-based_formats|can be read on the brainstorming page]].

== See Also ==

* [https://tools.ietf.org/html/rfc8259 RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format]
* [https://gist.github.com/Zegnat/65ed9a9fb0546fb8c4aa0c0b790b8a40 JSON Schema for microformats2 objects], by [https://vanderven.se/martijn/ Martijn van der Ven]
* [https://github.com/cleverdevil/microformats2 Type- and vocabulary-aware microformats2 JSON validator in Python], by [https://cleverdevil.io/ Jonathan LaCour]

microformats2-json

2018-04-24T09:40:01Z

Zegnat: /* rel-urls Object */ Finish this up

<dfn style="font-style:normal;font-weight:bold">microformats2 JSON</dfn> is the canonical output format of the [[microformats2-parsing|microformats2 parsing]] algorithm. As such it can be used to compare parsers and create [[test-suite|test suites]]. It is also used as the official serialisation format of microformats objects, and relied upon by specifications such as [https://micropub.net/ Micropub].

<div style="margin:1em;padding:1em;background:#FFDC00;font-size:smaller">⚠️ The JSON format used is not pinned to a specific [https://indieweb.org/JSON#Specs JSON specification]. See [https://github.com/microformats/microformats2-parsing/issues/23 issue #23] for a discussion on the subject.</div>

== Parsed Document Format ==

Parsers collect not only microformats2 objects, but also [[rel|link relationships]]. Parsing an entire document will result in an outer object with 3 members named <code>items</code>, <code>rels</code>, and <code>rel-urls</code>:

<source lang=javascript>{
"items": [],
"rels": {},
"rel-urls": {}
}</source>

# <code>items</code> is an array of [[microformats2-json#microformat2_Objects|microformats2 objects]], ordered according to their order in the source document.
# <code>rels</code> is an object where the member names reflect all <code>rel</code>-values found in the source document.
# <code>rel-urls</code> is an object where the member names reflect all URLs found in the source document with <code>rel</code>-values attached.

== microformat2 Objects ==

The '''microformats2 object''' is an object with 2 required members named <code>type</code> and <code>properties</code>, as well as an optional member named <code>children</code>:

<source lang=javascript>{
"type": [],
"properties": {},
"children": []
}</source>

# <code>type</code> is an array of the types that identify the microformat, ordered alphabetically.
# <code>properties</code> is an object where the member names reflect all properties found for the microformat.
# The optional member <code>children</code> is an array of other microformats2 objects that were found nested in the current one.

=== type ===

<div style="margin:1em;padding:1em;background:#7FDBFF;font-size:smaller">ℹ️ '''This section needs expanding.''' It needs an example of a microformats2 object that uses multiple types and still makes sense.</div>

The <code>type</code> member contains an alphabetically sorted array of root class names. These names express what the microformat is expressing, and are often coupled to which properties to expect through documented conventions.

The root class names are individual strings that match the pattern <code>h-([0-9a-z]+-)?[a-z]+</code>.

The following example shows an <code>h-entry</code> type microformats2 object, with a single property attached. The <code>h-entry</code> type is [[h-entry|documented on the wiki]], this way types point towards documented conventions that hold true no matter what the source document was.

<source lang=javascript>{
"type": ["h-entry"],
"properties": {
"summary": ["A short published note."]
}
}</source>

=== properties ===

The <code>properties</code> member contains an object where every member name is a microformats2 property name, and every member value is an array of the found microformats2 values. Even when only one value is given, it will be inside an array.

Valid values in the value array are one of the following:

# a string value, the most common value,
# an embedded markup object, containing both a plain string value and the verbatim mark-up from the source document, or
# another microformat2 object.

If a microformat2 object is used as the value of a property, it will gain the additional member <code>value</code> to express a plain string representation. If a consuming application does not understand the nested microformat2 object, it can opt to treat it as that string.

If a microformat2 object is used as the value of a property, when the parser is also instructed to return it as an embedded markup object, it will gain the additional member <code>html</code>.

The following example shows an <code>h-entry</code> type microformats2 object, with 3 properties to show the 3 different types of properties. The <code>name</code> is a single string, the <code>content</code> contains verbatim HTML from the source document, and the <code>author</code> is a nested microformat2 <code>h-card</code> object. The <code>in-reply-to</code> property has been added to show how one property may contain multiple valid values.

To see what these properties mean in the context of an <code>h-entry</code> type, see [[h-entry#Core_Properties|the Core Properties section on the type’s wiki page]].

<source lang=javascript>{
"type": ["h-entry"],
"properties": {
"name": ["An example entry"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut. Dicta ut repellat quisquam repellendus et iste consequatur.</p>\n<p>Consequuntur repellat sed aut in et dolores. Consequatur amet quo enim.</p>",
"value": "Ut non sit saepe porro porro est aut. Dicta ut repellat quisquam repellendus et iste consequatur.\nConsequuntur repellat sed aut in et dolores. Consequatur amet quo enim."
}
],
"author": [
{
"type": ["h-card"],
"properties": {
"name": ["Mx Example"],
"url": ["https://example.com/"]
},
"value": "Mx Example"
}
],
"in-reply-to": [
{
"type": ["h-cite"],
"properties": {
"name": ["Example Domain"],
"author": ["IANA"],
"url": ["https://example.org/"]
},
"value": "https://example.org/"
},
"https://example.net/"
]
}
}</source>

=== children ===

The optional <code>children</code> member is added when nested microformats are found and contains an array of microformat2 objects.

This happens when other objects are contained with outer ones, e.g. data is marked up with microformats within the content of an <code>h-entry</code>. Another possibility is that the outer object exists to group all its nested objects, such as an <code>[[h-feed]]</code>.

The following example shows an <code>h-feed</code> type microformats2 object with a few properties that describe the feed, and an array of <code>h-entry</code> objects as its children.

<source lang=javascript>{
"type": ["h-feed"],
"properties": {
"author": ["https://example.org/"],
"name": ["Example Feed"]
},
"children": [
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 1"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
},
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 2"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
},
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 3"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
}
]
}</source>

== rels Object ==

The '''rels object''' is an object with any amount of members, where every member name is a link relationship (see [[existing-rel-values|the documented existing relationships]] for examples) and every member value is an array of URLs.

Any relationship can have 1 or more URLs in its matching array. And any URL can be in several arrays, if it has several relationships associated with it.

The following example shows a rels object where 4 URLs were found in the source document:

* <code><nowiki>https://example.com/</nowiki></code> identifies the homepage using [[rel-home|the <code>home</code> relationship value]],
* <code><nowiki>https://example.com/fr/</nowiki></code> identifies an alternative version of the home page, combining the <code>home</code> and [[rel-alternate|<code>alternate</code> relationship]] values,
* <code><nowiki>https://example.com/a</nowiki></code> and <code><nowiki>https://example.com/b</nowiki></code> both identify an author of the current page using [[rel-author|the <code>author</code> relationship value]].

<source lang=javascript>{
"home": [
"https://example.com/",
"https://example.com/fr/"
],
"author": [
"https://example.com/a",
"https://example.com/b"
],
"alternate": ["https://example.com/fr/"]
}</source>

== rel-urls Object ==

The '''rel-urls object''' is an object with any amount of members, where every member name is a URL and every member value is an object.

The value object will always contain a member with the name <code>rels</code>. That member’s value will be an array of alphabeticall sorted link relationships applicable to the URL.

The value object may additionally contain any members with the following names:

* <code>hreflang</code>
* <code>media</code>
* <code>title</code>
* <code>type</code>

The values of these members are always a single string. The value is taken from the link’s attribute in the source document matching the member name. E.g. in HTML the value of an <code><a></code> element’s <code>hreflang</code> attribute will be the value of the URL’s <code>hreflang</code> member in the rel-urls object.

In addition the optional member named <code>text</code> is added if any text is associated with the URL in the source document. E.g. in HTML the text within an <code><a></code> element will be used.

The following example shows what the companion rel-urls object to the above rels object might look like. It shows the text that was used to link to the authors, giving us more context of who they are. It also makes clear that the alternative version of the home page is in fact in French and meant for handheld devices.

<source lang=javascript>{
"https://example.com/": {
"rels": ["home"],
"text": "Example Homepage"
},
"https://example.com/a": {
"rels": ["author"],
"text": "Mx Adam"
},
"https://example.com/b": {
"rels": ["author"],
"text": "Mx Baker"
},
"https://example.com/fr/": {
"rels": ["alternate", "home"],
"hreflang": "fr",
"media": "handheld",
"text": "Example page d’accueil"
}
}</source>

The rel-urls object was a later addition to the specification. It exists because so much information was lost when only the rels object was created. The discussion that shaped it [[microformats2-parsing-brainstorming#more_information_for_rel-based_formats|can be read on the brainstorming page]].

== See Also ==

* [https://tools.ietf.org/html/rfc8259 RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format]
* [https://gist.github.com/Zegnat/65ed9a9fb0546fb8c4aa0c0b790b8a40 JSON Schema for microformats2 objects], by [https://vanderven.se/martijn/ Martijn van der Ven]
* [https://github.com/cleverdevil/microformats2 Type- and vocabulary-aware microformats2 JSON validator in Python], by [https://cleverdevil.io/ Jonathan LaCour]
* [[microformats2-parsing-brainstorming#more_information_for_rel-based_formats|Background behind the included rels and rel-urls objects]]

microformats2-json

2018-04-24T08:48:17Z

Zegnat: Use source javascript instead of pre for syntax highlighting

<dfn style="font-style:normal;font-weight:bold">microformats2 JSON</dfn> is the canonical output format of the [[microformats2-parsing|microformats2 parsing]] algorithm. As such it can be used to compare parsers and create [[test-suite|test suites]]. It is also used as the official serialisation format of microformats objects, and relied upon by specifications such as [https://micropub.net/ Micropub].

<div style="margin:1em;padding:1em;background:#FFDC00;font-size:smaller">⚠️ The JSON format used is not pinned to a specific [https://indieweb.org/JSON#Specs JSON specification]. See [https://github.com/microformats/microformats2-parsing/issues/23 issue #23] for a discussion on the subject.</div>

== Parsed Document Format ==

Parsers collect not only microformats2 objects, but also [[rel|link relationships]]. Parsing an entire document will result in an outer object with 3 members named <code>items</code>, <code>rels</code>, and <code>rel-urls</code>:

<source lang=javascript>{
"items": [],
"rels": {},
"rel-urls": {}
}</source>

# <code>items</code> is an array of [[microformats2-json#microformat2_Objects|microformats2 objects]], ordered according to their order in the source document.
# <code>rels</code> is an object where the member names reflect all <code>rel</code>-values found in the source document.
# <code>rel-urls</code> is an object where the member names reflect all URLs found in the source document with <code>rel</code>-values attached.

== microformat2 Objects ==

The '''microformats2 object''' is an object with 2 required members named <code>type</code> and <code>properties</code>, as well as an optional member named <code>children</code>:

<source lang=javascript>{
"type": [],
"properties": {},
"children": []
}</source>

# <code>type</code> is an array of the types that identify the microformat, ordered alphabetically.
# <code>properties</code> is an object where the member names reflect all properties found for the microformat.
# The optional member <code>children</code> is an array of other microformats2 objects that were found nested in the current one.

=== type ===

<div style="margin:1em;padding:1em;background:#7FDBFF;font-size:smaller">ℹ️ '''This section needs expanding.''' It needs an example of a microformats2 object that uses multiple types and still makes sense.</div>

The <code>type</code> member contains an alphabetically sorted array of root class names. These names express what the microformat is expressing, and are often coupled to which properties to expect through documented conventions.

The root class names are individual strings that match the pattern <code>h-([0-9a-z]+-)?[a-z]+</code>.

The following example shows an <code>h-entry</code> type microformats2 object, with a single property attached. The <code>h-entry</code> type is [[h-entry|documented on the wiki]], this way types point towards documented conventions that hold true no matter what the source document was.

<source lang=javascript>{
"type": ["h-entry"],
"properties": {
"summary": ["A short published note."]
}
}</source>

=== properties ===

The <code>properties</code> member contains an object where every member name is a microformats2 property name, and every member value is an array of the found microformats2 values. Even when only one value is given, it will be inside an array.

Valid values in the value array are one of the following:

# a string value, the most common value,
# an embedded markup object, containing both a plain string value and the verbatim mark-up from the source document, or
# another microformat2 object.

If a microformat2 object is used as the value of a property, it will gain the additional member <code>value</code> to express a plain string representation. If a consuming application does not understand the nested microformat2 object, it can opt to treat it as that string.

If a microformat2 object is used as the value of a property, when the parser is also instructed to return it as an embedded markup object, it will gain the additional member <code>html</code>.

The following example shows an <code>h-entry</code> type microformats2 object, with 3 properties to show the 3 different types of properties. The <code>name</code> is a single string, the <code>content</code> contains verbatim HTML from the source document, and the <code>author</code> is a nested microformat2 <code>h-card</code> object. The <code>in-reply-to</code> property has been added to show how one property may contain multiple valid values.

To see what these properties mean in the context of an <code>h-entry</code> type, see [[h-entry#Core_Properties|the Core Properties section on the type’s wiki page]].

<source lang=javascript>{
"type": ["h-entry"],
"properties": {
"name": ["An example entry"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut. Dicta ut repellat quisquam repellendus et iste consequatur.</p>\n<p>Consequuntur repellat sed aut in et dolores. Consequatur amet quo enim.</p>",
"value": "Ut non sit saepe porro porro est aut. Dicta ut repellat quisquam repellendus et iste consequatur.\nConsequuntur repellat sed aut in et dolores. Consequatur amet quo enim."
}
],
"author": [
{
"type": ["h-card"],
"properties": {
"name": ["Mx Example"],
"url": ["https://example.com/"]
},
"value": "Mx Example"
}
],
"in-reply-to": [
{
"type": ["h-cite"],
"properties": {
"name": ["Example Domain"],
"author": ["IANA"],
"url": ["https://example.org/"]
},
"value": "https://example.org/"
},
"https://example.net/"
]
}
}</source>

=== children ===

The optional <code>children</code> member is added when nested microformats are found and contains an array of microformat2 objects.

This happens when other objects are contained with outer ones, e.g. data is marked up with microformats within the content of an <code>h-entry</code>. Another possibility is that the outer object exists to group all its nested objects, such as an <code>[[h-feed]]</code>.

The following example shows an <code>h-feed</code> type microformats2 object with a few properties that describe the feed, and an array of <code>h-entry</code> objects as its children.

<source lang=javascript>{
"type": ["h-feed"],
"properties": {
"author": ["https://example.org/"],
"name": ["Example Feed"]
},
"children": [
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 1"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
},
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 2"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
},
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 3"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
}
]
}</source>

== rels Object ==

The '''rels object''' is an object with any amount of members, where every member name is a link relationship (see [[existing-rel-values|the documented existing relationships]] for examples) and every member value is an array of URLs.

Any relationship can have 1 or more URLs in its matching array. And any URL can be in several arrays, if it has several relationships associated with it.

The following example shows a rels object where 4 URLs were found in the source document:

* <code><nowiki>https://example.com/</nowiki></code> identifies the homepage using [[rel-home|the <code>home</code> relationship value]],
* <code><nowiki>https://example.com/fr/</nowiki></code> identifies an alternative version of the home page, combining the <code>home</code> and [[rel-alternate|<code>alternate</code> relationship]] values,
* <code><nowiki>https://example.com/a</nowiki></code> and <code><nowiki>https://example.com/b</nowiki></code> both identify an author of the current page using [[rel-author|the <code>author</code> relationship value]].

<source lang=javascript>{
"home": [
"https://example.com/",
"https://example.com/fr/"
],
"author": [
"https://example.com/a",
"https://example.com/b"
],
"alternate": ["https://example.com/fr/"]
}</source>

== rel-urls Object ==

<div style="margin:1em;padding:1em;background:#7FDBFF;font-size:smaller">ℹ️ '''This section is a stub.''' You can help the microformats.org wiki by expanding it.</div>

The '''rel-urls object''' is an object with any amount of members, where every member name is a URL and every member value is an object.

<source lang=javascript>{
"https://example.com/": {
"rels": ["home"],
"text": "Example Homepage"
},
"https://example.com/a": {
"rels": ["author"],
"text": "Mx Adam"
},
"https://example.com/b": {
"rels": ["author"],
"text": "Mx Baker"
},
"https://example.com/fr/": {
"rels": ["alternate", "home"],
"hreflang": "fr",
"text": "Example page d’accueil"
}
}</source>

== See Also ==

* [https://tools.ietf.org/html/rfc8259 RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format]
* [https://gist.github.com/Zegnat/65ed9a9fb0546fb8c4aa0c0b790b8a40 JSON Schema for microformats2 objects], by [https://vanderven.se/martijn/ Martijn van der Ven]
* [https://github.com/cleverdevil/microformats2 Type- and vocabulary-aware microformats2 JSON validator in Python], by [https://cleverdevil.io/ Jonathan LaCour]
* [[microformats2-parsing-brainstorming#more_information_for_rel-based_formats|Background behind the included rels and rel-urls objects]]

h-review

2018-04-24T08:44:24Z

Zegnat: Note convergence to h-entry with a couple of properties seen in the wild, add Aaron to examples section, and mention his great piece on keeping backwards compatibility.

<entry-title>h-review</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-review</dfn> is a simple, open format for publishing reviews on the web. h-review is one of several open [[microformats|microformat]] draft standards suitable for embedding data in HTML.

h-review is the [[microformats2]] update to [[hReview]].

{{cc0-owfa-license}}

== Example ==
Here is a simple review example:

<source lang=html4strict>
<div class="h-review">
<h1 class="p-name">Microformats: is structured data worth it?</h1>

<blockquote>
<a class="p-item h-item" href="http://microformats.org">Microformats</a> are the simplest way to publish structured data on the web.
</blockquote>

<p>
<data class="p-rating" value="5">★★★★★</data>
Published <time class="dt-published" datetime="2013-06-12 12:00:00">12<sup>th</sup> June 2013</time>
by <a class="p-author h-card" href="http://example.com">Joe Bloggs</a>.
</p>

<div class="e-content">
<p>Yes, microformats are undoubtedly great. They are the simplest way to markup structured data in HTML and reap the benefits thereof, including using your web page as your API by automatic conversion to JSON. The alternatives of microdata/schema and RDFa are much more work, require more markup, and are more complicated (harder to get right, more likely to break).</p>
</div>
</div>
</source>

Parsed JSON:
<source lang=javascript>
{
"items": [
{
"type": [
"h-review"
],
"properties": {
"name": [
"Microformats: is structured data worth it?"
],
"item": [
{
"value": "Microformats",
"type": [
"h-item"
],
"properties": {
"name": [
"Microformats"
],
"url": [
"http://microformats.org"
]
}
}
],
"rating": [
"5"
],
"published": [
"2013-06-12 12:00:00"
],
"author": [
{
"value": "Joe Bloggs",
"type": [
"h-card"
],
"properties": {
"name": [
"Joe Bloggs"
],
"url": [
"http://example.com"
]
}
}
],
"content": [
{
"value": "Yes, microformats are undoubtedly great. They are the simplest way to markup structured data in HTML and reap the benefits thereof, including using your web page as your API by automatic conversion to JSON. The alternatives of microdata/schema and RDFa are much more work, require more markup, and are more complicated (harder to get right, more likely to break).",
"html": "<p>Yes, microformats are undoubtedly great. They are the simplest way to markup structured data in HTML and reap the benefits thereof, including using your web page as your API by automatic conversion to JSON. The alternatives of microdata/schema and RDFa are much more work, require more markup, and are more complicated (harder to get right, more likely to break).</p>"
}
]
}
}
]
}
</source>

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

'''p-name''', '''p-item''', '''p-rating''', '''dt-published''', '''p-author''', '''e-content''' and the other property class names listed below defined elements as ''properties'' of the h-review.

The class '''<code>h-item</code>''' is a ''root class name'' that indicates an embedded '''[[h-item]]''' for the p-item property.

The class '''<code>h-card</code>''' is a ''root class name'' that indicates an embedded '''[[h-card]]''' for the p-author property.

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

== Properties ==
h-review properties, inside an element with class '''h-review''':

* '''<code>p-name</code>''' - name of the review
* '''<code>p-item</code>''' - thing been reviewed, including embedded microformat for e.g. 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-author</code>''' - person who authored the review, optionally with an embedded [[h-card]]
* '''<code>dt-published</code>''' - date time of when the review was written and published
* '''<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-content</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>''' - review permalink URL

All properties are optional.

Experimental properties currently in use in the wild but not (yet) part of the official h-review spec. Several of these seem to be because of h-review convergence towards [[h-entry]], as h-review gets used alongside h-entry within [[h-feed]]:

* '''<code>p-location</code>''' - location the review was posted from, optionally embed [[h-card]], [[h-adr]], or [[h-geo]]
* '''<code>p-summary</code>''' - short review summary
* '''<code>u-syndication</code>''' - URL(s) of syndicated copies of this review. The property equivalent of [[rel-syndication]] ([https://aaronparecki.com/2018/01/29/10/ example] with [https://www.amazon.com/review/R1P2C3ATN75836/ref=pe_1098610_137716200_cm_rv_eml_rv0_rv syndication to Amazon])

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

h-review is ready to use.

== Property Details ==
(stub, add any property explanations here)

== Examples in the Wild ==
* … add any h-review examples you find in the wild
* https://cleverdevil.io/2015/blood-rites-book-six-of-the-dresden-files
* https://aaronparecki.com/2018/01/29/10/ (more on Aaron’s [https://aaronparecki.com/reviews review feed])

== Implementations ==
* [https://github.com/cleverdevil/Known-Reviews Reviews plugin for Known CMS] by [https://cleverdevil.io Jonathan LaCour].
** [https://github.com/cleverdevil/Known-Reviews/pull/4 pending pull request to sync with spec update 2016-05-29] -t

== Validating ==
{{h-spec-section-validating}}

== Backward Compatibility ==
=== Publisher Compatibility ===
For backward compatibility, you may wish to use classic [[hReview]] classnames on an h-review permalink page in addition to the more future-proof h-review properties, for example:

<source lang=html4strict>
<div class="h-review hreview">
<h1 class="p-name fn">My great review</h1>
</div>
</source>

See [https://aaronparecki.com/ Aaron Parecki]’s [https://aaronparecki.com/2016/12/17/8/owning-my-reviews Why Microformats? Owning My Reviews] for a reason to be backwards compatible.

=== Parser Compatibility ===
Microformats parsers should detect classic properties and parse them as microformats 2 properties. If an "h-review" is found, don't look for an "hReview" on the same element.

Compatibility root class name: hreview

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>item</code> (without vcard, vevent, hproduct) - parse as '''p-item h-item''' including backcompat nested properties:
** <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>item vcard</code> - parse as '''p-item h-card''' including backcompat [[hCard]] parsing
* <code>item vevent</code> - parse as '''p-item h-event''' including backcompat [[hCalendar]] vevent property parsing
* <code>item hproduct</code> - parse as '''p-item h-product''' including backcompat [[hProduct]] parsing
* <code>reviewer</code> - parse as '''p-author''', including compat root vcard in the absence of h-card
* <code>dtreviewed</code> - parse as '''dt-published'''
* <code>rating</code>
* <code>best</code>
* <code>worst</code>
* <code>description</code> - parse as '''e-content'''
* <code>rel=tag</code> - parse as '''<code>p-category</code>'''. While not a class name nor typical microformats property, [[rel-tag|rel=tag]] was the typical way to tag an hreview. Thus parsers should look for rel=tag hyperlinks inside an hreview, and take the last path segment of their "href" value as a value for a '''<code>p-category</code>''' property.
* <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.

=== prior property names ===
There may be a handful of h-reviews out there (only one known so far) that use prior h-review property names. Parsers encountering these *may* interpret them as follows:

* <code>dt-reviewed</code> treat as a fallback for '''<code>dt-published</code>'''
* <code>e-description</code> treat as a fallback for '''<code>e-content</code>'''
* <code>p-reviewer</code> treat as a fallback for '''<code>p-author</code>'''

== Background ==
h-review is based on the existing [[hReview]] specification.

== See Also ==
* [[microformats2]]
* [[h-card]]
* [[h-event]]
* [[h-adr]]
* [[h-geo]]
* [[h-product]] can all be embedded in h-review as the p-item
* [[h-item]] is a minimal microformat in case none of the others suitably represent the item being reviewed

[[Category:Draft Specifications]]

microformats2-json

2018-04-23T19:56:04Z

Zegnat: Stubs aren’t so much stubs when they need only a single specific expension, update rels with a multi-rel URL, start the rel-urls documentation

<dfn style="font-style:normal;font-weight:bold">microformats2 JSON</dfn> is the canonical output format of the [[microformats2-parsing|microformats2 parsing]] algorithm. As such it can be used to compare parsers and create [[test-suite|test suites]]. It is also used as the official serialisation format of microformats objects, and relied upon by specifications such as [https://micropub.net/ Micropub].

<div style="margin:1em;padding:1em;background:#FFDC00;font-size:smaller">⚠️ The JSON format used is not pinned to a specific [https://indieweb.org/JSON#Specs JSON specification]. See [https://github.com/microformats/microformats2-parsing/issues/23 issue #23] for a discussion on the subject.</div>

== Parsed Document Format ==

Parsers collect not only microformats2 objects, but also [[rel|link relationships]]. Parsing an entire document will result in an outer object with 3 members named <code>items</code>, <code>rels</code>, and <code>rel-urls</code>:

<pre>{
"items": [],
"rels": {},
"rel-urls": {}
}</pre>

# <code>items</code> is an array of [[microformats2-json#microformat2_Objects|microformats2 objects]], ordered according to their order in the source document.
# <code>rels</code> is an object where the member names reflect all <code>rel</code>-values found in the source document.
# <code>rel-urls</code> is an object where the member names reflect all URLs found in the source document with <code>rel</code>-values attached.

== microformat2 Objects ==

The '''microformats2 object''' is an object with 2 required members named <code>type</code> and <code>properties</code>, as well as an optional member named <code>children</code>:

<pre>{
"type": [],
"properties": {},
"children": []
}</pre>

# <code>type</code> is an array of the types that identify the microformat, ordered alphabetically.
# <code>properties</code> is an object where the member names reflect all properties found for the microformat.
# The optional member <code>children</code> is an array of other microformats2 objects that were found nested in the current one.

=== type ===

<div style="margin:1em;padding:1em;background:#7FDBFF;font-size:smaller">ℹ️ '''This section needs expanding.''' It needs an example of a microformats2 object that uses multiple types and still makes sense.</div>

The <code>type</code> member contains an alphabetically sorted array of root class names. These names express what the microformat is expressing, and are often coupled to which properties to expect through documented conventions.

The root class names are individual strings that match the pattern <code>h-([0-9a-z]+-)?[a-z]+</code>.

The following example shows an <code>h-entry</code> type microformats2 object, with a single property attached. The <code>h-entry</code> type is [[h-entry|documented on the wiki]], this way types point towards documented conventions that hold true no matter what the source document was.

<pre>{
"type": ["h-entry"],
"properties": {
"summary": ["A short published note."]
}
}</pre>

=== properties ===

The <code>properties</code> member contains an object where every member name is a microformats2 property name, and every member value is an array of the found microformats2 values. Even when only one value is given, it will be inside an array.

Valid values in the value array are one of the following:

# a string value, the most common value,
# an embedded markup object, containing both a plain string value and the verbatim mark-up from the source document, or
# another microformat2 object.

If a microformat2 object is used as the value of a property, it will gain the additional member <code>value</code> to express a plain string representation. If a consuming application does not understand the nested microformat2 object, it can opt to treat it as that string.

If a microformat2 object is used as the value of a property, when the parser is also instructed to return it as an embedded markup object, it will gain the additional member <code>html</code>.

The following example shows an <code>h-entry</code> type microformats2 object, with 3 properties to show the 3 different types of properties. The <code>name</code> is a single string, the <code>content</code> contains verbatim HTML from the source document, and the <code>author</code> is a nested microformat2 <code>h-card</code> object. The <code>in-reply-to</code> property has been added to show how one property may contain multiple valid values.

To see what these properties mean in the context of an <code>h-entry</code> type, see [[h-entry#Core_Properties|the Core Properties section on the type’s wiki page]].

<pre>{
"type": ["h-entry"],
"properties": {
"name": ["An example entry"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut. Dicta ut repellat quisquam repellendus et iste consequatur.</p>\n<p>Consequuntur repellat sed aut in et dolores. Consequatur amet quo enim.</p>",
"value": "Ut non sit saepe porro porro est aut. Dicta ut repellat quisquam repellendus et iste consequatur.\nConsequuntur repellat sed aut in et dolores. Consequatur amet quo enim."
}
],
"author": [
{
"type": ["h-card"],
"properties": {
"name": ["Mx Example"],
"url": ["https://example.com/"]
},
"value": "Mx Example"
}
],
"in-reply-to": [
{
"type": ["h-cite"],
"properties": {
"name": ["Example Domain"],
"author": ["IANA"],
"url": ["https://example.org/"]
},
"value": "https://example.org/"
},
"https://example.net/"
]
}
}</pre>

=== children ===

The optional <code>children</code> member is added when nested microformats are found and contains an array of microformat2 objects.

This happens when other objects are contained with outer ones, e.g. data is marked up with microformats within the content of an <code>h-entry</code>. Another possibility is that the outer object exists to group all its nested objects, such as an <code>[[h-feed]]</code>.

The following example shows an <code>h-feed</code> type microformats2 object with a few properties that describe the feed, and an array of <code>h-entry</code> objects as its children.

<pre>{
"type": ["h-feed"],
"properties": {
"author": ["https://example.org/"],
"name": ["Example Feed"]
},
"children": [
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 1"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
},
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 2"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
},
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 3"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
}
]
}</pre>

== rels Object ==

The '''rels object''' is an object with any amount of members, where every member name is a link relationship (see [[existing-rel-values|the documented existing relationships]] for examples) and every member value is an array of URLs.

Any relationship can have 1 or more URLs in its matching array. And any URL can be in several arrays, if it has several relationships associated with it.

The following example shows a rels object where 4 URLs were found in the source document:

* <code><nowiki>https://example.com/</nowiki></code> identifies the homepage using [[rel-home|the <code>home</code> relationship value]],
* <code><nowiki>https://example.com/fr/</nowiki></code> identifies an alternative version of the home page, combining the <code>home</code> and [[rel-alternate|<code>alternate</code> relationship]] values,
* <code><nowiki>https://example.com/a</nowiki></code> and <code><nowiki>https://example.com/b</nowiki></code> both identify an author of the current page using [[rel-author|the <code>author</code> relationship value]].

<pre>{
"home": [
"https://example.com/",
"https://example.com/fr/"
],
"author": [
"https://example.com/a",
"https://example.com/b"
],
"alternate": ["https://example.com/fr/"]
}</pre>

== rel-urls Object ==

<div style="margin:1em;padding:1em;background:#7FDBFF;font-size:smaller">ℹ️ '''This section is a stub.''' You can help the microformats.org wiki by expanding it.</div>

The '''rel-urls object''' is an object with any amount of members, where every member name is a URL and every member value is an object.

<pre>{
"https://example.com/": {
"rels": ["home"],
"text": "Example Homepage"
},
"https://example.com/a": {
"rels": ["author"],
"text": "Mx Adam"
},
"https://example.com/b": {
"rels": ["author"],
"text": "Mx Baker"
},
"https://example.com/fr/": {
"rels": ["alternate", "home"],
"hreflang": "fr",
"text": "Example page d’accueil"
}
}</pre>

== See Also ==

* [https://tools.ietf.org/html/rfc8259 RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format]
* [https://gist.github.com/Zegnat/65ed9a9fb0546fb8c4aa0c0b790b8a40 JSON Schema for microformats2 objects], by [https://vanderven.se/martijn/ Martijn van der Ven]
* [https://github.com/cleverdevil/microformats2 Type- and vocabulary-aware microformats2 JSON validator in Python], by [https://cleverdevil.io/ Jonathan LaCour]
* [[microformats2-parsing-brainstorming#more_information_for_rel-based_formats|Background behind the included rels and rel-urls objects]]

microformats2-json

2018-04-23T19:22:45Z

Zegnat: /* See Also */ Always check previews before saving, Martijn.

<dfn style="font-style:normal;font-weight:bold">microformats2 JSON</dfn> is the canonical output format of the [[microformats2-parsing|microformats2 parsing]] algorithm. As such it can be used to compare parsers and create [[test-suite|test suites]]. It is also used as the official serialisation format of microformats objects, and relied upon by specifications such as [https://micropub.net/ Micropub].

<div style="margin:1em;padding:1em;background:#FFDC00;font-size:smaller">⚠️ The JSON format used is not pinned to a specific [https://indieweb.org/JSON#Specs JSON specification]. See [https://github.com/microformats/microformats2-parsing/issues/23 issue #23] for a discussion on the subject.</div>

== Parsed Document Format ==

Parsers collect not only microformats2 objects, but also [[rel|link relationships]]. Parsing an entire document will result in an outer object with 3 members named <code>items</code>, <code>rels</code>, and <code>rel-urls</code>:

<pre>{
"items": [],
"rels": {},
"rel-urls": {}
}</pre>

# <code>items</code> is an array of [[microformats2-json#microformat2_Objects|microformats2 objects]], ordered according to their order in the source document.
# <code>rels</code> is an object where the member names reflect all <code>rel</code>-values found in the source document.
# <code>rel-urls</code> is an object where the member names reflect all URLs found in the source document with <code>rel</code>-values attached.

== microformat2 Objects ==

The '''microformats2 object''' is an object with 2 required members named <code>type</code> and <code>properties</code>, as well as an optional member named <code>children</code>:

<pre>{
"type": [],
"properties": {},
"children": []
}</pre>

# <code>type</code> is an array of the types that identify the microformat, ordered alphabetically.
# <code>properties</code> is an object where the member names reflect all properties found for the microformat.
# The optional member <code>children</code> is an array of other microformats2 objects that were found nested in the current one.

=== type ===

<div style="margin:1em;padding:1em;background:#7FDBFF;font-size:smaller">ℹ️ '''This section is a stub.''' It needs an example of a microformats2 object that uses multiple types.</div>

The <code>type</code> member contains an alphabetically sorted array of root class names. These names express what the microformat is expressing, and are often coupled to which properties to expect through documented conventions.

The root class names are individual strings that match the pattern <code>h-([0-9a-z]+-)?[a-z]+</code>.

The following example shows an <code>h-entry</code> type microformats2 object, with a single property attached. The <code>h-entry</code> type is [[h-entry|documented on the wiki]], this way types point towards documented conventions that hold true no matter what the source document was.

<pre>{
"type": ["h-entry"],
"properties": {
"summary": ["A short published note."]
}
}</pre>

=== properties ===

The <code>properties</code> member contains an object where every member name is a microformats2 property name, and every member value is an array of the found microformats2 values. Even when only one value is given, it will be inside an array.

Valid values in the value array are one of the following:

# a string value, the most common value,
# an embedded markup object, containing both a plain string value and the verbatim mark-up from the source document, or
# another microformat2 object.

If a microformat2 object is used as the value of a property, it will gain the additional member <code>value</code> to express a plain string representation. If a consuming application does not understand the nested microformat2 object, it can opt to treat it as that string.

If a microformat2 object is used as the value of a property, when the parser is also instructed to return it as an embedded markup object, it will gain the additional member <code>html</code>.

The following example shows an <code>h-entry</code> type microformats2 object, with 3 properties to show the 3 different types of properties. The <code>name</code> is a single string, the <code>content</code> contains verbatim HTML from the source document, and the <code>author</code> is a nested microformat2 <code>h-card</code> object. The <code>in-reply-to</code> property has been added to show how one property may contain multiple valid values.

To see what these properties mean in the context of an <code>h-entry</code> type, see [[h-entry#Core_Properties|the Core Properties section on the type’s wiki page]].

<pre>{
"type": ["h-entry"],
"properties": {
"name": ["An example entry"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut. Dicta ut repellat quisquam repellendus et iste consequatur.</p>\n<p>Consequuntur repellat sed aut in et dolores. Consequatur amet quo enim.</p>",
"value": "Ut non sit saepe porro porro est aut. Dicta ut repellat quisquam repellendus et iste consequatur.\nConsequuntur repellat sed aut in et dolores. Consequatur amet quo enim."
}
],
"author": [
{
"type": ["h-card"],
"properties": {
"name": ["Mx Example"],
"url": ["https://example.com/"]
},
"value": "Mx Example"
}
],
"in-reply-to": [
{
"type": ["h-cite"],
"properties": {
"name": ["Example Domain"],
"author": ["IANA"],
"url": ["https://example.org/"]
},
"value": "https://example.org/"
},
"https://example.net/"
]
}
}</pre>

=== children ===

The optional <code>children</code> member is added when nested microformats are found and contains an array of microformat2 objects.

This happens when other objects are contained with outer ones, e.g. data is marked up with microformats within the content of an <code>h-entry</code>. Another possibility is that the outer object exists to group all its nested objects, such as an <code>[[h-feed]]</code>.

The following example shows an <code>h-feed</code> type microformats2 object with a few properties that describe the feed, and an array of <code>h-entry</code> objects as its children.

<pre>{
"type": ["h-feed"],
"properties": {
"author": ["https://example.org/"],
"name": ["Example Feed"]
},
"children": [
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 1"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
},
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 2"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
},
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 3"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
}
]
}</pre>

== rels Object ==

The '''rels object''' is an object with any amount of members, where every member name is a link relationship (see [[existing-rel-values|the documented existing relationships]] for examples) and every member value is an array of URLs.

Any relationship can have 1 or more URLs in its matching array. And any URL can be in several arrays, if it has several relationships associated with it.

The following example shows a rels object where 3 URLs were found in the source document: 1 URL points to the root domain and identifies the homepage using [[rel-home|the <code>home</code> relationship value]], and 2 URLs point to two separate pages that each identify an author of the current page using [[rel-author|the <code>author</code> relationship value]].

<pre>{
"home": ["https://example.com/"],
"author": [
"https://example.com/a",
"https://example.com/b"
]
}</pre>

== rel-urls Object ==

<div style="margin:1em;padding:1em;background:#7FDBFF;font-size:smaller">ℹ️ '''This section is a stub.''' You can help the microformats.org wiki by expanding it.</div>

== See Also ==

* [https://tools.ietf.org/html/rfc8259 RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format]
* [https://gist.github.com/Zegnat/65ed9a9fb0546fb8c4aa0c0b790b8a40 JSON Schema for microformats2 objects], by [https://vanderven.se/martijn/ Martijn van der Ven]
* [https://github.com/cleverdevil/microformats2 Type- and vocabulary-aware microformats2 JSON validator in Python], by [https://cleverdevil.io/ Jonathan LaCour]
* [[microformats2-parsing-brainstorming#more_information_for_rel-based_formats|Background behind the included rels and rel-urls objects]]

microformats2-json

2018-04-23T19:22:03Z

Zegnat: /* See Also */ Use local wikilink for the rels/rel-urls link, rather than external hyperlink

<dfn style="font-style:normal;font-weight:bold">microformats2 JSON</dfn> is the canonical output format of the [[microformats2-parsing|microformats2 parsing]] algorithm. As such it can be used to compare parsers and create [[test-suite|test suites]]. It is also used as the official serialisation format of microformats objects, and relied upon by specifications such as [https://micropub.net/ Micropub].

<div style="margin:1em;padding:1em;background:#FFDC00;font-size:smaller">⚠️ The JSON format used is not pinned to a specific [https://indieweb.org/JSON#Specs JSON specification]. See [https://github.com/microformats/microformats2-parsing/issues/23 issue #23] for a discussion on the subject.</div>

== Parsed Document Format ==

Parsers collect not only microformats2 objects, but also [[rel|link relationships]]. Parsing an entire document will result in an outer object with 3 members named <code>items</code>, <code>rels</code>, and <code>rel-urls</code>:

<pre>{
"items": [],
"rels": {},
"rel-urls": {}
}</pre>

# <code>items</code> is an array of [[microformats2-json#microformat2_Objects|microformats2 objects]], ordered according to their order in the source document.
# <code>rels</code> is an object where the member names reflect all <code>rel</code>-values found in the source document.
# <code>rel-urls</code> is an object where the member names reflect all URLs found in the source document with <code>rel</code>-values attached.

== microformat2 Objects ==

The '''microformats2 object''' is an object with 2 required members named <code>type</code> and <code>properties</code>, as well as an optional member named <code>children</code>:

<pre>{
"type": [],
"properties": {},
"children": []
}</pre>

# <code>type</code> is an array of the types that identify the microformat, ordered alphabetically.
# <code>properties</code> is an object where the member names reflect all properties found for the microformat.
# The optional member <code>children</code> is an array of other microformats2 objects that were found nested in the current one.

=== type ===

<div style="margin:1em;padding:1em;background:#7FDBFF;font-size:smaller">ℹ️ '''This section is a stub.''' It needs an example of a microformats2 object that uses multiple types.</div>

The <code>type</code> member contains an alphabetically sorted array of root class names. These names express what the microformat is expressing, and are often coupled to which properties to expect through documented conventions.

The root class names are individual strings that match the pattern <code>h-([0-9a-z]+-)?[a-z]+</code>.

The following example shows an <code>h-entry</code> type microformats2 object, with a single property attached. The <code>h-entry</code> type is [[h-entry|documented on the wiki]], this way types point towards documented conventions that hold true no matter what the source document was.

<pre>{
"type": ["h-entry"],
"properties": {
"summary": ["A short published note."]
}
}</pre>

=== properties ===

The <code>properties</code> member contains an object where every member name is a microformats2 property name, and every member value is an array of the found microformats2 values. Even when only one value is given, it will be inside an array.

Valid values in the value array are one of the following:

# a string value, the most common value,
# an embedded markup object, containing both a plain string value and the verbatim mark-up from the source document, or
# another microformat2 object.

If a microformat2 object is used as the value of a property, it will gain the additional member <code>value</code> to express a plain string representation. If a consuming application does not understand the nested microformat2 object, it can opt to treat it as that string.

If a microformat2 object is used as the value of a property, when the parser is also instructed to return it as an embedded markup object, it will gain the additional member <code>html</code>.

The following example shows an <code>h-entry</code> type microformats2 object, with 3 properties to show the 3 different types of properties. The <code>name</code> is a single string, the <code>content</code> contains verbatim HTML from the source document, and the <code>author</code> is a nested microformat2 <code>h-card</code> object. The <code>in-reply-to</code> property has been added to show how one property may contain multiple valid values.

To see what these properties mean in the context of an <code>h-entry</code> type, see [[h-entry#Core_Properties|the Core Properties section on the type’s wiki page]].

<pre>{
"type": ["h-entry"],
"properties": {
"name": ["An example entry"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut. Dicta ut repellat quisquam repellendus et iste consequatur.</p>\n<p>Consequuntur repellat sed aut in et dolores. Consequatur amet quo enim.</p>",
"value": "Ut non sit saepe porro porro est aut. Dicta ut repellat quisquam repellendus et iste consequatur.\nConsequuntur repellat sed aut in et dolores. Consequatur amet quo enim."
}
],
"author": [
{
"type": ["h-card"],
"properties": {
"name": ["Mx Example"],
"url": ["https://example.com/"]
},
"value": "Mx Example"
}
],
"in-reply-to": [
{
"type": ["h-cite"],
"properties": {
"name": ["Example Domain"],
"author": ["IANA"],
"url": ["https://example.org/"]
},
"value": "https://example.org/"
},
"https://example.net/"
]
}
}</pre>

=== children ===

The optional <code>children</code> member is added when nested microformats are found and contains an array of microformat2 objects.

This happens when other objects are contained with outer ones, e.g. data is marked up with microformats within the content of an <code>h-entry</code>. Another possibility is that the outer object exists to group all its nested objects, such as an <code>[[h-feed]]</code>.

The following example shows an <code>h-feed</code> type microformats2 object with a few properties that describe the feed, and an array of <code>h-entry</code> objects as its children.

<pre>{
"type": ["h-feed"],
"properties": {
"author": ["https://example.org/"],
"name": ["Example Feed"]
},
"children": [
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 1"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
},
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 2"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
},
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 3"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
}
]
}</pre>

== rels Object ==

The '''rels object''' is an object with any amount of members, where every member name is a link relationship (see [[existing-rel-values|the documented existing relationships]] for examples) and every member value is an array of URLs.

Any relationship can have 1 or more URLs in its matching array. And any URL can be in several arrays, if it has several relationships associated with it.

The following example shows a rels object where 3 URLs were found in the source document: 1 URL points to the root domain and identifies the homepage using [[rel-home|the <code>home</code> relationship value]], and 2 URLs point to two separate pages that each identify an author of the current page using [[rel-author|the <code>author</code> relationship value]].

<pre>{
"home": ["https://example.com/"],
"author": [
"https://example.com/a",
"https://example.com/b"
]
}</pre>

== rel-urls Object ==

<div style="margin:1em;padding:1em;background:#7FDBFF;font-size:smaller">ℹ️ '''This section is a stub.''' You can help the microformats.org wiki by expanding it.</div>

== See Also ==

* [https://tools.ietf.org/html/rfc8259 RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format]
* [https://gist.github.com/Zegnat/65ed9a9fb0546fb8c4aa0c0b790b8a40 JSON Schema for microformats2 objects], by [https://vanderven.se/martijn/ Martijn van der Ven]
* [https://github.com/cleverdevil/microformats2 Type- and vocabulary-aware microformats2 JSON validator in Python], by [https://cleverdevil.io/ Jonathan LaCour]
* [[microformats2-parsing-brainstorming#more_information_for_rel-based_formats Background behind the included rels and rel-urls objects]]

microformats2-json

2018-04-23T19:20:49Z

Zegnat: /* rels Object */ add documentation

<dfn style="font-style:normal;font-weight:bold">microformats2 JSON</dfn> is the canonical output format of the [[microformats2-parsing|microformats2 parsing]] algorithm. As such it can be used to compare parsers and create [[test-suite|test suites]]. It is also used as the official serialisation format of microformats objects, and relied upon by specifications such as [https://micropub.net/ Micropub].

<div style="margin:1em;padding:1em;background:#FFDC00;font-size:smaller">⚠️ The JSON format used is not pinned to a specific [https://indieweb.org/JSON#Specs JSON specification]. See [https://github.com/microformats/microformats2-parsing/issues/23 issue #23] for a discussion on the subject.</div>

== Parsed Document Format ==

Parsers collect not only microformats2 objects, but also [[rel|link relationships]]. Parsing an entire document will result in an outer object with 3 members named <code>items</code>, <code>rels</code>, and <code>rel-urls</code>:

<pre>{
"items": [],
"rels": {},
"rel-urls": {}
}</pre>

# <code>items</code> is an array of [[microformats2-json#microformat2_Objects|microformats2 objects]], ordered according to their order in the source document.
# <code>rels</code> is an object where the member names reflect all <code>rel</code>-values found in the source document.
# <code>rel-urls</code> is an object where the member names reflect all URLs found in the source document with <code>rel</code>-values attached.

== microformat2 Objects ==

The '''microformats2 object''' is an object with 2 required members named <code>type</code> and <code>properties</code>, as well as an optional member named <code>children</code>:

<pre>{
"type": [],
"properties": {},
"children": []
}</pre>

# <code>type</code> is an array of the types that identify the microformat, ordered alphabetically.
# <code>properties</code> is an object where the member names reflect all properties found for the microformat.
# The optional member <code>children</code> is an array of other microformats2 objects that were found nested in the current one.

=== type ===

<div style="margin:1em;padding:1em;background:#7FDBFF;font-size:smaller">ℹ️ '''This section is a stub.''' It needs an example of a microformats2 object that uses multiple types.</div>

The <code>type</code> member contains an alphabetically sorted array of root class names. These names express what the microformat is expressing, and are often coupled to which properties to expect through documented conventions.

The root class names are individual strings that match the pattern <code>h-([0-9a-z]+-)?[a-z]+</code>.

The following example shows an <code>h-entry</code> type microformats2 object, with a single property attached. The <code>h-entry</code> type is [[h-entry|documented on the wiki]], this way types point towards documented conventions that hold true no matter what the source document was.

<pre>{
"type": ["h-entry"],
"properties": {
"summary": ["A short published note."]
}
}</pre>

=== properties ===

The <code>properties</code> member contains an object where every member name is a microformats2 property name, and every member value is an array of the found microformats2 values. Even when only one value is given, it will be inside an array.

Valid values in the value array are one of the following:

# a string value, the most common value,
# an embedded markup object, containing both a plain string value and the verbatim mark-up from the source document, or
# another microformat2 object.

If a microformat2 object is used as the value of a property, it will gain the additional member <code>value</code> to express a plain string representation. If a consuming application does not understand the nested microformat2 object, it can opt to treat it as that string.

If a microformat2 object is used as the value of a property, when the parser is also instructed to return it as an embedded markup object, it will gain the additional member <code>html</code>.

The following example shows an <code>h-entry</code> type microformats2 object, with 3 properties to show the 3 different types of properties. The <code>name</code> is a single string, the <code>content</code> contains verbatim HTML from the source document, and the <code>author</code> is a nested microformat2 <code>h-card</code> object. The <code>in-reply-to</code> property has been added to show how one property may contain multiple valid values.

To see what these properties mean in the context of an <code>h-entry</code> type, see [[h-entry#Core_Properties|the Core Properties section on the type’s wiki page]].

<pre>{
"type": ["h-entry"],
"properties": {
"name": ["An example entry"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut. Dicta ut repellat quisquam repellendus et iste consequatur.</p>\n<p>Consequuntur repellat sed aut in et dolores. Consequatur amet quo enim.</p>",
"value": "Ut non sit saepe porro porro est aut. Dicta ut repellat quisquam repellendus et iste consequatur.\nConsequuntur repellat sed aut in et dolores. Consequatur amet quo enim."
}
],
"author": [
{
"type": ["h-card"],
"properties": {
"name": ["Mx Example"],
"url": ["https://example.com/"]
},
"value": "Mx Example"
}
],
"in-reply-to": [
{
"type": ["h-cite"],
"properties": {
"name": ["Example Domain"],
"author": ["IANA"],
"url": ["https://example.org/"]
},
"value": "https://example.org/"
},
"https://example.net/"
]
}
}</pre>

=== children ===

The optional <code>children</code> member is added when nested microformats are found and contains an array of microformat2 objects.

This happens when other objects are contained with outer ones, e.g. data is marked up with microformats within the content of an <code>h-entry</code>. Another possibility is that the outer object exists to group all its nested objects, such as an <code>[[h-feed]]</code>.

The following example shows an <code>h-feed</code> type microformats2 object with a few properties that describe the feed, and an array of <code>h-entry</code> objects as its children.

<pre>{
"type": ["h-feed"],
"properties": {
"author": ["https://example.org/"],
"name": ["Example Feed"]
},
"children": [
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 1"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
},
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 2"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
},
{
"type": ["h-entry"],
"properties": {
"name": ["Entry 3"],
"content": [
{
"html": "<p>Ut non sit saepe porro porro est aut.</p>\n<p>Dicta ut repellat quisquam repellendus et iste consequatur.</p>",
"value": "Ut non sit saepe porro porro est aut.\nDicta ut repellat quisquam repellendus et iste consequatur."
}
]
}
}
]
}</pre>

== rels Object ==

The '''rels object''' is an object with any amount of members, where every member name is a link relationship (see [[existing-rel-values|the documented existing relationships]] for examples) and every member value is an array of URLs.

Any relationship can have 1 or more URLs in its matching array. And any URL can be in several arrays, if it has several relationships associated with it.

The following example shows a rels object where 3 URLs were found in the source document: 1 URL points to the root domain and identifies the homepage using [[rel-home|the <code>home</code> relationship value]], and 2 URLs point to two separate pages that each identify an author of the current page using [[rel-author|the <code>author</code> relationship value]].

<pre>{
"home": ["https://example.com/"],
"author": [
"https://example.com/a",
"https://example.com/b"
]
}</pre>

== rel-urls Object ==

<div style="margin:1em;padding:1em;background:#7FDBFF;font-size:smaller">ℹ️ '''This section is a stub.''' You can help the microformats.org wiki by expanding it.</div>

== See Also ==

* [https://tools.ietf.org/html/rfc8259 RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format]
* [https://gist.github.com/Zegnat/65ed9a9fb0546fb8c4aa0c0b790b8a40 JSON Schema for microformats2 objects], by [https://vanderven.se/martijn/ Martijn van der Ven]
* [https://github.com/cleverdevil/microformats2 Type- and vocabulary-aware microformats2 JSON validator in Python], by [https://cleverdevil.io/ Jonathan LaCour]
* [http://microformats.org/wiki/microformats2-parsing-brainstorming#more_information_for_rel-based_formats the thinking behind rels and rel-urls]

microformats2-json

2018-04-23T15:06:04Z

Zegnat: /* children */ Finish this section.

get-started

2018-04-23T11:43:08Z

Zegnat: Undo revision 66789 by Alatbantu (Talk)

<entry-title>Get Started</entry-title>
<div style="text-indent:2em;font-weight:bold;padding:1em;background:yellow">
Latest: [http://microformats.org/2014/03/05/getting-started-with-microformats2 Get Started with microformats2]
</div>

Get started by adding support for microformats to your website, services, and products.

== introduction ==
Microformats are based on simple markup conventions that enable you to add meaningful structure to your web content.

One of the key [[principles]] of microformats, is to privilege [[humans-first|human readable]] content. This means that you should think first and foremost of your content design being readable and accessible to web viewers. Using the [[semantic-xhtml|most appropriate HTML elements]] and applying structured [[semantic-class-names|class names]] to your markup enables you to produce content that can be clearly understood by a human audience and also used in a structured way by automated programs and other online tools. But the point is that you shouldn't have to go out of your way to produce such machine friendly markup - microformats make it easy to integrate this greater degree of structure into your websites, without the overhead of having to learn complicated new languages or formats.

The best way to understand microformats is to start using them straight away. Since they're embedded in ordinary HTML, you can take existing pages and add these structured class names to the markup, but it's recommended that when doing this, you also take a close look at the overall tag structure that you're using - maybe there is a better way to say what you mean using basic HTML tags.

Many common kinds of content can be marked up in microformats. Microformats are designed to be similar to current markup styles. Chances are, you already have some of them on your site. Start with the obvious ones. For example a simple, and very popular place to start is with [[h-card]] - a microformat for displaying personal and organizational contact details. You can think of [[h-card]] as a way to embed mini business cards in web pages, but glancing over the [[h-card-examples|examples]] shows a lot more possibilities than just that. Here are some specific places to start using microformats today:

== yourself ==
=== your website ===
If you have your own website, read [[h-card-authoring]] for tips and guidelines on how to best markup existing content with h-card and take a look at the [[h-card-examples]], then
* add [[h-card]] to your contact info page
* add h-card+[[xfn|XFN]] to your friends list or blog roll
* add your website and contact page to the [[h-card#Examples_in_the_wild|list of examples in the wild]]

=== your blog ===
If you have a blog:
* add [[hatom|hAtom]] to your blog pages
* add your blog to the [[hatom-examples-in-wild]] page.

== your organization ==
=== website ===
==== contact info ====
* '''Contact info.''' Every company or organization has a contact or about page of some sort on their website. Read [[h-card-authoring]] and add [[h-card]] to the contact/about pages along with "Add to address book" links for each h-card.
* '''Employee directory.''' If your company has a page listing employees or others that belong to the organization, add [[h-card]] to the listings or search results.
* add those pages with h-cards to the [[h-card#Examples_in_the_wild|list of examples in the wild]]

==== events ====
Use hCalendar anywhere on the website that publishes event information. Start with the [http://microformats.org/code/hcalendar/creator hCalendar creator].

===== history =====
If your organization publishes its history, mark up the events noted with hCalendar, thus allowing anybody to build a dynamic timeline application with your history.

=== products ===
Does your company make any products that generate HTML?

* Make sure such products generate [[posh|POSH]] and whenever possible, the appropriate microformats.
* Then add those products to the [[implementations]] page.

=== enterprise ===
Wondering how to use microformats in an enterprise scenario?

Any publication of information about people, events, reviews etc. could benefit from being marked up with h-card, hCalendar, and hReview respectively.

== other content ==
* Do you have an explicit copyright license on your content? Then markup the link to your license with [[rel-license]].
* Do you publish social network / relationship info? Then mark that up with [http://gmpg.org/xfn/ XFN].
* Are you tagging things? Then use [[rel-tag]] (for your own stuff) or [[xFolk]] (for tagging any URL).
* Are you publishing lists or outlines? Then use [[XOXO]].
* Do you publish reviews? Then use [[hReview]].
** Start with the [http://microformats.org/code/hreview/creator hReview creator].
* Do you publish press releases? Then use [[hatom|hAtom]].

== what next ==
Once you have added microformats support to your website and helped your company and organization do so as well:
* [[advocacy|Advocate]] the use and support of microformats on other sites as well.

And here are a few more tips:

Try to produce clean, [[semantic xhtml]], AKA [[POSH]]. Where there aren't [[microformats]] for specific types of content, feel free to experiment with your own [[poshformats]].

* [http://tantek.com/log/2004/07.html#classmeaningnotshow Class for meaning not for show]
* http://microformats.org/wiki/SemanticXHTMLDesignPrinciples
* [http://tantek.com/presentations/20040928sdforumws/semantic-xhtml.html Semantic XHTML]
* [http://tantek.com/presentations/2005/03/elementsofxhtml Meaningful XHTML]
* [http://www.tantek.com/presentations/2004etech/realworldsemanticspres.html Real World Semantics]
* ...

== translations ==
Read about how to [[get-started]] in additional <span id="languages">languages</span>:
* [[get-started-fr|français]]
* [[get-started-ru|Русский]]

== see also ==
* [[advocacy]]
* [[spread-microformats]]

microformats2-json

2018-04-22T10:40:00Z

Zegnat: Add some See Alsos

microformats2-json

2018-04-22T10:18:26Z

Zegnat: More content, mark sections as stubs

microformats2-json

2018-04-21T19:37:35Z

Zegnat: First draft of page structure.

{{stub}}

<dfn style="font-style:normal;font-weight:bold">microformats2 JSON</dfn> is the canonical output format of the [[microformats2-parsing|microformats2 parsing]] algorithm. As such it can be used to compare parsers and create [[test-suite|test suites]]. It is also used as the official serialisation format of microformats objects, and relied upon by specifications such as [https://micropub.net/ Micropub].

<div style="margin:1em;padding:1em;background:#FFDC00">⚠️ The JSON format used is not pinned to a specific [https://indieweb.org/JSON#Specs JSON specification]. See [https://github.com/microformats/microformats2-parsing/issues/23 issue #23] for a discussion on the subject.</div>

== Parsed Document Format ==

Parsers collect not only microformats2 objects, but also [[rel|link relationships]]. Parsing an entire document will result in an outer object with 3 properties: <code>items</code>, <code>rels</code>, and <code>rel-urls</code>:

<pre>{
"items": [],
"rels": {},
"rel-urls": {}
}</pre>

# <code>items</code> is an array of [[microformats2-json#microformat2_Objects|microformats2 objects]], ordered according to their order in the source document.
# <code>rels</code> is an object where the member names reflect all <code>rel</code>-values found in the source document.
# <code>rel-urls</code> is an object where the member names reflect all URLs found in the source document with <code>rel</code>-values attached.

== microformat2 Objects ==

<pre>{
"type": [],
"properties": {},
"children": []
}</pre>

# <code>type</code> is an array of the types that identify the microformat, ordered alphabetically.
# <code>properties</code> is an object where the member names reflect all properties found for the microformat.
# The optional member <code>children</code> is an array of other microformats2 objects that were found nested in the current one.

=== type ===

=== properties ===

=== children ===

== rels Object ==

== rel-urls Object ==

get-started

2018-04-21T07:18:57Z

Zegnat: Undo revision 66783 by Sewarental (Talk)

rss

2018-03-29T08:03:32Z

Zegnat: Undo revision 66760 by Feep1996 (Talk)

<entry-title>RSS</entry-title>

{{stub}}

'''<dfn>RSS</dfn>''' is a legacy XML format for syndicating typically time-stamped content from web sites. <abbr>RSS</abbr> is an acronym that that stands for: Rich Site Summary (originally RDF Site Summary, often dubbed Really Simple Syndication)[http://en.wikipedia.org/wiki/RSS]. [[Atom]] is an alternative XML format for feeds.

There are many problems consuming RSS feeds.

See the 40+ problems documented here:
* http://inessential.com/2013/03/18/brians_stupid_feed_tricks

Instead of publishing/consuming RSS:
* Publish [[h-entry]] in your HTML. See http://indiewebcamp.com/ for more
* Consume [[h-entry]], e.g. with a [[microformats2]] parser

== See Also ==
* [[h-entry]]
* [[microformats2]]
* http://indiewebcamp.com/

get-started

2018-03-29T07:20:45Z

Zegnat: Undo revision 66758 by Blinqdigital (Talk)

get-started

2018-03-26T08:46:48Z

Zegnat: Reverted edits by User:Paketwisata (Talk) to last version by User:Tantek

get-started

2018-03-23T21:19:08Z

Zegnat: Undo revision 66732 by Masterseo (Talk) - spam

get-started

2018-03-22T12:41:44Z

Zegnat: Undo revision 66729 by Ahliqiu (Talk) - spam

get-started

2018-03-21T13:23:37Z

Zegnat: Undo revision 66727 by Dagototo (Talk) - spam

get-started

2018-03-21T10:36:01Z

Zegnat: Undo revision 66725 by Parlaybola (Talk) - spam

microformats2-parsing

2018-03-04T20:27:43Z

Zegnat: /* parsing for implied properties */ Add further limitations to implying a name value per https://github.com/microformats/microformats2-parsing/issues/6

<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> or <code>link.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 the URL if it’s relative;
** 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> or <code>link.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/parsing.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 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 the URL if it’s relative;
*** removing all leading/trailing whitespace

==== 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, and no other <code>p-*</code> or <code>e-*</code> properties, and no nested microformats,
* 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 <code>name</code> 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 the URL if it’s relative;
** remove all leading/trailing whitespace
* 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]]

microformats2-parsing

2018-03-03T18:58:41Z

Zegnat: Serialisation algo is moved to the parsing page of the HTML spec

<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> or <code>link.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 the URL if it’s relative;
** 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> or <code>link.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/parsing.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 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 the URL if it’s relative;
*** removing all leading/trailing whitespace

==== 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 <code>name</code> 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 the URL if it’s relative;
** remove all leading/trailing whitespace
* 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]]

hcard-examples-in-wild-fr

2018-02-19T17:28:04Z

Zegnat: Undo revision 66679 by Christaylor88 (Talk). Per hcard-examples-in-wild no new submissions will be accepted.

<entry-title>Exemples de hCards dans la jungle</entry-title>
<div style="height:7.5em;text-align:center;font-weight:bold;font-size:larger">
<span style="padding:3em 0;float:left;width:33%">[[hcard-examples-in-wild-fr#exemples_par_catégories|Vous voulez des hCards]]</span><span style="padding:3em 0;float:left;width:33%">[[hcard-examples-in-wild-fr#exemples_nouveaux_et_non-catégorisés|Vous avez des hCards]]</span>
</div>

Cette page est une section '''informative''' de la [[hcard-fr|spécification hCard]].

Les sites suivants ont publié des [[hcard-fr|hCards]] et sont par conséquent un endroit merveilleux pour quiconque cherchant des exemples "dans la jungle" pour l'inspiration, ou essayer de parser et d'indexer.

== exemples nouveaux et non catégorisés ==
'''Vous avec une hCard ?''' Si vous avez un site avec une ou plusieurs hCard, ajoutez-le en haut de cette liste. Assurez-vous svp d'inclure au moins une URL vers une page sur votre site qui comprenne un véritable balisage [[hcard-fr|hCard]]. Les exemples ajoutés sans une URL vers une page avec un balisage hCard pourront être supprimés. Revenez après quelques jours, pour voir si quelqu'un aurait trouvé quelque problème avec les exemples fournis. Notez que les exemples peuvent être catégorisés et migrés sur la section groupée au-dessous.

Vous pouvez vouloir utiliser ces boutons sur vos pages avec des hCards. Voir [[buttons-fr#hCard]] pour les ajouts récents.
http://www.davidjanes.com/images/mf_hcard.png   http://www.boogdesign.com/images/buttons/microformat_hcard.png


* [http://www.vtcreative.fr Vtcreative] utilise hCard dans le footer du site pour mettre à disposition des visiteurs ses informations de contact.
* [http://aquelito.fr Axel Roche] utilise hCard pour l'information de contact.
* [http://jerba.be Djerba] utilise hCard pour les services listés dans l'annuaire et permet le téléchargement des données au format (.VCF) Exemple : [http://jerba.be/fr/annuaire/radisson-blu-djerba-s4.html Radisson Blu Djerba]
* [http://johanramon.fr Johan Ramon] utilise hCard sur son <abbr title="Curriculum Vitae">CV</abbr>.
* [http://cuisine-ultime.fr Cuisine ultime] - Utilise une hCard sur toutes ces pages pour lien de contact avec l'administrateur (contact invisible seul l'importation est possible).
* [http://survie.org Survie France] - présente les coordonnées de son siège national via une hCard dans le pied de page.
* [http://www.norfolkblackhistorymonth.org.uk/contact.html Norfolk Black History Month] - utilise hCard sur la page de contact et sur le site, fournissant une information de contact pour les lieux des évènements, organisateurs et organisations partenaires.
* [http://www.veganusofa.com/ VeganUSofA] - utilise hCard pour l'adresse organisation et entreprise. Exemple : [http://www.veganusofa.com/index.php?listing=4 The All Vegan Store].
*[http://adrianindo.blogspot.com Blog d'ADRIAN] a placé une hCard pour se présenter plus précisément aux visiteurs. la hCard a été listée comme un nom, une url de blog et les organisations. Vous pouvez la voir en bas de la barre latérale droite du blog.
* [http://www.canadianpokerexpo.com The Canadian Poker Expo (Toronto)], Une Expo de Poker se concentrant sur le marché à Toronto utilise hCard pour [http://www.canadianpokerexpo.com/Contact-Us/Contact-Form sa page de contact].
* [http://www.semineeas.ro Seminee As], un producteur roumain d'extincteur utilise hCard pour [http://www.semineeas.ro/contact/ l'info de contact] avec téléchargement optionnel de la vCard
*[http://www.gastrohep.com/aboutus.asp GastroHep.com] la page "About Us" utilise une hCard pour l'adresse de contact.
*[http://leemannphotography.ca/?p=contact Lee Mann Photography] utilise une hCard pour l'adresse de contact tout comme sur le blog. Idéalement elle sera bientôt en pied de page de chacune des pages.
*[http://www.kimburgess.info Kim Burgess] information minimaliste du site web avec marquage hCard.
*[http://www.plumbset.co.uk/ContactUs.htm PlumbSet UK Ltd] utilise hCard pour l'information de contact, y compris plusieurs adresses.
*[http://www.manuhealth.com/products/manuka-soap-75gm Manuhealth Natural Remedies] utilise hCard pour l'adresse de retour sur les pages produits.
*[http://www.farmaciasarria.com/esp/mapa.php Farmàcia Sarrià - Farmàcia Finestres Capdevila] utilise une hCard pour son information de contact.
*[http://www.naturesbestshot.com Nature's Best Shot Photography] - utilise une hCard sur la page contact
*[http://www.noomii.com/life-coach Noomii.com Coach Directory] - chaque coach professionnel dans l'annuaire est une hCard.
*[http://www.ethical-junction.org/member/org-2012.html Ethical Junction CIC - Profile page] Nous utilisons hCard pour chaque organisation sur sa page de profil.
*[http://www.bowtietv.com Bow Tie Television] utilise hCard pour l'information de contact sur chaque page et dans la section contacts.
*[http://www.tauruslogistics.co.nz/about/contact Taurus Logistics] utilise hCard pour l'information de contact.
*[http://www.professdiamond.com/ professdiamond] encode Thai sous UTF8 dans une hCard dans la ligne au bas de chaque page.
*[http://avonvalleylocalguide.iinet.net.au/ Avon Valley Local Guide] utilise hCard pour l'information de contact des annonceurs.
*[http://www.arizonafirstresponse.com/ Arizona First Response] utilise une hCard sur chaque pied de page.
*[http://dillingham.me.uk/ Iain Dillingham] utilise une hCard sur chaque pied de page, et a un exemple stylisé (avec le logo microformats) sur sa [http://dillingham.me.uk/contact.html page contact].
*[http://www.pixeflips.com/ Pixelflips Web & Interface Design] hCard est utilisé dans le pied de page de toutes les pages pour un accès facile à l'information.
*[http://www.herminesperr.at/ Hermine Sperr, Qualified Practitionier of the Grinberg Method® à Vienne/Autriche] Une hcard est utilisée pour l'information de contact sur chaque page du site.
* [http://www.barnard.edu/ Barnard College] - Les profils utilisent hCard pour l'information de contact. Exemple : [http://www.barnard.edu/faculty/profiles/mehrling_p.html Profil de P. Mehrling].
* [http://www.ivycat.com/ IvyCat Website Services] - Société de design web et hébergement. Une hcard pour l'information de contact. Exemple : [http://www.ivycat.com/contact/ Contact Us].
* [http://www.modeltrainswithlarry.com/ ModelTrainsWithLarry] - Utilise hCard pour l'adresse. Exemple : [http://www.modeltrainswithlarry.com/index.php?listing=502 Choo Choo Barn].
* [http://www.gardeningwithlarry.com/ GardeningWithLarry] - Utilise hCard pour l'adresse. Exemple : [http://www.gardeningwithlarry.com/index.php?listing=2681 United States Botanic Garden].
* [http://abyrvalg.com/ Abyrvalg] - communauté de ville en Russie. Utilise hCard pour afficher les adresses des sociétés locales. Exemple : [http://moscow.abyrvalg.com/biz/faq-cafe FAQ cafe à Moscou].
* [http://www.jdclark.org/v1 Jordan Clark], from the Swansea area of Wales in the United Kingdom, uses [http://www.jdclark.org/card hcard for contact information].
* [http://whichtwitterapp.com/ WhichTwitterApp] provides [http://whichtwitterapp.com/reviews/iphone/tweetie reviews of twitter apps] using hCard, hReview, rel-tag and rel-home.
* [http://www.robinleysen.be/Robin.html Robin Leysen] has a hCard on a separate page. Tried to be as complete as possible. hCard validated with Optimus.
* [http://www.jay-photographics.de/ Jay Photographics] Photographer from Stuttgart, Germany. The hcard format is used on all pages for contact information.
* [http://www.uniquesite.co.uk/ UNIQUEsite] Website designer based in Brighton, UK. Uses the hcard format for contact information.
* [http://www.slideshare.net/ SlideShare] uses hcard to identify its users. see [http://hcard.geekhood.net/?url=http%3A%2F%2Fwww.slideshare.net%2Fkcmani#result Validated hcard] and [http://www.slideshare.net/kcmani Mani's SlideShare profile]
* [http://chrisruppel.com Chris Ruppel], a web developer in Dallas, TX, uses an hcard for contact information site-wide (as well as XFN)
* [http://greenspiritgardeners.com/ Green Spirit Gardeners] uses the hCard format throughout the site, including on the portfolio page for [http://greenspiritgardeners.com/portfolio/ commercial clients] and the [http://greenspiritgardeners.com/contact/ contact] page.
* [http://www.dorettebos.nl/ Dorette Bos Coaching & Training] uses hcard microformat on the [http://www.dorettebos.nl/contact.php contactpage]
* [http://volunteers.st/ Steffi & the volunteers] is an Austrian band and uses hcards for [http://volunteers.st/ band-contact in the footer] and on the page of the [http://volunteers.st/crew.html crew]
* [http://www.textundkonzept.at Bernhard Ulrich] an Austrian copywriter uses the hcard format [http://www.textundkonzept.at on all pages of his website] for his contact information
* [http://www.powerbrand.at/contact.html POWERBRAND] a brand name development agency uses a [http://www.powerbrand.at/contact.html hcard for contact information]
*[http://www.koerperarbeit.net/ Anita Braunsberger, Qualified Practitionier of the Grinberg Method® in Linz/Austria] A hcard is used for contact information on her website.
*[http://www.carpetscleansandiego.com Durbin's Carpet Care] displays a vCard for contact information and relevancy
*[http://www.nationalrural.org/organisation.aspx?id=96a3fc04-5c03-4d31-bb8a-2c55cc29aed4 National Rural Knowledge Exchange] uses an hCard with geo tags when displaying an organisations information
* [http://www.tinstar.co.uk/about-tinstar-design/contact-tinstar-design.html Tinstar Design] uses an hCard for company contact information.
* [http://www.interdixit.com/esp/contacto.php Interdixit] uses an hCard for his contact information.
* [http://www.sisnova.com/ Sisnova] uses hCard for his location pages.
* [http://www.fenoyarquitectura.com/esp/situacion.php Eduard Fenoy i Associats] uses an hCard.
* [http://www.deltronic.com/ Deltronic Corporation] of Santa Ana, CA has posted an hCard with geo tags on its [http://www.deltronic.com/contact.shtml Contact] page. Background image of a contact card reinforces content. For those without enabling browser extensions, both hCard "logo" and text link make vCard available via external parser.
* [http://transitionsmft.org/ Transitions Marriage and Family Therapy] has an hCard with geo tags in the footer of each page. There is also an hCard for each counselor on the [http://transitionsmft.org/about.php About] and [http://transitionsmft.org/contact.php Contact]pages.
* [http://ball.in.th/ ball.in.th] uses hCard to display all usernames.
* Italian business directory and community portal [http://www.cylex.it/ cylex.it] implements hCard for companies’ contact information with geo tags. Example: [http://www.cylex.it/azienda/computerland-10559319.html company profile]
* [http://jermy.musicremedy.com/ Jermy Leeuwis MSc] uses an hCard for his contact information.
* [http://idoinfotech.com Gary Eckstein] uses an hCard for [http://idoinfotech.com/contact contact information].
* [http://www.drsuarez.net/ Dr. Suarez] uses hCard on his [http://www.drsuarez.net/cvitae.html resume page]
* [http://sourceforge.net/projects/adx/ addressbook.xml] provides hCard support: [http://elektronengehirn.net/addressbook/addressbook.html adx live example]
* [http://aplawrence.com APlawrence.com] is using hCard for its [http://aplawrence.com/Links/consultants.html Unix and Linux Consultants Page]
* [http://www.afonsoduarte.com Afonso Duarte's Portfolio]. Uses an hCard for the contact information.
* [http://www.rafe.me Web development by Rafe Harwood]. Uses an hCard for the contact line in the footer of every page.
* [http://www.frogmeat.com Los Angeles Web Design]. Uses an hCard for contact information.
* [http://www.arbea.basilicata.it/ ARBEA - Agenzia della Regione Basilicata per le Erogazioni in Agricoltura]. hCard is used both for classic [http://www.arbea.basilicata.it/index.php?option=com_contact&view=contact&id=4&Itemid=101 Contact page] and for farms showcase ("Vetrina Aziende Agricole") available for registered users. I've embedded it modifying Joomla! 1.5 com_contact core component. Users of this CMS can [http://joomlacode.org/gf/project/hcardcontact/ download my patch].
* [http://trumps.net Los Angeles Search Engine Optimization] Uses hCard in the footer of all pages.
* [http://reaganvick.com Personal Portfolio of Lance Reagan Vick]. Includes examples of PGP and SSH public keys I have not seen used anywhere else. Hopefully someone finds it helpful!
* [http://www.fracturedstudios.com Los Angeles Search Engine Optimization] uses hCard to provide address information at bottom of page
* [http://www.csid.upt.ro/home.php The Distance Learning Center - CSID, "Politehnica" University Timisoara], Romania uses hCard, including geo information, in every page's footer for encoding the University address. hCard is also used for [http://www.csid.upt.ro/personal.php staff] and student contact information.
* [http://rehabpizza.co.uk Rehab Restaurant] London restaurant, see the sidebar for link to [http://rehabpizza.co.uk/rehab.hcard the hcard].
* [http://www.outdoorla.org/ Los Angeles Hiking Trails] at the bottom right, our contact information is marked up as an hcard.
* [http://c7.se Code7 Interactive] uses a hCard for Peter's [http://c7.se/contact contact details].
* The [http://www.austinartcollective.com Austin Art Collective] is a group dedicated to helping emerging artists sell their artwork online. There is space for users to submit [http://www.austinartcollective.com/gallery/Art-City-Austin.html art gallery reviews] as well, [http://www.austinartcollective.com/austin-galleries/Downtown.html organized by neighborhood] in Austin, TX USA.
* [http://www.squaremeal.co.uk/ Square Meal Restaurant Guide] uses hCards and hReviews for all restaurant listings and [http://www.squaremeal.co.uk/review/Ristorante_Semplice/1596 visitor reviews].
* [http://www.vegan-nottingham.co.uk/ Vegan Nottingham Guide] uses hcards, including geo information, for each entry in the guide.
* [http://www.cgtworld.com/ Cybernation Gamers Tournament] uses hCard in all users profiles like [http://www.cgtworld.com/profile/id-1/ Moonlext's Profile] and in the [http://www.cgtworld.com/about/press.html press page of CGT].
* [http://fcctlh.org First Christian Church of Tallahassee] Uses hCard in the footer of all pages.
* [http://www.pseps.com/vc-people/a.cfm The PSEPS Venture Capital and Private Equity Directory] Venture capital and private equity directory using microformats (both for professionals and firms).
* [http://www.koningskindkadootjes.nl koningskindkadootjes.nl] Hcard located at the bottom of the pages.
* [http://www.futurix.nl futurix.nl website and webshop development] At the bottom of the pages you'll find the hcard. With a link to technorati the hcard is used to get a vcard out of the hcard.
* [http://romjon.com/contact-us romjon.com website design & development] Contact Us page using hcard to markup address details. By using Operator, Google Maps and Yahoo! Maps can be made to open with the pointer, respectively, in pretty much and more or less exactly the right place.
* [http://www.thebeanmachine.nl/ The Bean Machine] at the bottom right, our contact information is marked up as a hcard
* [http://www.universalmedicalid.com/canada Universal Medical ID Canada] uses hCard to provide address information at bottom of page, as well as on a number of pages within the site.
* [http://web.mac.com/a.gibson/ Alex Gibson Web Developer] uses hCard for contact info on his homepage.
* [http://www.wardelldesign.com/html/contact/index.php Wardell Design] uses hCard for contact info with optional vCard download.
* [http://www.drfosterhealth.co.uk/hospital-guide/ Dr Foster Hospital Guide] uses hCard to mark up hospital addresses. See [http://www.drfosterhealth.co.uk/hospital-guide/hospital/nhs/Basingstoke-and-North-Hampshire-Hospital-366.aspx Basingstoke hospital page] for example.
* [http://www.drfosterhealth.co.uk/complementary-therapist-guide/ Dr Foster Complementary therapist guide] The [http://www.drfosterhealth.co.uk/complementary-therapist-guide/objectlist.aspx?w=32&p=8&obid=&sub=0 regulatory bodies page] uses hCard for contact details.
* [http://wayne.edu/ Wayne State University] uses hCard for University address and contact details in the global footer used on most web pages.
* [http://www.brakemeters.co.nz/ Portable Brake Meters N.Z. Ltd] uses hCard for business address and contact details.
* [http://www.tallpoppieshamilton.co.nz/ Tall Poppies Florist] uses hCard for business address and contact details.
* [http://www.livingcolour.co.nz/ Living Colour Florist] uses hCard for business address and contact details. See [http://www.livingcolour.co.nz/Information.aspx Information] page
* [http://www.m-ephotographsen.fr/ m-ephotographsen] utilise hCard.
* [http://www.2imahl.fr/fr/page/contact.html 2imahl fabricant de mobilier] utilise hCard sur sa page de contact ainsi que Geo sur sa page "[http://www.2imahl.fr/fr/info/plan.html plan]".
* [http://www.energies-reseaux-expo.com/ Forum Energies Réseaux] utilise hCard dès lors que des données nominatives sont utilisées (organisateurs du salon, exposants, conférenciers, etc.)
* [http://www.allogarage.fr/ Allogarage] - Comparatif des garages automobiles en France. Plus de 13 000 garages déjà référencés et disponibles au format hCard avec géolocalisation, exemple pour le garage
[http://www.allogarage.fr/garages/details-garage-GRAND-GARAGE-PELLEPORT-10239.html GRAND GARAGE PELLEPORT].
* [http://MyVcf.com MyVcf.com] affiche les infos au format hcard et permet de les télécharger au format vcard.
* Les Explorateurs du Web ont publié une hCard sur la [http://explorateursduweb.com/blog/about/ page contact] avec une hCard
* [http://www.areaguides.net areaguides.net] utilise le marquage hCard pour toutes les adresses sur le site.
** Exemples : http://chicagoil.areaguides.net/ypcyellowpg/restaurants.html, http://newyorkny.areaguides.net/hotels.html
* [http://www.ll.georgetown.edu/ Georgetown University Law Library] à Washington, D.C. utilise maintenant hCard pour les adresses sur toutes les pages. Signalons aussi, que les pages de bio du personnel de la bibliothèque utilisent hCard comme [http://www.ll.georgetown.edu/staff/bio.cfm?id_no=105 here] and [http://www.ll.georgetown.edu/staff/bio.cfm?id_no=32 ici].
* [http://www.mtgd.gov.md/ Le Ministère des Transports et Industries de la Route] de la République de Moldavie. Le premier site gouvernemental moldave utilisant des hCards sur les [http://www.mtgd.gov.md/ministrul/ pages du personnel], [http://www.mtgd.gov.md/subdiviziunile-ministerului/ page des sous-divisions] et dans le pied de page de chaque page (contact)
**Seules les versions en [http://www.mtgd.gov.md/ roumain] et [http://www.mtgd.gov.md/ru/ russe] sont disponibles à cette heure
* [http://www.auctionlink.com.au/ AuctionLink] utilise hCard pour les enregistrements d'enchères comme [http://www.auctionlink.com.au/Auctioneers/Auctioneer/Cam_Brown_Auctions/ Cam Brown Auctions] (utilise aussi hCalendar)
* [[User:WebOrganics|User WebOrganics]] Le Wiki Microformats wiki a des hCards sur ses pages utilisateurs.
* [http://www.ontwerpkliniek.nl Ontwerpkliniek - Bureau voor Visuele Identiteit] utilise l'information de contact hCard sur la page d'accueil et la page contac.
* [http://www.instantdes.com L'instant des...] utilise le format hCard pour tous les photographes publiés sur ce photoblog collectif.
* le blog de groupe mediadesigner [http://www.pixeltapete.de Pixeltapete] utilise la hCard pour l'information de contact des pages des auteurs d'[http://www.pixeltapete.de/alex Alex] et [http://www.pixeltapete.de/carsten Carsten] et aussi [http://www.pixeltapete.de/kontakt imprint]. [http://www.pixeltapete.de Pixeltapete] utilise son propre [http://www.pixeltapete.de/2007/11/hcard-sidebarwidget-fuer-wordpress/ widget hcard] pour les barres latérales wordpress.
* [http://www.thorsten-ott.de Thorsten Ott] utilise le format hCard pour la section contact de son résumé en ligne.
* [http://rosebleed.net/ Rosebleed] supporte [[hCard user profiles-fr|les profils utilisateurs hCard]] - votre URL profil est <nowiki>http://rosebleed.net/users/profile.php/</nowiki> suivi de votre nomutilisateur, par ex. [http://rosebleed.net/users/profile.php/silvermoon82 silvermoon82].
**'''Réparé''' les profils sont marqués explictement 'n' chaque fois que possible, autrement il l'omet
* [http://www.whitepages.com WhitePages.com] Désormais WhitePages.com a implémenté hCard sur toutes ses listes. Plus de 120 millions de hCards ! Comprend l'information professionnelle.
* [http://www.warmoth.com Warmoth Guitar Products] présente l'information hCard à deux endroits, [http://www.warmoth.com/customerservice/customer.cfm?fuseaction=order How To Order] et tout le [http://www.warmoth.com/catalog Warmoth E-Store]
* [http://www.bbc.co.uk/worldservice/bangladeshboat BBC World Service Bangladesh River Journey] un mashup de réseau social, avec hCard & d'autres microformats. Voir le [http://dharmafly.com/blog/bangladeshboat blog de discussion Dharmafly].
* [http://www.amants-du-chocolat.net/ ACCP :Les Amants du Chocolat de la Couronne Parisienne] utilise hCard sur sa page de contact et celles des fabricants de chocolats qu'ils ont dégustés.
* [http://www.accountviewsoftware.nl/ AccountviewSoftware.nl] fait usage de hCards pour le répertoire des distributeurs [http://www.accountviewsoftware.nl/dir/ (répertoire)]
* [http://www.crystalvision.co.il/ CrystalVision] utilise hCard sur sa page contact et dans le pied de page sur tout le site.
* [http://www.indigoclothing.com/ Indigo Clothing] une société de t-shirt basée à Londre utilise hCard avec le lien Technorati " Add to Address Book" sur tout le site dans le pied de page.
* [http://www.joshuamcginnis.com Joshua McGinnis] utilise hCard pour afficher son information de contact aux clients potentiels.
* La [http://www.myaffordablemarketing.com/contact.php page contact de Affordable Marketing Solutions] utilise hCard avec Technorati "Add to Address Book".
* [http://www.bo.ingv.it/contents/INGV-Bologna/Staff.html INGV Bologna] a implémenté les hCards pour les membres du personnel, marquées sous des lignes de table HTML (l'[[include-pattern-fr|include-pattern]] a aussi été utilisé pour ajouter le nom de l'organisation et le numéro de fax à chaque hCard).
* [http://ideance.net/cv.php Sébastien Delorme] utilise une hCard sur son CV en ligne. Il a également créé une [http://ideance.net/lab/hCard/ hCard de Noah Bennet] (personnage d'une série américaine) dans le cadre d'un concours
* [http://www.lefora.com Lefora] est un site gratuit d'hébergement de forums. Chaque profil utilisateur contient une hCard. (Exemple de forum pour tester :[http://funstuff.lefora.com funstuff.lefora.com])
* [http://www.handlairsystems.com H&L Air Systems] utilise hCard avec un lien Technorati vers le Carnet d'Adresses sur toutes les pages de contact.
* [http://theultimates.whitepages.com WhitePages.com] Une version spéciale de whitepages.com a toutes ses listes marquées avec hCard.
* [http://piermontweb.com/contact/ Piermont Web Design] utilise hCard sur sa page contact.
* [http://www.ie.asm.md/en/ The Institute of Power Engineering] de l'Académie des Sciences de Moldovie. Premier site moldave utiisant des hCards sur les pages du staff, par ex. [http://www.ie.asm.md/employees/oleschuk-valentin/]
**Aussi en russe : [http://www.ie.asm.md/employees-ru/sit-michail-lvovich/] et en roumain : [http://www.ie.asm.md/angajati/chiorsac-mihail/]
* Le bateau [http://styrheim.com/test/leonid.html Leonid Miloslavskiy] a fait escale dans l'Atlantique Nord
* [http://richi.co.uk/blog/2005/12/structured-blogging.html Richi Jennings] a placé son essai
*[http://oberrycavanaugh.com O'Berry|Cavanaugh] a une hCard d'organisation dans le pied de page de chaque page tout comme des hCards individuelles sur la page [http://oberrycavanaugh.com/team.php "Team"].
* [http://fortisgc.com Fortis General Counsel], par ex. le [http://fortisgc.com/joyce_lan_kim.html profil de Joyce Kim], utilise hCard pour l'information de profil et de contact.
* [http://peryplo.com Peryplo.com], par ex. [http://peryplo.com/personal/7e6786e711c6d051a39a1b7085f34955 Page Echantillon], utilise hCard pour les Hôtels, les endroits gastronomiques et les services pour touristes.
* [http://www.navitraveler.com/places/629/ NaviTraveler], par ex. [http://www.navitraveler.com/places/629/Lincoln_Memorial.html Lincoln Memorial], comprenant un [[geo-fr|Geo]].
** Réponse en 12 heures à une demande de soutien- [[User:AndyMabbett|Andy Mabbett]]
* [http://corewar.atspace.com/about.html sfghoul] a marqué son information de contact avec [[hcard-fr|hCard]]
* [http://www.zaadz.com Zaadz] utilise [[hcard-fr|hCard]] et [http://gmpg.org/xfn XFN] pour ses amis sur une page profil des utilisateurs.
*[http://www.xoxiety.com/about.html Xoxiety] utilise les hCards sur sa page "about", en liant les données à partir d'un bloc intérieur de texte.
*[http://yedda.com Yedda] - Yedda fournit des identités basées sur hCard sur tous les profils des personnes
*[http://openid.ne.jp OpenID.ne.jp] Premier service de fournisseur OpenID au Japon (日本語). Chaque page personnelle OpenID (par ex :[http://eouia.openid.ne.jp http://eouia.openid.ne.jp]) est marquée avec hCard. Et il existe aussi une hCard de société sur chaque page.
* [http://www.goldenglovepromotions.com/ Golden Glove Promotions] a utilisé des hcards sur le pied de page de chaque page pour l'information de contact.
* Les sites d'actualités Australiens "The Australian" et "Australian IT" utilisent hCard sur leurs pages de contacts : [http://www.theaustralian.com.au/contactus The Australian (contact us)] et [http://www.australianit.news.com.au/contactus Australian IT (contact us)]
* [http://www.thekiwiholiday.com/ The Kiwi Holiday] utilise des hCards pour les [http://www.thekiwiholiday.com/view-hostels Hôtels en Nouvelle Zélande], les [http://www.thekiwiholiday.com/view-restaurants Restaurants en Nouvelle Zélande] et les [http://www.thekiwiholiday.com/view-activities Activités en Nouvelle Zélande]. Fournit aussi une fonctionnalité hCard "download to address book" sur les pages de détails des listes, par ex. le Restaurant [http://www.thekiwiholiday.com/restaurant/tonys-steak Tonys Steak]
* [http://www.serviceworksglobal.com/pages/contact-us.php Service Works Global] utilise des hcards sur la page "contactus" et dans le pied de page du site.
* [http://www.qcindustries.com/ QC Industries Conveyors] utilise des hcards pour stocker l'information de contact dans le pied de page du site et dans ses [http://www.qcindustries.com/news/press-releases/ communiqués de presse].
* [http://www.confuciusinstitute.ac.uk/ The Confucius Institute for Scotland à l'Université d'Edinbourg] a utilisé une hCard pour stocker l'information de contact dans le pied de page de la page.
* [http://admnj.com/ Affiliated Direct Mail] est une société de marketing direct dans le New Jersey qui a son information de contact en format hCard.
* [http://www.golfdigest.com/ Golf Digest] supporte maintenant hCard dans des pages de [http://www.golfdigest.com/courses/places Recherche de Cours]. [http://www.golfdigest.com/courses/places/2483 exemple]
* [http://dev.opera.com/authors/ Dev Opera] Le site des développeurs d'Opera utilise des hCards sur les pages de détails des auteurs.
* [http://www.alexandrebalmes.fr/blog Le blog d'Alexandre BALMES incluant hCard]
* [http://www.logicieldessin.com/ Logiciel de dessin] Site de téléchargement de logiciel de dessin pour enfant incluant hCard
* [http://www.telechargerfacile.com/ logiciel gratuit] Site utilisant les hCard pour la présentation de fiche logiciel
* [http://annuaire.handica.com/ Annuaire du handicap Handica.com] incluant des hCards ([http://annuaire.handica.com/resultats.php?act=10681587434&sel_name=handica] Exemple)
* [http://chrischerry.name/blog/contact/ la page contact de Chris Cherry avec sa hCard]
* [http://www.kiteboarder.com.au/php/search.php www.kiteboarder.com.au] Un nouveau portail australien de kiteboarding. Les microformats ont été utilisés de façon que les utilisateurs puissent exporter les magasins <s>directement vers outlook</s>. J'ai pu apprendre les microformats durant la conférence Media 2007 à Londres - Auteur : Damien King
* [http://krevi.dk/ KREVI] Un institut de recherche Danois. Utilisant la hCard dans le pied de page de chaque page et sur la liste du personnel. C'est le premier site web Danois connu du secteur public à utiliser les microformats.[http://krevi.dk/om-krevi/organisation/medarbejdere exemple liste du personnel]
* [http://www.hss.ed.ac.uk/web-team/ Le site de l'équipe web du "College of Humanities and Social Science"] à l'Université d'Edinburgh utilise une hCard dans le pied de page de chaque page.
* [http://www.theglobeandmail.com/ globeandmail.com] Le journal national du Canada utilise une hCard pour son information de contact.
* [http://www.logisteam.pl/ Krzysztof Rucinski] utilise une hCard pour ses détails de contacts sur la page [http://www.logisteam.pl/keylogger.kontakt.html contact Logisteam].
* Creation design & marketing a des hCards sur le site, y compris la page [http://www.creation.uk.com/contact/ contact], les [http://www.creation.uk.com/company/leigh-scott/ pages profils de la société] et les [http://www.creation.uk.com/news/2007/06/06/easy-money/#comments-view commentaires sur les articles]
* <s>Wikipedia a désormais un gabarit, [http://en.wikipedia.org/wiki/Template:Hcard-geo hcard-geo], pour les hCards dans la ligne avec les coordonnées, tel que celui présent sur [http://en.wikipedia.org/wiki/Engine_Arm Engine Arm] </s>
* [http://www.corissia.com Corissia Group Hotels en Crète Grèce] a inclus l'information de contact sous une hCard sur le pied de page de chaque page du site web. Il existe aussi une implémentation multilingue.
* [http://zucchetti.co.uk/2007/03/06/simple-address-formatting-solution/ Laura Zucchetti] illustre une solution de mise en forme simple d'adresse sous une hCard et balisée dans une liste de définition.
* [http://www.feike.de/Kontakt.html Feike Contact] a une hcard en haut de la page.
* [http://www.londondrum.com/ London Drum] utilise un hébergement global de microformats - il y a des hcards et des geos sur les pages des hôtels, les événements sont écrits en format hCalendar sur la page d'accueil, et vous pouvez aussi trouver quelques critiques (comme sur la la page de [http://www.londondrum.com/accommodation/athenaeum.php l'Hôtel Athenaeum])
* [http://www.regels-stadskanaal.nl/ Regelingenbank Stadskanaal] a une hCard sur chaque page, contenant aussi l'information-Geo.
* [http://www.tomstone.se Tom Stone - Trollkarl] a une hCard dans le pied de page de chaque page du site.
* La page d'accueil de [http://www.rolandinsh.lv/ Rolands Umbrovskis] a une hcard dans la [http://www.rolandinsh.lv/?ro=contacts page contact] et toutes les autres pages avec l'information de contact.
* [http://www.epiphanysolutions.co.uk/ Epiphany Solutions Ltd] utilise une hcard sur sa page "contact us". Nous avons l'intention d'utiliser la hCard sur chaque page si c'est implémeté avec succès, associé à un lien vers le générateur de vCard Technorati.
* [http://twitter.com Twitter] utilise hCard pour l'information utilisateur (associé à plusieurs [http://ihack.us/2007/05/14/twitter-gets-microformatted/ autres microformats])
* [http://www.bendodson.com/developer/ Ben Dodson] utilise une hCard pour sa carte de visite sur chaque page de ce site tout comme il utilise les hCards pour toutes les relations XFN dans ses blogrolls.
*[http://www.pats.ua.ac.be/group Les Membres du Groupe PATS] uses hCard to mark up member contact information.
*[http://couchsurfing.com CouchSurfing] a une information limitée dans la hCard disponible sur les profils des membres (comme celui de [http://www.couchsurfing.com/people/guaka Guaka]).
*Wikipedia-UK (Ukranian)
** En cours de démarrage sur les biographies par ex. [http://uk.wikipedia.org/wiki/%D0%93%D0%B5%D1%82%D1%8C%D0%BC%D0%B0%D0%BD_%D0%92%D0%B0%D0%B4%D0%B8%D0%BC_%D0%9F%D0%B5%D1%82%D1%80%D0%BE%D0%B2%D0%B8%D1%87 Vadym Hetman]
* [http://christophertcressman.com Christopher T. Cressman] utilise une hCard sur la page d'accueil de son , [http://christophertcressman.com christopher t cressman].
* [http://kpumuk.info Dmytro Shteflyuk] utilise une hCard sur ses pages [http://kpumuk.info/contact/ contact] et [http://kpumuk.info/curriculum-vitae/ curriculum vitae].
*Wikipedia-EN
**démarrage sur les articles traitant des personnes, par exemple [http://en.wikipedia.org/wiki/Albert_einstein Albert Einstein]. La nature de Wikipedia signifie qu'il existe un grand nombre de gabarits à mettre à jour (celui d'Albert est en anglais "infobox scientist ; il existe aussi "infobox military people", "infobox musician" et ainsi de suite, presque à l'infini). La date d'anniversaire n'est seulement incluse que si elle est saisie en utilisant un gabarit date de naissance, pas sous forme de texte brut.
** commencé à initialiser les articles sur les lieux, par exemple le gabarit sur les gares de trains anglaises, par ex. [http://en.wikipedia.org/wiki/Birmingham_New_Street Birmingham New Street station] (comprend Geo) ; et les villes, par ex. [http://en.wikipedia.org/wiki/New_York_City New York]. Voir ci-dessus pour la remarque sur les gabarits de Wikipedia.
** N'importe quel éditeur de Wikipedia souhaitant aider à mettre à jour les gabarits devrait regarder le [http://en.wikipedia.org/wiki/Wikipedia:WikiProject_Microformats projet microformat de Wikipedia] ; [http://en.wikipedia.org/wiki/Category:Templates_generating_hCards les gabarits Wikipedia générant des hCards]
**Malheureusement, [http://en.wikipedia.org/w/index.php?title=Template:Infobox_Protected_area&diff=prev&oldid=152308153 d'autres éditeurs sont déjà en train de briser quelques-unes des implémentations sur Wikipedia] ; par ex. [http://en.wikipedia.org/wiki/Grand_Canyon_National_Park Grand Canyon National Park]; [http://en.wikipedia.org/w/index.php?title=List_of_islands_of_Argentina&diff=prev&oldid=155590535 retrait des attributs "region"]
* Le site de [http://www.bayofislands.net/ Bay of Islands] a implémenté hCard sur toutes ses pages, par ex : [http://www.bayofislands.net/accommodation/backpackers/saltwater-lodge/ Saltwater Lodge]
* [http://people.cs.uchicago.edu/~mpschaef/index.html Merrick Schaefer] utilise hCard sur sa page personnelle pour son information de contact.
*Wikipedia-EN - démarrage par exemple sur les gabarits des gares britanniques, par ex. [http://en.wikipedia.org/wiki/Birmingham_New_Street Birmingham New Street station] (inclut le microformat geo).
* Christian Hess (de San José, Costa Rica) a une hcard sur sa [http://www.hess-cr.com home page], ses pages [http://www.hess-cr.com/utilidades/correo.shtml#postal contact] et [http://www.hess-cr.com/secciones/curriculum/datos.shtml personal résumé] (toutes en espagnol). Il recommande aussi d'utiliser l'extension [https://addons.mozilla.org/es-ES/firefox/addon/4106 Operator] dans Firefox pour les vérifier.
* [http://www.anisfield-wolf.org/ The Anisfield-Wolf Book Awards], conçu spécifiquement pour reconnaître les travaux résolvant des problèmes de racisme et de diversité, utilise hCard pour les bios des auteurs des [http://www.anisfield-wolf.org/Winners/PastWinners/ 'past winners'].
* [http://www.buy-our-honeymoon.com/ Buy Our Honeymoon], un [http://www.buy-our-honeymoon.com/usa enregistreur de liste de mariage] utilise hCard dans sa page [http://www.buy-our-honeymoon.com/contact Contact Us].
* '''Le Webmestre du W3C ''' [http://www.w3.org/People/Jean-Gui/ Jean-Guilhem Rouel] a maintenant une hCard.
* [http://source.ibegin.com/ iBegin Source] - Plus de 10.8 millions d'entreprises ont leur information balisée avec hCard. Exemple : [http://source.ibegin.com/california/adelanto/aeronautical-supplies/general-atomics-9779-yucca-rd-1.html General Atomics]
* [http://claimid.com/jeanchristophe Jean-Christophe Capelli] sur une [http://www.wikiservice.at/fractal/wikidev.cgi?FR/PinkoMarketing/JeanChristopheCapelli page personnelle] d'une branche-wiki dédiée à construire un groupe francophone sur le pinkomarketing. Aidé par Christophe Ducamp, microformateur de tous les instants.
* [http://www.lounews.com/ The Louisville News Company] utilise hCard pour l'information de contact sur tout le site pour la société et le développeur du site.
* [http://cloudislands.com/contact.php Cloud Islands] utilise hCard pour l'innformation de contact.
* [http://www.international.unt.edu UNT International] utilise hCard pour baliser l'information de contact sur tout le site (voir particulièrement [http://www.international.unt.edu/offices/ieli/people/instructors/profiles la liste des profils des instructeurs IELI])
* [http://www.giraffo.de giraffo.de] a différentes hCards sur chaque page (+ geo dans "kontakt")
* [http://www.enap.com ENAP, Inc.] liste le contact de la DRH en format hCard sur la page [http://www.enap.com/career.aspx Career Opportunities].
* Les listes des panélistes et participants à [http://sxsw07.conferenceer.com/people Conferenceer] durant la conférence interactive 2007 South de Southwest est au format hCard.
* [http://news.stanford.edu Stanford News] (Redesign) hCard dans le pied de page sur chaque page tout comme le balisage pour chaque membre du staff sur la page Staff.
* [http://en.wikipedia.org/wiki/St_George%27s_Minster%2C_Doncaster St George's Minster, Doncaster, sur Wikipedia]
* AOL Journals publie des hCards pour les auteurs. [http://journals.aol.com/carowill/whats-happening Example]
* La [http://ian.mckellar.org/ home page] de Ian McKellar est une hCard stylisée pour ressembler à une carte de visite professionnelle.
* [[Christophe Ducamp]] sur une [http://www.wikiservice.at/fractal/wikidev.cgi?FR/MicroFormats/ChristopheDucamp page personnelle] d'une branche-wiki dédié à construire un groupe francophone sur les microformats. Aidé par [http://www.wikiservice.at/fractal/wikidev.cgi?LaurentLunati Laurent Lunati] pour le design, tout le monde peut la corriger en [http://www.wikiservice.at/fractal/wikidev.cgi?action=edit&id=FR/MicroFormats/ChristopheDucamp éditant la page].
* [http://www.matthewwest.co.uk Matthew West] a une hCard sur sa page [http://www.matthewwest.co.uk/email contact].
* Le portofolio du FreeLance en développement web [http://www.webmaster.waw.pl Paweł Wrzosek]
*[http://thibeaultstudios.com Thibeault Studios] a une hCard d'entreprise dans le pied de page sur chaque page tout comme des hCards individuelles sur la page [http://thibeaultstudios.com/contact_us.php Contact].
*Le balisage hCard [http://www.stanford.edu/ Stanford.edu] est inclus dans le pied de page de la page d'accueil et toutes les pages subséquentes dans le répertoire /home.
*[http://openid.ne.jp OpenID.ne.jp] Premier fournisseur de service OpenID au Japon (日本語). Chaque page personnelle OpenID (par ex :[http://eouia.openid.ne.jp http://eouia.openid.ne.jp]) est balisée sous hCard. Et il y a aussi une hCard de société sur chaque page.
* L'adresse de [http://www.qwertycars.co.uk/garages/mechanics-near-tadworth.aspx UK Car Garages] au Royaume Uni au format hCard.
* La page About Us de [http://www.columbiaautomation.com/sub/contact.php Columbia Automation] a balisé chaque employé sous une hCard et dispose aussi d'une hCard de société avec l'information geo.
* [http://www.pointermix.com Pointermix Design] utilise le format hCard.
* La page contact de [http://eight6.com/contact/ eight6] utilise le format hCard
* Les listes d'annonces de [http://www.raveaboutit.com.au Rave About It] utilisent le format hCard.
* La page de l'équipe d'[http://optics.org/cws/Contact/OurTeam.do optics.org].
* La première tentative de [http://www.robcottingham.ca/contact Rob Cottingham] dans les microformats est une hCard sur la page contact de son blog personnel (Il a été inspiré par la présentation de Tantek Çelik lors de Web Directions North 2007.)
* [http://redmonk.net/about-this-site Steve Ivy] - hcard sur la page "about", inclut les suspects usuels + XFN sur les 'url's, photo, et geo.
* L'[http://seattleu.edu Université de Seattle] utilise hCard sur sa page d'accueil et la plupart des pages qui partagent un gabarit officiel.
* [http://www.josemarti.waw.pl L'école secondaire José Marti XXII à Varsovie] inclut hCard sur les sections Contact et A propos de l'auteur
* [http://www.jaama.co.uk Jaama] a mis ses détails de société sous une vcard téléchargeable sur page [http://www.jaama.co.uk/Contact.aspx contact]
* [http://3amproductions.net 3AM Productions] a les détails de société balisés sous hCard sur tout le site et particulièrement pour [http://3amproductions.net/jason.php Jason] et [http://3amproductions.net/gilbert.php Gilbert]
* [http://berlin.barwick.de/index.html Berlin Guide] est en train de convertir son balisage d'adresses en hCard, par ex. [http://berlin.barwick.de/shopping/kadewe-kaufhaus-des-westens.html KaDeWe]
* [http://www.xlntads.com XLNTads] a son information de contact balisée en hCard, tout comme son plan de développement balisé en hCalendar
* [http://derrick.pallas.us Derrick Pallas] dit aux personnes de le chercher là.
* [http://bluemonkcreative.com/contact/ Bill Turner] ajoute une hCard à la page contact de son site web de freelance.
* [http://www.oppenheim.com.au/ Le blog de James Oppenheim] inclut une hCard de l'auteur dans la ligne dans le pied de page de chaque page et aussi sur la page de contact.
* [http://steinhardt.nyu.edu/ NYU Steinhardt] a [http://steinhardt.nyu.edu/faculty_bios/list/Faculty plus de 240 bios de faculté balisées], par ex. [http://steinhardt.nyu.edu/faculty_bios/view/Susan_Murray].
* [http://www.boogdesign.com/aboutus.html boogdesign.com] a ajouté une syntaxe hCard sur la page de contact.
* [http://www.gptg.org GreatPlaceToGolf], hCards pour les clubs de golf autour du monde, par exemple [http://www.gptg.org/club/12/]. Utilisation de hCard pour les joueurs et les terrains de golf, geo pour les coordonnées des terrains, et hAtom. Réalisé par FredericLepied
* [http://www.economie-poitiers.fr/ Le Service Développement Economique de la Communauté d'agglomération de Poitiers] a utilisé une hCard pour son information de contact en bas de page.
* [http://www.lesgenets.com/ Le camping des Genêts à l'ile de Ré] a utilisé une hCard pour inclure ses informations de contact.
* [http://www.entrepots-lafond.fr/ Le site des entrepots Lafond] a publié ses informations de contact à l'aide d'une hCard.
* [http://www.walkerfineart.com Walker Fine Art Gallery] La plupart des pages contiennent une hCard en pied de page.
* [http://www.brdatasystems.com.au/contact-us.html B&R Data Systems] est une hCard d'organisation. Nous avons aussi utilisé l'outil technorati pour la télécharger sous une vCard, ce qui je pense est utile pour une entreprise.
* [http://chewbittel.com/contact.php Chew Bittel Assoc., Inc.] est une hCard d'organisation. Il y a des abbr's dedans et un champ téléphone dupliqué et quelques choses cachées. J'essaie vraiment de pousser les choses à leur limite ici. Ce devrait être un bon test pour votre parseur.
* la [http://redmonk.net/about-this-site/ page about] de [[User:Steve Ivy|Steve Ivy]] a sa hCard, comprenant un lien vers son fil de contact Technorati pour laisser les visiteurs télécharger son information de contact.
* La hCard de Scott Allan Wallick est [[User:ScottWallick|sa page utilisateur]] et sur son blog, [http://www.plaintxt.org/about/2/ plaintxt.org]
* La hCard de [[User:Bob_Jonkman|Bob Jonkman]] '''sur ce 'wiki''''
* [http://thetenwordreview.com The Ten Word Review] contient simplement des critiques de dix mots. Toutes les critiques sont balisées sous des [[hreview-fr|hReviews]] et l'information utilisateur est balisée sous hCard.
* Le [http://www.westmidlandbirdclub.com/ West Midland Bird Club] (Club d'oiseau d'intérieur occidental d'Angleterre) utilise hCard sur sa [http://www.westmidlandbirdclub.com/ home page], son [http://www.westmidlandbirdclub.com/diary/ annuaire d'événements], sa page [http://www.westmidlandbirdclub.com/club/contact.htm contact], sa page de [http://www.westmidlandbirdclub.com/site/links.htm liens], la [http://www.westmidlandbirdclub.com/club/older.htm liste des anciens] et dans un pied de page qui est graduellement implémenté sur tout le site.
* OffshoreAgile.com, un sous-site de Starsoft Development Labs, utilise hCard dans les sections [http://www.offshoreagile.com/company/contact/ Contacts Starsoft] et 'Media Inquiries'.
* T-Mobile utilise hCard pour la [http://t-mobilepressoffice.co.uk/press/contact-details/ page T-Mobile UK Press Contact Details], tout comme pour quelques-uns de ses derniers communiqués de presse.
* La division de publication 'Psychology Press' et 'Routledge's Behavioral' a implémenté des pages contact sur 17 de ses sites web (exemple sur la page contact de [http://www.clinicalpsychologyarena.com/contact/ Clinical Psychology Arena])
*[http://72ppi.us 72ppi], utilise hCard dans le pied de page.
*[http://www.csarven.ca Sarven Capadisli] utilise hCard dans tout le site (y compris les commentaires utilisateurs dans les articles).
* [https://www.urbanbody.com/information/contact-us Urban Body Men's Clothing] utilise hCard pour les adresses des magasins et hCalendar pour les horaires d'ouverture.
* [http://www.iqair.us/ IQAir North America], utilise hCard pour l'information de contact.
* [http://www.infoiasi.ro/ Le site web de la Faculté des Computer Science], "A. I. Cuza" University Iaşi, Romania utilise hCard pour chaque membre du staff.
* [http://www.finds.org.uk/ The Portable Antiquities Scheme au British Museum] a des hCards ajoutées dans le pied de page de chaque page et vers les section des contacts. En train de travailler pour en ajouter plus.
* Dans [http://www.ideasfornet.com/ IdeasForNet.com - the ideas repository] des hCards ont été implémentées partiellement dans le pied de page de chaque page, et de façon plus compréhensive dans les pages contact et à propos.
* Le [http://www.cst.ed.ac.uk/ Centre of Canadian Studies] à l'Université d'Edinburgh utilise les hCards pour l'information de contact dans le pied de page du site.
* [http://www.theatrestudies.llc.ed.ac.uk/ Theatre Studies: European Theatre] à l'Univiersité d'Edinburg utilise les hCards pour l'information de contact sur sa page d'accueil.
* [http://www.carolinemockett.com/design/about.aspx Caroline Mockett] a une hCard sur sa page About Me
* [http://wait-till-i.com Christian Heilmann] a une adresse en pied de page utilisant hCard
*[http://www.audience-response-rentals.com/ Audience Response System Rentals] utilise hCard comme un popup dans l'aire d'accessibilité du site (en bas à droite) pour un copier/coller facile de l'adresse par ses clients.
* [http://www.fischsolutions.com/ Fisch Internet Solutions] utilise une hCard embarquée et une vCard pour fournir aux clients un moyen facile de les contacter sur leur section [http://fischsolutions.com/contactus.html Contact Us] du site web.
* [http://www.micatholicconference.org/ Michigan Catholic Conference] utilise hCard pour l'information de contact dans la barre latérale.
* [http://www.adambunn.co.uk/ Adam Bunn] fournit les détails de contact dans la barre latérale en utilisant hCard.
* [http://www.belkin.com/pressroom/releases/uploads/10_10_06NotebookExpansionDock.html Les communiqués de presse de Belkin] utilisent les hCards pour les contacts de Relations Publiques et les bureaux.
* [http://mybank.com myBank.com] utilise hCard pour ses listings de chaque branche de chaque banque assurée FDIC aux Etats-Unis.
* [http://leftlogic.com Left Logic] utilise hCard pour l'information de contact embarquée.
* [http://inga-art.co.uk/artist Inga Scholes] utilise hCard pour l'information de contact dans la barre latérale.
* [http://www.lussumo.com/ Lussumo] utilise hCard sur les pages de profil dans son forum de discussions logiciel [http://www.getvanilla.com/ Vanilla].
* [http://www.creative-ways.nl/ Ron Kok] utilise des hCards pour baliser les noms et URLs des commentateurs sur son blog. Il utilise aussi les hCards en combinaison avec XFN dans ses billets de blog pour pointer vers des amis et a une hcard pour lui-même dans le pied de page de son blog.
* La page des [http://www.parisweb2006.org/orateurs.php orateurs de paris web 2006] (Paris-France) contient une hCard pour tous les intervenants.
* [http://tagg.no Tagg Media] utilise hCard pour l'[http://heine.tagg.no/contact.php information de contact] et fournit un lien vers un téléchargement de vcard dans la section contact.
* L'article à propos du personnage de Matrixx [http://en.wikipedia.org/wiki/Neo_%28The_Matrix%29 Thomas A Anderson dans Wikipedia] est maintenant balisé avec hCard.
* [http://dconstruct06.madgex.com/ d.Construct 2006 Backnetwork] utilise des hCards pour les congressistes à la conférence (et fournit le balisage de façon à ce que les congressistes puisses copier et coller leurs cartes dans leurs propres sites).
* [http://www.brown.edu Brown University] utilise maintenant hCard sur la page d'accueil.
* [http://www.wideblueyonderweb.co.uk Dunks chez Wide Blue Yonder Web Design] a ajouté un balisage hCard sur sa [http://www.wideblueyonderweb.co.uk/wbyw/pages/contact.htm page contact] et cherche à l'implémenter sur toutes les pages des contacts passés et futurs pour les clients.
* [http://southamptonrubberstamp.com Southampton Rubber Stamp Company] a déspormais un balisage hCard avec un téléchargement de vCard sur chaque page.
* [http://barefoot-ceramics.com Barefoot Ceramics paint your own pottery studio] (à Newport, South Wales) a ajouté un balisage hCard à sa page [http://barefoot-ceramics.com/find#address "Find"] page et d'autres exemples d'adresses. Ils espèrent mettre en oeuvre un listing d'événement hCalendar dès qu'une classe PHP ics vers hCalendar puisse être trouvée ou écrite.
* [http://dsingleton.co.uk/ David Singleton] a ajouté une hCard à son blog.
* [http://www.thestreet.org.au The Street Theatre (Canberra, Australia)] a ajouté un balisage hCard pour baliser vers sa page [http://www.thestreet.org.au/contact.htm Contact Us]. Un balisage hCalendar sera bientôt ajouté pour toutes les pièces.
* [http://www.informatik.uni-hamburg.de/SVS/personnel/henrich/index.php Henrich C. Pöhls] a balisé sa page "about" en utilisant hcard, y compris sa clé PGP qui est stockée dans une "abbr title", en utilisant class=key.
* [http://www.yalf.de Yalf Webentwicklung] a sa page [http://www.yalf.de/kontakt d'information de contact] disponnible sous hCard (et vCard).
* [http://www.zeldman.com/about/ Jeffrey Zeldman]. Jeffrey Zeldman a balisé sa page 'about' en utilisant hCard.
* [http://WhereAreYouCamping.com Where Are You Camping]. Des hCards pour tous les membres et camps, employant tout aussi bien 'include pattern'. A la limite de ce que je connais, c'est le premier Burning Man en rapport avec l'implémentation des microformats, pour ne pas citer des adresses dans Black Rock City.
* [http://www.clacksweb.org.uk Clackmannanshire Council ]. hCard est implémenté pour tous les détails de contact sur le site et pour des individus spécifiques comme les membres élus (les 'Councillors').
* [http://www.webdirections.org Web Directions ]. La hCard est utilisée comme information de contact pour la conférence, et les conférenciers sont balisés avec hCard.
* [http://www.markthisdate.com/contactform.html MarkThisDate.com ]. Une hCard est implémentée sur notre formulaire de contact. Pour nos calendriers les hCalendars suivront dès que possible.
* [http://kollitsch.de/ Patrick Kollitsch] a construit son Profil personnel sous hCard.
* [http://www.msiinet.com/contact/ MSI Systems Integrators] a sa page "Contact MSI" encodé avec des hCards.
* [http://www.coolblue.nl/ Le site web corporate de Coolblue BV]. Les hCards ont été implémentées à la fois dans le pied de page de chaque page, et dans la section "News" pour l'information contact presse.
* [http://www.besancon.fr/index.php?p=32 Le site officiel de la ville de Besançon (France)] utilise hCard pour chaque page concernant les petites villes entourant Besançon.
* [http://2006.dconstruct.org/speakers/ la liste des conférenciers d.Construct 2006] a été implémentée en utilisant des hCards.
* [http://local.yahoo.com Yahoo Local] supporte maintenant les hCards pour les commerces et endroits dans les résultats de recherche
* [http://learningtheworld.eu/imprint/ Learning the World] a une information hCard sur l'impression, parce ce que nous n'avons pas réussi à baliser proprement les numéros de téléphone et de fax professionnels.
* Le site web [http://www.fuckparade.org F’parade] utilise hcard, même s'il n'a pas trouvé un type pour distinguer les numéros de téléphone mobile et fixes ''(recommandation utiliser <code>cell</code> pour les mobiles)''.
* [http://www.miranet.nl/contact.htm Miranet Webdesign] a ajouté une hCard sur sa [http://www.miranet.nl/contact.htm page 'contact']
* [http://weblog.200ok.com.au/ Ben Buchanan] a ajouté une vCard à la page [http://weblog.200ok.com.au/about/ 'About'sur le welbog 200ok]
* [http://www.radiantcore.com Radiant Core] a son information de contact [http://www.radiantcore.com/contact/ disponible dans la hCard].
* [http://www.mikerumble.co.uk/ Mike Rumble] [http://www.mikerumble.co.uk/contact.html a mis en ligne sa hCard].
* [http://www.saumag.edu/ Southern Arkansas University] a son pied de page encodé comme une hCard.
* [http://main.uab.edu/ University of Alabama at Birmingham] a son pied de page contact encodé sous hCard.
* [http://www.capital.edu Capital University] a le contact en pied de page et les noms des blogueurs encodés sous hCard. Aussi, toutes les informations de pages spécifiques de contact sont encodées sous hCards (voir la page [http://www.capital.edu/Internet/Default.aspx?pid=67 Admissions] pour un exemple)
* [http://main.uab.edu/shrp/ UAB School of Health Professions] utilise hCard dans son pied de page contact
* [http://green.carisenda.com/ Stephen Stewart] a sa hCard sur la page d'accueil de son weblog (section 'You are here')
* [http://www.direction.es/ Direction] utilise hCard pour l'information de contact.
* [http://audiobank.tryphon.org AudioBank] utilise hCard pour afficher les informations des membres.
* [http://www.vivabit.com/atmedia2006/speakers/ @media speakers] sont balisés avec hCard (les photos dépendent du support du tag BASE ce qui fait de cela un très bon cas de test)
* [http://www.dougransom.com Doug Ransom] utilise hCard pour sa pratique de conseil financier.
* [http://rubyandrails.org/usergroups/newcastle/members.html ncl.rb] utilise hCard pour l'information de contact.
* [http://www.snowinteractive.com/ Snow Interactive] utilise hCard pour l'information de contact.
* [http://flickr.com Flickr] supporte maintenant [[hcard-fr|hCard]] et [http://gmpg.org/xfn XFN] sur les pages de profil. Voir [http://flickr.com/photos/factoryjoe/113866484/ photo d'écran de l'interface utilisateur dans le navigateur Flock utilisant l'extension Flocktails - 17 mars 2006].
* [http://www.ndiyo.org/contact information contact pour le projet Ndiyo]
* [http://www.pixelenvy.co.uk/ Pixel Envy] utilise hCard pour l'information de contact sur chaque page.
* [http://stilbuero.de/contact/ Klaus Hartl] utilise hCard dans la barre latérale pour l'information de contact (peut être plus facile à parser à travers la distribution xhtml que xml).
* [http://charlvn.virafrikaans.com/contact hCard de Charl van Niekerk]
* [http://billy-girlardo.com/WP/ BillyBLOGirlardo] utilise hCard pour l'information de contact.
* [http://www.hicksdesign.co.uk/ Hicksdesign] utilise hCard pour l'information de contact.
* http://www.gr0w.com/articles/press/growsearch_launched_press_release/ - hCard dans un communiqué de presse pour l'information contact de presse.
* http://www.redmonk.com/cote/archives/2006/03/testing_out_mic.html - hCard avec explication
* [http://andy.ciordia.info/ it's my island], blog personnel, hcard sur la page ''[http://andy.ciordia.info/pages/about_me About the Writer]''. [[User:Ciordia9|Andy Ciordia]]
* [http://www.windowonwoking.org.uk/ Window on Woking], un site de communauté locale au Royaume-Uni, utilise hCard dans la page d'accueil de chaque membre de l'organisation et conseiller local.
* [http://ChunkySoup.net/ ChunkySoup.net] a reconçu le site complet en utilisant hAtom 0.1 et les hCards -- par [[User:ChrisCasciano|Chris Casciano]]
* [http://www.30boxes.com/ 30 Boxes], une application de calendrier social et agrégateur de style de vie digital, crée automatiquement une hcard pour vous avec votre compte. Il est trouvé sous Settings > Syndication.
* [http://www.nearwhere.com/ Nearwhere.com] vous permet de mettre une hcard sur une carte interactive.
* [http://www.brentozar.com/ Brent Ozar] a ajouté une page [http://www.brentozar.com/contact.php contact] hCard.
* [http://www.kerihenare.com/ Keri Henare] a récrit sa page [http://www.kerihenare.com/contact/ contact] hCard. Utilisant maintenant <code><object></code> au lieu de <code><img></code> pour la photo. (Merci à Brian Suda pour avoir mis à jour le convertisseur vCard)
* [http://michaelraichelson.com/contact/ Michael Raichelson] avait un hCard sur sa page contact avant SXSW, mais n'avait jamais pensé à l'ajouter ici jusqu'à ce que Tantek lui ait demandé.
* [http://www.commoner.com/~lsimon/lindsey_simon_hcard.html Lindsey Simon] a ajouté une hCard à son site suite à la demande SXSW de Tantek pour que les types l'essayent.
* [http://www.davidgagne.net/ David Gagne] a une hCard dans sa barre latérale.
* [http://www.churchzip.com/map/ Churchzip.com/map] et [http://www.skiwhere.com/map/ Skiwhere.com/map], mettent des églises, hôtels et stations de ski sur les mêmes cartes. Les endroits sont mis en page sous forme de hcards.
* Toutes les [http://www.iqdir.com/ IQ Directory Solutions] des portails web des Yellow Pages utilisent la syntaxe [[hcard-fr|hCard]] sur les listes. Par exemple, [http://www.yellowpages-cambodia.com/ Cambodia Yellow Pages] et [http://www.superpages.com.my/ Malaysia Super Pages]
* L'application cloneable Group de ning utilise la correspondance floue pour mapper les champs personnalisés en syntaxe [[hcard-fr|hCard]] sur ses [http://group.ning.com/index.php?controller=person&action=view&content=JonathanAquino pages profile].
* [http://claimid.com/factoryjoe La hCard ClaimID de Chris Messina]
* [http://factoryjoe.com/blog/hcard La hCard de Chris Messina]
* [http://flock.com/about Flock About]
* [http://tantek.com/microformats/2006/03-01-TechPlenAgenda.html Agenda: W3C Technical Plenary Day, March 1 2006] a une syntaxe [[hcard-fr|hCard]] et [[hcalendar-fr|hCalendar]]. ([http://www.w3.org/2006/03/01-TechPlenAgenda.html original ici]).
* [http://www.gr0w.com/articles/press/growsearch_launched_press_release/ GrowSearch Launched (Press Release)] utilise un hCard pour fournir le Contact du Point Presse.
* La [http://www.arborday.org/ National Arbor Day Foundation] a commencé à utiliser les hCards pour ses [http://arborday.org/programs/conferences/hazardtrees-treeplanting/ conférences]
[http://arborday.org/programs/conferences/communityforestry/index.cfm à venir]
* [http://www.multipack.co.uk The Multipack] a de nombreuses hCards, tout spécialement sur [http://www.multipack.co.uk/members/ les pages membres], tout comme pour les informations des prochaines réunions.
* [http://deadringrancor.livejournal.com/ Justin McDowell] a utilisé une hCard pour faire référence [http://deadringrancor.livejournal.com/221332.html à une personne dans son billet de blog]
* [http://davecardwell.co.uk/cv/ Dave Cardwell] a inclus sa hCard dans son Curriculum Vitae.
* [http://blog.usweb.com/ Shaun Shull] a écrit un billet magnifique sur [http://blog.usweb.com/archives/how-microformats-affect-search-engine-optimization-seo How Microformats Affect SEO], et a inclus sa [[hcard-fr|hCard]] comme l'un des exemples.
* [http://www.thefutureoftheweb.com/ Jesse Skinner] a écrit un [http://www.thefutureoftheweb.com/blog/2006/1/hcard tutoriel simple avec des exemples]
* [http://www.w3.org/2005/12/allgroupoverview.html 2006 W3C Technical Plenary Week] a marqué tous les participants, contacts et membres du comité de programme avec hCard.
* [http://www.avf-nexus.co.uk AVF-Nexus] a une hCard sur sa [http://www.avf-nexus.co.uk/contact/ page contact] - (par [http://creation.uk.com Creation"])
* [http://www.thefantasticos.com/andrew/ Andrew White] a posté [http://www.thefantasticos.com/andrew/index.php/my-hcard/ sa hCard] et [http://www.thefantasticos.com/andrew/index.php/62/microformats-the-should-have-been-obvious-web-dev-tool/ a blogué à propos].
* [http://www.2sheds.ru Oleg "2sheds" Kourapov] dans son [http://www.2sheds.ru/blog/ blog] ([http://suda.co.uk/projects/X2V/get-vcard.php?uri=http://www.2sheds.ru/blog X2V]) a transformé son profil personnel en hCard ([http://suda.co.uk/projects/X2V/get-vcard.php?uri=http://www.2sheds.ru/blog/hcard.html X2V]) et sa blogroll - par une combinaison de XFN/hCards ([http://suda.co.uk/projects/X2V/get-vcard.php?uri=http://www.2sheds.ru/blog/friends.html X2V])
* [http://www.approveddesign.co.uk Approved Design Consultancy] a une hCard sur sa [http://www.approveddesign.co.uk/about/contact/ page contact] tout comme sur sa [http://www.approveddesign.co.uk/about/people/ section "people"] - (par [http://creation.uk.com Creation"])
* [http://weblog.200ok.com.au/ Ben Buchanan] et [http://www.griffith.edu.au/cgi-bin/phone_search.pl?string=colin+morris&format=search Colin Morris] ont [http://weblog.200ok.com.au/2006/01/griffith-phonebook-adds-hcard-and.html implémenté les hCards et vCards] pour [http://www.griffith.edu.au/find/content_phonebook.html l'annuaire téléphonique en ligne] de l'[http://www.griffith.edu.au Université Griffith]. par ex. [http://www.griffith.edu.au/cgi-bin/phone_search.pl?string=ben+buchanan&format=search la vCard de Ben] et [http://www.griffith.edu.au/cgi-bin/phone_search.pl?string=colin+morris&format=search la vCard de Colin]
* WWF-Australia [http://wwf.org.au/about/contactdetails/ page "contact details"]
* [http://rasterweb.net/raster/ Pete Prodoehl] a utilisé le format hCard sur sa page [http://rasterweb.net/raster/contact.html Contact]
* [http://alexander-mette.de amette] utilise le format hCard dans un module de son blog motorisé par TikiWiki
* [http://staff.washington.edu/oren/weblog2/ Oren Sreebny] a une hCard sur son gabarit principal
* [http://www.cs.brandeis.edu/~zippy/ Patrick Tufts] a une hCard sur sa page personnelle.
* [http://ascii20.blogspot.com/ Mathias Kolehmainen et Jamie Taylor] ont des hCards sur leur weblog.
* [http://www.hoppsan.org/jamesb/blogger/ Barnaby James] a une hCard sur son weblog.
* [http://esa-education.com/schools/map ESA Education] utilise les hCards pour ses 100+ écoles et chacun des sites individuels des écoles.
* [http://www.thereisnocat.com/#vcard Ralph Brandi] a ajouté une hCard à la barre latérale de son weblog suite à la présentation des Microformats de Tantek Çelik lors de SXSW 2006.
* [http://www.yellowpencil.com/contact/ Yellow Pencil] utilise les microformats pour présenter l'information de contact de la société.
* [http://www.pierce.ctc.edu/ephone/ Pierce College] -- le répertoire de la communauté du collège utilise hCard sur toutes les entrées individuelles des carnets d'adresses.
* [http://www.ukoln.ac.uk/web-focus/events/workshops/webmaster-2006/ the Institutional Web Management Workshop 2006] a balisé tous ses [http://www.ukoln.ac.uk/web-focus/events/workshops/webmaster-2006/committee/ présentateurs avec hCard].
* http://wikitravel.org/en/Singapore/Sentosa. Wikitravel est en train d'expérimenter hcard sur ses guides de voyage. Ce guide utilise hcard pour tous ses listings d'affaires. Plus d'informations sur http://wikitravel.org/en/Wikitravel_talk:Listings.
* [http://www.musik-erber.de/ Musik-Erber] utilise hcard pour présenter l'information de contact dans sa barre latérale.
* [http://cdevroe.com/about/#contact Colin D. Devroe] utilise hCard pour afficher son information de contact sur sa page "about".
* L'ECS (Scool of Electronics and Computer Science à l'Université de Southampton), les [http://www.ecs.soton.ac.uk/people People Pages] utilisent vCard. Contactez cjg@ecs.soton.ac.uk s'il y a quelque bug.
* [http://www.southwestern.edu/~ramseyp Pat Ramsey] a son information de contact sur son blog balisée avec hCard. Contacter [mailto:ramsey.pat@gmail.com ramsey.pat@gmail.com] s'il y a quelque bug.
* [http://www.vyre.com/company/contact-us/ VYRE] est une société de développement de CMS avec une hCard "contact us"
* [http://www.lefdal.cc/info.php Alf Kåre Lefdal] utilise hCard dans le balisage de son information de contact.
* [http://www.pignwhistle.com.au/ Pig N Whistle, une chaîne de pubs dans Brisbane, Australie] utilise hCard pour baliser toutes les pages contacts pour ses établissements et son siège social.
* [http://kollitsch.de/ Patrick Kollitsch] a construit son Profil personnel sous hCard.
* [http://www.hbs.edu/faculty/dspar/ Harvard Business School] a des hCards sur ses pages 'faculty'
* [http://openmikes.org/ openmikes.org] utilise des hCards pour les adresses des lieux dans les pages listes détaillées.
* [http://www.intertecnollc.com/ InterTecno, LCC] publie une hCard sur la page d'accueil et la page contact.
* [http://canaltcm.com/ver/sobre-tcm Le site web de Turner Classic Movies TCM espagnol] a publié les détails de contacts sous une hCard
* [http://rejuvenation.com/ Rejuvenation] utilise maintenant hCard pour son information de contact.
* [http://www.mattash.com/contact/ Matthew Ash] utilise hCard dans sa section contacts.
* [http://yarmouthguide.com/business.php Yarmouth Guide] utilise hCard pour chaque page de détails sur le business.
* [http://www.merchantcircle.com MerchantCircle] a embarqué une hCard dans chacun de ses listings professionnels de plus de 15 millions d'adresses.
* [http://blog.roub.net/ Paul Roub] a une hcard pour lui-même sur la page d'accueil de son blog.
* [http://citizenspace.us/citizens Citizen Space Citizens] est une liste des locataires pour un espace de coworking à San Francisco. La problématique a été soulevée que les ''nicknames'' sont généralement situés au milieu du ''fn'', qui n'est pas valide comme selon la règle [[hcard-brainstorming-fr#FN_implicite_.C3.A0_partir_de_N|FN implicite à partir de N]. Il semble qu'il sevrait être possible néanmoins d'inclure un "nickname" au milieu d'un FN ou même entre un ''given-name'' et un ''family-name''.
* [http://www.fixya.com/repair/cars/us/ca/san_francisco FixYa] (the troubleshooting site) has an hCard (vCard) in the repair directory displaying information about all kinds service providers.
* [http://www.alive77.cn/ z.Yleo77] it's my blog, from now on, supports hCard, eg: article pages..



== exemples par catégories ==
'''Vous voulez une hCard ?''' Commencez par écrire une [[hcard-fr|hCard]] en utilisant le [http://microformats.org/code/hcard/creator hCard creator] pour écrire quelque information de contact, [[validators-fr#hCard|validez]] et publiez-la, ou suivez [[hcard-authoring-fr|les trucs de rédaction hCard]] pour ajouter un marquage hCard à votre site. Regardez cette section pour des exemples similaires de types de pages qui tirent profit du marquage hCard.

Cette section organise les exemples en plusieurs catégories comme suit. Si un exemple rentre dans plus d'une catégorie, utilisez la *dernière* catégorie dans cette liste qui correspond aux exemples spécifiques de hCard dans la jungle que vous essayez de catégoriser.
# '''[[hcard-examples-in-wild-fr#Individuels|Individuels]]''' - une carte par personne, peut-être trier alphabétiquement par "nom de famille". Les personnes avec leurs propres hCards (typiquement) sur leurs propres sites.
# '''[[hcard-examples-in-wild-fr#Organisations|Organisations]]''' - une carte par organisation, alphabétiquement par "fn". Les organisations avec leurs propres hCard(s) sur leur propre site.
# '''[[hcard-examples-in-wild-fr#Institutions|Institutions]]''' - qui listent plus d'une personne, avec un compteur estimant le # de hCards, par ex. plus de 40k pour Avon. Indiquez aussi la complexité de l'information fournie, par ex. juste le nom et le numéro de tél vs détails complets. Trié alphabétiquement par "org" avec peut-être quelques individus listés dans une sous-bulle unique, délimitée par une virgule, triée par "family-name".
# '''[[hcard-supporting-user-profiles-fr|Profils en ligne]] triés alphabétiquement par société / nom de service.
# '''[[hcard-examples-in-wild-fr#Lieux_en_linge|Lieux en ligne]]''' - listings pour entreprises ou organisations, avec un comptage estimant le nombre de lieux, par ex. ~10k pour Upcoming.org. Triés alphabétiquement par nom de service/site, avec peut-être quelques lieux spécifiques listés dans une sous-bulle unique, délimités par des virgules, triés par "fn".
# '''[[hcard-examples-in-wild-fr#Listes_de_Conférenciers|Listes de conférenciers]]''' - les pages des sites événements où les conférenciers sont marqués avec hCard. Triés par date, sous-groupés par années. Les plus récents en premier. Peut-être quelques individus listés dans une sous-bulle unique de chaque événement.. Triés par date, sous-groupés par année. Les plus récents en premier. Peut-être quelques individus listés dans une sous-bulle unique de chaque événement, délimités par des virgules, triés par "family-name".
# '''[[hcard-examples-in-wild-fr#Blogs_de_groupes|Blogs de groupe]]''' - blogs avec plusieurs auteurs marqués avec hCard
# '''[[hcard-examples-in-wild-fr#Auteurs|Auteurs]]''' - les pages à propos d'autre chose, telles que des livres, des critiques, qui ont marqué leurs auteurs avec hCard
# '''[[hcard-examples-in-wild-fr#Résultats_de_recherche|Résultats de Recherche]]''' - les pages résultantes des moteurs de recherche (soit générique ou pour les personnes/organisations) qui renvoient des personnes marquées avec hCard.
# '''[[hcard-examples-in-wild-fr#Listing_Contact|Listing Contact]]''' - information de contact pour un listing comme les annonces d'emploi, petites annonces, etc.

En outre, il existe une section séparée "[[hcard-examples-in-wild-fr#Exemples_UTF8|Exemples UTF8]]" qui peut être utilisée pour déposer un autre lien vers tout exemple de hCard dans la jungle qui exerce différents caractères non-ASCII7 / non-anglais pour différentes valeurs de propriétés.

Au fur et à mesure que chaque section en elle-même deviendra trop grande (nous pourrions être encore là, une fois que nous aurons trié les "Exemples critiqués" ci-dessus), elle sera probablement migrée sur une page séparée, laissant son titre ici en place et remplaçant ses contenus ici avec un lien vers la page séparée et peut-être un résumé statistique.

=== Individus ===
Groupés alphabétiquement par "family-name".

Joliment stylisées :
* la page d'accueil de [http://www.jaredhanson.net/ Jared Hanson] a une hCard magnifique avec de nombreux moyens de le contacter, et une mise à jour en temps réel de son statut en ligne sur différents réseaux de messagerie (utilise javascript).
* l'information de contact de [http://rogieking.com/#contact Rogie King] est marquée avec hCard et très joliment stylisée.
* la page d'accueil de [http://timvandamme.com/ Tim Van Damme] est une très belle hCard.
** a besoin de quelques réparations mineures : http://tr.im/hctvd (lien vers les résultats du validateur de hCard)

Pages web simples :
* hCard UID d'[http://abernier.name Antoine Bernier] :
** Lien de téléchargement Dynamique VCF (à travers le [http://suda.co.uk/projects/microformats/hcard/get-contact.php?uri= hcard parseur])
** QRcode dynamique (à travers [http://microform.at/hcard2qrcode/ hcard2qrcode])
** Avtar dynamique (à travers [http://www.gravatar.com/ Gravatar])
** Prêt pour [http://wiki2008.openid.net/Delegation openID]
** [http://hcard.geekhood.net/?url=http%3A%2F%2Fabernier.name valide]
* La page d'accueil de [http://dbaron.org/ David Baron] est marquée avec hCard.
* La page d'accueil de [http://tantek.com/ Tantek Çelik] inclut une hCard d'auteur dans la ligne en bas de la page.
* [http://christophertcressman.com/ Christopher T. Cressman] place ses détails de contact sur [http://christophertcressman.com/ Who is Chris Cressman?] et elle est marquée avec hCard.
* [http://factoryjoe.com/hcard.html Chris Messina] a une page dédiée avec ses détails de contact.
* [http://blog.roub.net/ Paul Roub] a une hCard pour lui-même sur la page de son blog.
* Patrick Trettenbrein est l'opérateur de [http://skateboardspot.info/ skateboardspot.info] et utilise hCard sur sa [http://skateboardspot.info/cat/about#operator page "about"] pour son info de contact.
* [http://blogs.msdn.com/cwilso/ Chris Wilson] a une page hCard pour lui-même sur [http://blogs.msdn.com/cwilso/about.aspx sa page about].
* ...

Cachée ! La donnée invisible est fortement découragée, ces exemples ont été groupés ici dans l'espoir que les auteurs rendront un nour leurs hCards visible :
* La page d'accueil de [http://ajbrown.org/ A.J. Brown] a une hCard cachée en bas de page.

Avant. Les URLs semblent brisées.
* <nowiki>http://tomleo.com/about.html</nowiki> La page about de Tom Leo avait une hCard. (manquante en date du 2009-08-23)

=== Organisations ===
* [http://www.michrome.com Michrome Marketing Lists (UK)] utilise hCard sur toutes ses données de résultats de recherche. Par exemple, [http://michrome.com/free-leads/162-Bradford-BD9 Startup Companies in Bradford].
* [http://technorati.com Technorati] (3)
** Les pages [http://technorati.com/about/ about], [http://technorati.com/press/ press] et [http://technorati.com/about/contact.html contact] sont balisées avec hCard et ont des liens "Add to Address Book" qui utilisent le [http://feed.technorati.com/contacts/ Technorati service Fil de Contacts].
* [http://technorati.jp Technorati Japan] (1)
** [http://technorati.jp/about/contact.html la page contact] est marquée avec hCard

=== Institutions ===
* [http://conferences.oreillynet.com/contacts.csp La page Team des Conférences O'Reilly] a des hCards pour son équipe (~14) avec un lien vers "Download the below contact info in vcf format" qui utilise le [http://feeds.technorati.com/contacts/ service de fil Technorati contacts] pour convertir les hCards en vCards.
** '''sous-optimal''': L' "org" ne devrait pas être caché avec "display:none". Utilisez à la place le [[include-pattern-fr|include-pattern]] pour inclure le "org" à partir du texte quelque part sur la page (pour éviter la duplication du texte).
* La [http://technorati.com/about/staff.html page Staff de Technorati] a des hCards pour ses collaborateurs (~31)
** par ex. [http://technorati.com/about/staff.html?s=matthew_levine#matthew_levine Matthew Levine], [http://technorati.com/about/staff.html?s=ryan_king#ryan_king Ryan King], etc.
'''avec quelques problèmes :'''
* L'[http://www.ibm.com/contact/employees/ Annuaire des Employés d'IBM] renvoie des hCards dans ses résultats de recherche :
** par ex. [http://www.ibm.com/contact/employees/servlets/lookup?country=us&language=en&search_country=all&lastname=Kaply&firstname=Michael recherche sur Michael Kaply],
** mais avec quelques problèmes :
*** '''invalide''' : pas de "fn" (pourrait se résoudre par would be addressed by the [[hcard-brainstorming-fr#FN_implicite_.C3.A0_partir_de_N|fn implicite à partir de n]])
*** '''sous-optimisé : ''': adr n'a pas d'enfants et de ce fait ne fournit pas quelque donnée (peut se résoudre par la [[hcard-brainstorming-fr#sous-propri.C3.A9t.C3.A9s_adr_implicites|proposition implicite des sous propriétés adr]])
* [http://www.boltonmuseums.org.uk Bolton Museum and Archive Service] utilise hCard sur sa page
**[http://www.boltonmuseums.org.uk/about/contact/ Contacts]
***'''invalide''' : Plusieurs n'ont pas de "fn"
**et sur chacune de ses pages d'attractions visiteur par ex. sur la page [http://www.boltonmuseums.org.uk/visiting/findhallthwood/ Hall i' th' Wood location page].
***'''sous-optimal''' : les propriété "email" et "tel" incluent par erreur des étiquettes "Email:" et "Telephone:" .
* [http://soap.stanford.edu/ Stanford Online Accessibility Program] has implemented hCard on every page
** '''sous-optimal''' : positionnés hors écran via CSS
* [http://www.belkin.com/pressroom/releases/uploads/10_09_06SportCommand.html Belkin Press Release] - Tous les communiqués de presse de Belkin depuis octobre 2006 utilisent hCard et vCard pour l'information de contact de la société.
** '''invalide''' : L'exemple a une hCard invalide (sur 3) du au manque de "fn".
* [http://www.alexa.com Alexa Internet] a marqué sa page [http://www.alexa.com/site/company/managers managers' page] avec hCard.
** '''sous-optimal''' : job "title" est inclus dans la propriété "fn".
* ...

=== Profils En Ligne ===
Voir [[hcard-supporting-profiles-fr]].

=== Lieux en Ligne ===
* [http://www.sydneydirectory.org/ Sydney Directory Wiki] supporte hCard et les coordonnées géographiques pour les endroits, par ex. [http://www.sydneydirectory.org/index.php/Opera_House Sydney Opera House].
* [http://www.airfix.com/stockists-and-distributors/ Airfix Stockists and Distributors], par ex. [http://www.airfix.com/stockists-and-distributors/?postcode=b1+1bb&root_rid=1&search.x=0&search.y=0&search=search]
**'''sous-optimal''' : <code>street-address</code> contient street address, locality et region (par ex. "99 Hobs Moat Rd, Solihull, W. Midlands")
**'''sous-optimal''' : <code>postal-code</code> et <code>country-name</code> incluent des virgules
**'''sous-optimal''' : <code>fn</code> est utilisé ; devrait être <code>fn org</code>

===Listes de conférenciers===
==== 2007 ====
[[to-do]] : jeter un oeil aux [[presentations-fr|présentations]] 2007 car elles contiennent probablement des liens vers des conférences qui ont marqué leurs pages de conférenciers avec hCard.
* 09: [http://2006.dconstruct.org/speakers/ d.Construct 2007 speakers]
==== 2006 ====
[[to-do]]: jeter un oeil aux [[presentations-fr|présentations]] 2006 car elles contiennent probablement des liens vers des conférences qui ont marqué leurs pages de conférenciers avec hCard.
* 09: [http://2006.dconstruct.org/speakers/ d.Construct 2006 speakers]
==== 2005 ====
[[to-do]] : jeter un oeil aux [[presentations-fr|présentations]] 2005 car elles contiennent probablement des liens vers des conférences qui ont marqué leurs pages de conférenciers avec hCard.
* 12: [http://tantek.com/microformats/2005/syndicate/speakers-list.html Syndicate - Speaker List] (version hCardée hébergée chez tantek.com)
* 10: [http://tantek.com/microformats/2005/web2/speakers.html Web 2.0 Conference 2005 -- Speakers] (version hCardée hébergée chez tantek.com)
* 09: Web Essentials 2005 - Les Présentateurs <nowiki>http://we05.com/presenters.cfm</nowiki> (semble avoir cessé de fonctionner en date du 2007-12-18, peut-être plus tôt) renvoient sur tantek.com : [http://tantek.com/microformats/2005/we05/presenters.html Web Essentials 2005 - The Presenters]. Web Essentials 2005 (we05) était la [http://tantek.com/log/2005/10.html#d06t1720 première conférence à avoir adopté hCard et hCalendar] sur son site web.

=== Blogs de Groupe ===
'''avec quelques problèmes :'''
* Le [http://www.ibm.com/shortcuts/ Podcast IBM Shortcuts] a des auteurs marqués avec des hCards qui ont quelques problèmes :
** '''cachée''' : L'élément racine hCard tout comme chaque propriété contenue à l'intérieur est rendu invisible par un attribut de style contenant "position:absolute; visibility:hidden".

=== Auteurs ===
* [http://lazylibrary.com LazyLibrary] uses author hCard's on every book page. Example: [http://lazylibrary.com/book/0751370576]
** '''suboptimal''' [http://lazylibrary.com/book/0751370576 Example] has an fn of "Dorling Kindersley, David West Reynolds" which should be split into two hCards! (site would also benefit from hReview).

=== Résultats de Recherche ===
* [http://www.bath.ac.uk/contact/ University of Bath] Person Finder results are encoded with hCards so you can easily create a vCard from any result.
** '''invalid''': attempt to use Implied-N optimization where that's not possible,
** '''suboptimal''': honorific-prefix could be explicitly marked up
*** Error appears for external users only. Won't be fixed any time soon. -- [[User:PhilWilson|PhilWilson]] 00:03, 28 Jan 2006 (GMT)

=== Listes de contacts ===
L'information de contact sur les listings, par ex. les listes d'annonces de recrutement, les items à vendre, etc.

* [http://seogadget.co.uk/search-marketing-executive-upto-30k-portsmouth/ search marketing executive] publiée par [http://seogadget.co.uk/ SEOgadget].
** '''propriété url invalide''' - manque href sur l'élément propriété url <nowiki>http://</nowiki>, de ce fait il est invalide et lie vers une URL relative inexistante.
** '''XHTML invalide''' - le validateur W3C rapporte que cette page est [http://validator.w3.org/check?uri=http://seogadget.co.uk/search-marketing-executive-upto-30k-portsmouth/ XHTML 1.0 Transitional] (109 errors en date du 2009-08-20).

===Exemples en UTF8 ===
Ces exemples contiennent tous un ou plusieurs caractères en UTF8 qui sont en dehors de la gamme ASCII7 et font des cas excellents pour les tests afin de s'assurer que vous gérez bien proprement l'UTF8 à travers votre parseur hCard et la transformation. Et tout spécialement si vous générez des vCards, ces tests aideront à vous assurer que vous générez des vCards UTF8 de façon qu'elles puissent être reconnues par les applications UTF8 supportant les vCards. Trié à peu près par ordre alphabétique (selon l'Unicode).

* [http://sphinx.net.ru/author/ Dmitry Dzhus] a embarqué sa hCard encodée UTF8 avec des caractères russes dans la page "Auteur" de son site web.
* [http://ecdlweb.com/ ECDLWeb.com] encode l'information hCard et Geo information des centres de test ECDL et ICDL en UTF-8. Le cas de test pour l'Europe Centrale (caractères [http://ecdlweb.com/en/czech-republic/sps-ceska-lipa tchèque], [http://ecdlweb.com/en/hungary/athene-idegenforgalmi-informatikai-es-uzletemberkepzo-szakkozepiskola hongrois] etc.) et [http://ecdlweb.com/en/belarus/belhard cyrillique].
* [http://tantek.com/ Tantek's Thoughts] encode Çelik comme de l'UTF8 dans la ligne.
* [http://technorati.jp/about/contact.html L'information de contact Technorati Japon] encode le japonais comme de l'UTF8 dans la ligne.
* [http://uk.wikipedia.org/wiki/%D0%93%D0%B5%D1%82%D1%8C%D0%BC%D0%B0%D0%BD_%D0%92%D0%B0%D0%B4%D0%B8%D0%BC_%D0%9F%D0%B5%D1%82%D1%80%D0%BE%D0%B2%D0%B8%D1%87 Vadym Hetman] (Wikipedia-UK (Ukrainien))

==== seulement des nickname ====
Ces exemples UTF8 n'ont que l'UTF8 pour la propriété "nickname" et sont de ce fait un peu plus faciles pour tester que les exemples précédents.
* Différents articles de la Wikipedia-EN, par ex. le "nickname" dans : [http://en.wikipedia.org/wiki/Noyabrsk Noyabrsk] (Russe), [http://en.wikipedia.org/wiki/Thessaloniki Thessaloniki] (Grec), [http://en.wikipedia.org/wiki/Kyoto Kyoto] (Japonais) et [http://en.wikipedia.org/wiki/Beijing Beijing] (Chinois)

===Exemples Non-HTML ===
* [http://dannyayers.com/misc/microformats/hcard-svg la démo hCard SVG de Danny Ayers]

== Pages Apparentées==
{{hcard-related-pages-fr}}

h-card

2018-02-02T09:32:25Z

Zegnat: Undo revision 66665 by Upseo (Talk) Spammy link, page does not contain h-card. Related blog uses old vcard class instead of modern h-card class.

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

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, clustering which properties go with which address keeps them deterministically together, instead of depending on array indices or other heuristics.

=== 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 of sites and services that publish or consume h-card:

* ... 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])
* [https://joelpurra.com/ Joel Purra] uses a hidden h-card with legacy [[hCard]] fallback markup (to satisfy [https://search.google.com/structured-data/testing-tool Google's Structured Data Testing Tool]) on the front page
* 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.me/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}}

== Implementations ==
Software implementations that publish or consume h-card, including themes, plugins, or extensions:

(This section is a stub that needs expansion! In practice, nearly every CMS on every [https://indieweb.org/ indie web] site supports publishing h-card by default.)

When adding an implementation, please provide and link to its home page and open source repo if any.
* [https://gnu.io/social/ GNUsocial] [https://git.gnu.io/gnu/gnu-social/ source code]
* [https://hubzilla.org/hubzilla/ Hubzilla] [https://github.org/redmatrix/hubzilla source code]
* [http://friendica.com/ Friendica] [https://github.org/friendica/friendica source code]
* [http://github.com/dissolve/inkblot InkBlot]
* ...
* ...

== 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 the vCard4 vocabulary, 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]]

json

2017-12-28T08:05:38Z

Zegnat: Undo revision 66648 by Eyecaresoftgel02 (Talk)

{{stub}}
<entry-title>JSON</entry-title>

<dfn>JSON</dfn> is JavaScript Object Notation (RFC 4627), a popular data format for APIs.

== current microformats support ==
[[microformats2]] has a canonical JSON representation that is produced by numerous microformats2 parsers across various languages.

== brainstorming ==
* [[jf2]] - a simplified more minimal mf2 JSON representation

== tools ==
* http://jsonlint.com/ - use JSON Lint to check any JSON examples for/in the wiki.
* https://jsonformatter-online.com/ - JSON formatter - Tool to edit, format, and validate JSON.

== previous work ==
* [[old-json-serializations]]

== see also ==
* [http://www.json.org www.json.org]: the original specification, documentation, and list of implementations for many different programming languages.
* RFC 4627, current formal JSON specification.
* [http://en.wikipedia.org/wiki/JSON JSON on Wikipedia]

rss

2017-11-22T13:38:21Z

Zegnat: I think it is safe to say we don’t want to link codebeautify without good new reason. Undo revision 66621 by Jamesmalvi (Talk)

json

2017-11-22T13:38:08Z

Zegnat: I think it is safe to say we don’t want to link codebeautify without good new reason. Undo revision 66620 by Jamesmalvi (Talk)

get-started

2017-11-22T13:33:40Z

Zegnat: Undo revision 66622 by Lavanya (Talk)

gender-examples

2017-10-29T10:58:46Z

Zegnat: /* sites and services */ Add one more link to the Twitter thing, thanks kevinmarks!

<entry-title>gender examples</entry-title>

This page documents how people currently publish [[gender]] information on the web (sometimes implicitly - so not easily machine parsable - such as names (Andrew, Andrea), titles (Mr, Mrs, Miss), relationships (husband, brother), pronouns (he, she), etc.)), and what gender terms are supported by current web user interfaces. This research will hopefully be useful to the [[genealogy]] microformat effort, as well as efforts to [[vcard-suggestions|extend vCard]], and therefore [[hcard|hCard]].

== examples ==
These examples are based on two primary sources of real world web site usage (e.g. on social network sites)

* user interfaces for editing (and displaying) [[user profile]] information
* user interfaces for doing faceted (field-based) search based on value(s) of a gender (or sex) field.

== sites and services ==

Social network sites typically publish the gender of the individual.

Sites and services that allow users to enter and publish their gender. Please add to this list.

In alphabetical order:
* [https://bagcheck.com/blog/01-the-gender-question Bagcheck] chose to ask which pronoun you want to use:
** Preferred Possessive Pronoun: ( )Her ( )His ( )Their
* [http://crush3r.com/ Crusher]'s [http://crush3r.com/account Edit My Account](requires login) page combines gender and person vs organization distinction in an interesting type picker among girl, boy, band, or other with a field.
** Type: ( ) Girl ( ) Boy ( ) Band ( ) Other: [______]
* Canada Council for the Arts (need citation to specific sign-up form URL) - [https://twitter.com/heathr/status/189492984188903424 according to Heather Gold]:
** Female, Male, Transgender, Other (please specify), No answer, Please specify [______]
** [http://twitter.com/#!/heathr/status/189492984188903424/photo/1/large http://p.twimg.com/AqE23XpCIAArFWA.png]
* [http://digg.com/ Digg]'s [http://digg.com/settings/about About Me settings page](requires login) has a Gender popup that appears to be inspired by Pownce's list:
** Guy, Girl, Dude, Lady, Fellow, Bird, Chap, grrrl, Gentleman, Damsel, Male, Female, Transgender, None of the Above
* [https://www.flirtbox.co.uk/hotornot.php?gender=f flirtbox]: "Women" and "girls"
* [http://www.eharmony.co.uk/ eHarmony]: "Woman" or "Man"
* [http://facebook.com facebook.com]: changed from "Male/Female" to Male/Female/Custom" on 2014-02-13
** custom must be from one of 56 choices, despite being a free-entry text box -
** (Agender, Androgyne, Androgynous, Bigender, Cis, Cisgender, Cis Female, Cis Male, Cis Man, Cis Woman, Cisgender Female, Cisgender Male, Cisgender Man, Cisgender Woman, Female to Male, FTM, Gender Fluid, Gender Nonconforming, Gender Questioning, Gender Variant, Genderqueer, Intersex, Male to Female, MTF, Neither, Neutrois, Non-binary, Other, Pangender, Trans, Trans*, Trans Female, Trans* Female, Trans Male, Trans* Male, Trans Man, Trans* Man, Trans Person, Trans* Person, Trans Woman, Trans* Woman, Transfeminine, Transgender, Transgender Female, Transgender Male, Transgender Man, Transgender Person, Transgender Woman, Transmasculine, Transsexual, Transsexual Female, Transsexual Male, Transsexual Man, Transsexual Person, Transsexual Woman, Two-Spirit)
** list from [http://www.slate.com/blogs/future_tense/2014/02/13/facebook_custom_gender_options_here_are_all_56_custom_options.html Will Oremus at Slate]
* [http://www.gay.com/ gay.com]: "Male", "Female", "MTF" and "FTM".
* http://www.adam4adam.com/: "Male", "Female"
* [https://plus.google.com Google+]:
** before 2014-12-10: Male, Female, Other
** after 2014-12-10: Male, Female, Decline to State, Custom - if Custom selected, a freeform text field is enabled to put in your gender. [https://plus.google.com/app/basic/stream/z12iz5ajslvxe3mup23nud451xfqcfj4l04 Post by Rachael Bennett]
* [http://www.livejournal.com/ LiveJournal]'s [http://www.livejournal.com/manage/profile/ Edit Profile](requires login) page provides a popup menu for gender with the values in order:
** (Unspecified), Male, Female
* [http://ma.gnolia.com Ma.gnolia]'s [http://ma.gnolia.com/account/profile Edit Your Profile on Ma.gnolia](requires login) page provides a popup menu for gender with the values in order:
** Female, Male, Other
* MediaWiki.org
** Radio button choice on Preferences: "(I prefer not to say)", "She edits wiki pages", "He edits wiki pages"
** [https://phabricator.wikimedia.org/T61643 Phabricator thread on non-binary gender preferences]
*[http://metatalk.metafilter.com/20050/Gender-Go-nuts-Somebody-did#838160 Cortex histogrammed] [http://metafilter.com metafilter's] 10-year-old free-form gender field- [http://stuff.metafilter.com/genders/genderfield.txt data dump]
** The first entry is blank/null fields; the difference between that and "total records" is the number of people who have put anything at all in the field: 9,325 mefites have as of a few minutes ago put something in that field. Reckoning from the previous note, that means that something like 17-18% of users have actually elected to put something in that field at some point in their membership here.
** Of the folks who have something in that field, just over 60% use one of the top four options: "male", "female", "m", or "f".
** Of the top dozen or so unambiguous labels provided, male-identifying terms (male, m, dude, xy, boy, guy, man, mail) account for about 49% of total labels used; female-identifying terms (female, f, lady, girl, xx, femme, chick) account for about 18%.
*[http://myspace.com/ MySpace.com] used to only allow male or female. There was a protest on MySpace by some genderqueer users who would put the word "genderqueer" into irrelevant metadata fields as a form of symbolic protest (source: tommorris' memory, [http://www.reddit.com/r/genderqueer/comments/1xtkq5/facebook_recognizes_nonbinary_genders_now/cfestqf reddit comment from tommorris])
*[http://www.okcupid.com/ OKCupid] - "I'm male" and "I'm female"
** This has led to a change.org petition: [https://www.change.org/petitions/ensure-that-all-okcupid-users-are-able-to-comfortably-identify-their-gender-and-sexual-orientation Ensure that all OkCupid users are able to comfortably identify their gender and sexual orientation!]
** In 2014-11, OKCupid modified the gender and sexuality options. You can now select up to five from each of the following lists
*** Gender: Woman, Man, Agender, Androgynous, Bigender, Cis Man, Cis Woman, Genderfluid, Genderqueer, Gender Nonconforming, Hijra, Intersex, Non-binary, Other, Pangender, Transfeminine, Transgender, Transmasculine, Transsexual, Trans Man, Trans Woman, Two Spirit
*** Sexuality: Straight, Gay, Bisexual, Asexual, Demisexual, Heteroflexible, Homoflexible, Lesbian, Pansexual, Queer, Questioning, Sapiosexual
*** Source: [http://www.pinknews.co.uk/2014/11/16/okcupid-begins-rolling-out-new-sexuality-and-gender-options/ pinknews.co.uk]
*[http://openid.net/specs/openid-attribute-exchange-1_0.html OpenID's Attribute Exchange] includes gender
* [http://pof.com/ POF]: "Male" or "Female"
* [http://pownce.com/ Pownce]'s [http://pownce.com/settings/ Profile Settings](requires login) interface has a Gender popup with the following values in order:
** Guy, Girl, Dude, Chicky-poo, Bloke, Bird, Lady, Gentleman, Male, Female, Transgender, None of the Above
* [http://blog.xkcd.com/2010/05/06/sex-and-gender/ XKCD] used 'do you have a Y chromosome?' as they were studying colour blindness

Sites and services that internally assign users a gender, e.g. for ad targetting. Please add to this list.

* [https://twitter.com/ Twitter] has been doing this [https://blog.twitter.com/marketing/en_us/a/2012/gender-targeting-for-promoted-products-now-available.html at least since 2012]. Although it claims to be 90% accurate, anecdotally many women in tech have been misgendered creating [https://readwrite.com/2014/09/03/twitter-analytics-demographics-gender-algorithm-male-female-followers/ a big skew towards male] in follower statistics. In 2017 the assigned genders [https://www.teenvogue.com/story/people-react-twitter-guessing-gender became visible to users].

== government/healthcare ==

* NHS Family doctor services registration form ([http://www.nhs.uk/servicedirectories/documents/gms1.pdf GMS1]): male, female
** Individual medical practices may supplement this form with their own registration form. Some allow for non-binary options for trans and intersex individuals...
** [http://www.belgravia-surgery-sw1.nhs.uk/website/E87005/files/Under_16s_New_Patient_Questionnaire_-The_Belgravia_Surgery.pdf Belgravia Surgery] (PDF) SW1: Male or Female
** [http://www.chelwest.nhs.uk/services/hiv-sexual-health/clinics/56-dean-street Dean Street sexual health clinic]: as part of their computerised registration process, they ask whether you are transgender. If you answer 'no', they then ask whether you are male or female. This is used to determine which medical tests are conducted.
** [http://www.marvenmedicalpractice.co.uk/ Marven Medical Practice], SW1V: "male", "female", "indeterminate"
** [http://www.northamsurgery.nhs.uk/website/L83050/files/NORTHAM_SURGERY_New_Born_Registration_Form.pdf Northam Surgery] (PDF): Male or Female
** [http://www.sexualhealthoxfordshire.nhs.uk/wp-content/uploads/2014/03/registration.pdf Sexual Health Oxfordshire] (PDF): Male or Female
** [http://www.gowerplacepractice.nhs.uk/website/F83043/files/UCL-Students-Health-Registration-Form-Protected.pdf UCL Students Health Registration Form] (PDF): Male or Female
** [http://www.yorksurgeryilford.nhs.uk/website/F86657/files/New_Patient_Registration_Form_2013.pdf York Surgery, Ilford] (PDF): Male or Female

== travel ==

* Eurotunnel.com Advance Passenger Information - if you book a journey on Eurotunnel, you have to provide Advance Passenger Information before travel. This includes name, passport number and gender. Options: Male, Female, Unknown

== discussion elsewhere ==
* [http://www.myspace.com/queering_gender Because gender isn't binary]
* [http://community.livejournal.com/feminist/2925885.html Social networking sites & gender identity]
* [https://meta.wikimedia.org/wiki/Survey_best_practices Survey best practices] on meta.wikimedia.org
* [http://www.glaad.org/transgender/trans101 Transgender 101], GLAAD
* [https://tranarchism.wordpress.com/2010/11/26/not-your-moms-trans-101/ Not Your Mom's Trans 101], Asher at Tranarchism
* [https://blog.wikimedia.org/2015/03/09/gender-as-a-text-field/ Gender as a text field: What Wikipedia can learn from Facebook], Amanda Menking, Wikimedia Blog, 2015-03-09
* [http://43epnd.axshare.com/gender.html #genderUX – Some guiding principles for handling gender on forms]

== see also ==
* [[gender]]
* [[gender-formats]]
* [[gender-brainstorming]]
* [[profile-examples]]

== related ==
* [[genealogy]]
* [[hcard|hCard]]
* [[vcard-suggestions]]