View source for microformats2-implied-properties

{{DISPLAYTITLE:microformats2 implied properties}}
== summary ==
As part of the further simplifications in [[microformats-2]], the following generic properties are automatically implied by microformats with only a root class name with certain common semantic markup patterns.

* '''<code>p-name</code>''' on elements in general
* '''<code>u-url</code>''' on hyperlinks (<code>&lt;a href></code>) elements
* '''<code>u-photo</code>''' on images (<code>&lt;img src></code>) elements
and combinations thereof.

== root class only and name property ==
Web pages with microformats nearly always markup proper nouns, which have a primary label of some sort, commonly known as a ''name''.

Thus if a microformat only has a root class name and no properties, then the entire text contents of the element is parsed as the '''<code>p-name</code>''' property of the microformat.

Markup example:

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

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

to-do: 
* try examples with organizations, events, products (however note that those are almost always capitalized thus implying proper noun / name semantics)

use-cases: 
* every single proper noun on any web page.

related FAQ:
* [[microformats2-faq#how_do_h-adr_and_h-geo_work_with_an_implied_name_property|how do instances of h-adr and h-geo work with implied names]]? short answer: (implied) names are useful for labeling them when in lists.

=== aside name vs fn ===
In short, why use 'name' instead of the well established 'fn' from existing microformats? (per [[naming-principle]] etc.)
Per feedback:
* from microformats mailing-lists over the years
** numerous individuals preferring 'name'
** asking why 'fn' repeatedly despite FAQ
* Google Rich Snippets renaming 'fn' as 'name' in RDFa and microdata variants of vocabularies
* ...
Choosing to use 'name' as the generic term moving forward instead of 'fn' - the benefits outweigh costs.

== hyperlink and url property ==
A significant proportion of proper noun references on web pages are a hyperlink to a page about that proper noun, AKA a ''URL'' for a proper noun. 

Thus if a microformat is on a hyperlink element with only a root class name and no properties, then in addition to implying the name from its text contents, the <code>href</code> of the element is parsed as the '''<code>u-url</code>''' property of the microformat.

Markup example:

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

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

to-do: 
* try examples with organizations, events, products

use-cases:
* nearly every link to a person ever like on blog posts, blog rolls etc. all the same data/use-cases that informed [[XFN]].

== image and name photo properties ==
Many proper noun references on web pages are simply an embedded image of that proper noun, typically a representative ''photo'' of the proper noun, often with its ''name'' as alt text.

Thus if a microformat is on an image element (<code>&lt;img src></code>) with only a root class name and no properties, then the <code>src</code> of the element is parsed as the '''<code>u-photo</code>''' property of the microformat, and if present, the <code>alt</code> of the element is parsed as the '''<code>p-name</code>''' property of the microformat.

Markup example:
<source lang=html4strict>
<img class="h-card" src="http://example.org/pic.jpg" alt="Chris Messina" />
</source>

Parsed JSON:
<source lang=javascript>
{ 
  "type": ["h-card"],
  "properties": {
    "name": ["Chris Messina"],
    "photo": ["http://example.org/pic.jpg"]
  }
}
</source>

An object element with a data attribute works the same way as the img element with its src attribute.

to-do: 
* try examples with organizations, events, products

use-cases:
* nearly every social networking site that shows a grid of people without text already does so with img tags and their names in the alt attribute. Most of those are linked too, which brings us to the next markup structure which implies properties:

== hyperlinked image and name photo url properties ==
Often proper noun references on web pages are a representative image of the proper noun that is hyperlinked to a page about that proper noun.

Thus if a microformat is on a hyperlink element with only a root class name and no properties, and that element has a single child element and that element is an image, then in addition to implying the the URL from its <code>href</code>, the <code>src</code> of the child image element is parsed as the '''<code>u-photo</code>''' property of the microformat, and if present, its <code>alt</code> attribute is parsed as the '''<code>p-name</code> property of the microformat.

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

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

An object element with a data attribute works the same way as the img element with its src attribute. E.g. '''<code>&lt;a class="h-card" href>&lt;object type="image/..." data="..."></code>''' in addition to implying '''<code>u-url</code>''' from the <code>href</code>, implies '''<code>u-photo</code>''' from the object element's <code>data</code>, as well as '''<code>p-name</code>''' from the text contents of the object as with elements in general.

use-cases:
* nearly every social networking site that shows a grid of people without text already does so with hyperlinked img tags and their names in the alt attribute.

== root class with one child hyperlink ==
* '''<code>&lt;span class="h-card"&gt;&lt;a href="http://example.com"&gt;Ace Brown&lt;/a&gt;&lt;/span&gt;</code>''' - '''treat single hyperlink child as existing single hyperlink case.''' I.e. imply '''<code>u-url</code>''' from its href. This markup is generated in MediaWiki installs (e.g. Wikipedia) when you surround a MediaWiki link like <nowiki>[URL label] or [[Wiki page name]]</nowiki> with a <code>&lt;span&gt;</code> with a microformats root class name. Real world examples: 
** http://www.w3.org/wiki/TPAC2011-Committee
* '''<code>&lt;span class="h-card"&gt;&lt;a href="http://example.com"&gt;&lt;img src alt="Ace Brown"/>&lt;/a&gt;&lt;/span&gt;</code>''' ...similarly with single hyperlink child itself with single img child etc.

== root class with one child element and text ==
* '''<code>&lt;a class="h-card" href>&lt;img alt="" src/> Ace Brown&lt;/a></code>''' - a variant of the hyperlink with image pattern, this is an example where the alt text is provided as actual visible text rather than an alternative, and therefore an explicitly empty alt="" is provided to avoid duplicate/redundant information in non-visual renderings (e.g. speech). Imply '''<code>u-url</code>''' from href, '''<code>u-photo</code>''' from src, and '''<code>p-name</code>''' from the text content of the root element, with leading/trailing white-space removed. Real world examples: 
** real world example: http://test.waterpigs.co.uk/activity/ - the element with class name "microcard"
** minimal markup-only example for discussion: http://krijnhoetmer.nl/irc-logs/microformats/20120901#l-147 from aaronpk
** minimal markup example with real values: http://krijnhoetmer.nl/irc-logs/microformats/20120901#l-150 from aaronpk
*** similar: https://gist.github.com/3585643 - has an explicit span around the text after the image, but is otherwise similar. If there is an actual use case for having the second child span around the visible text, then we should consider expanding to allow implied properties for that too (general pattern of image and then something else which has the name, e.g. span/b etc.).

== parsing ==
See: http://microformats.org/wiki/microformats2-parsing#parsing_for_implied_properties

== to do ==
to-do:
* try examples with organizations, events, products

== additional markup patterns to consider ==
Document more use-cases from actual publishing examples in the wild of simple items, e.g. from Wikipedia.

And some per the principle of least surprise - fleshing out some of the patterns to consider additional different combinations of elements, but in the same basic pattern(s).

=== root class on one element ===
Let's consider root class only on:
* '''<code>&lt;abbr class="h-card" title&gt;</code>''' - imply '''<code>p-name</code>''' from <code>title</code>. Example(s)/use-case(s):
** <code>(&lt;abbr class="h-card" title="Richard Posner"&gt;Posner&lt;/abbr&gt; 2010)</code>
*** from [[citation-formats#TCMOS_permalink|citation format styles TCMOS permalink]] (note abbreviated parenthetical style at end of that subsection). Longer form including surrounding [[citation-brainstorming#web_citations|h-cite]] markup:
<source lang=html4strict>
<cite class="p-author h-cite">
 (<abbr class="h-card" title="Richard Posner">Posner</abbr> 
  <time class="dt-published">2010</time>)
</cite>
</source>
Note the problem of lacking an explicit "name" for the work being cited. Perhaps such an abbreviated citation reference could hyperlink to a full citation, and either:
<div class="discussion">
* incorporate the name of the work being cited by reference from that full citation, or
* perhaps create a new, smaller microformat as a subset of h-cite like abbreviated cite, or a cite reference. Try to pick a name according to what TCMOS calls those parenthetical references.
</div>

* '''<code>&lt;object class="h-card" type="image/..." data="..."></code>''' - imply '''<code>u-photo</code>''' from <code>data</code> and '''<code>p-name</code>''' from text contents as with elements in general.
* ...
==== rejected root only markup patterns ====
Is there anything that should be implied semantically from root class only on:
* <code>&lt;audio src></code> - no, because there is no common practice of simple audio element usage for proper nouns, it's nearly always nested in a broader context.
* <code>&lt;time datetime></code> - no, because there are no microformats that are just a datetime
* <code>&lt;video src></code> - no, because there is no common practice of simple video element usage, it's nearly always nested in a broader context.

Use-case counter-examples welcome.

=== root element and one child ===
* '''<code>&lt;a class="h-card" href>&lt;abbr title&gt;</code>''' - imply '''<code>u-url</code>''' from <code>href</code> and imply '''<code>p-name</code>''' from the abbr element's <code>title</code>. Similar to the abbr root element case above (if that's allowed, we should strongly consider allowing this too).

== see also ==
* [[microformats2]]
* [[microformats2-brainstorming]]
* [[microformats2-experimental-properties]]
* [[microformats2-prefixes]]
* [[microformats2-implied-properties]]
* [[microformats2-parsing]]
* [[microformats2-faq]]