h-entry

(Difference between revisions)

Jump to: navigation, search
(Removing all content from page)
(Restored this page to its state as of 6/9/2015)
Line 1: Line 1:
 +
<entry-title>h-entry</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-entry</dfn> is a simple, open format for episodic or datestamped content on the web. h-entry is often used with content intended to be syndicated, e.g. blog posts. h-entry is one of several open [[microformats|microformat]] draft standards suitable for embedding data in HTML/HTML5.
 +
h-entry is the [[microformats2]] update to [[hAtom]]'s "hentry". For an update to "hfeed" see [[h-feed]].
 +
 +
{{cc0-owfa-license}}
 +
 +
== Example ==
 +
Here is a simple blog post example:
 +
 +
<source lang=html4strict>
 +
<article class="h-entry">
 +
  <h1 class="p-name">Microformats are amazing</h1>
 +
  <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a>
 +
    on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time>
 +
 
 +
  <p class="p-summary">In which I extoll the virtues of using microformats.</p>
 +
 
 +
  <div class="e-content">
 +
    <p>Blah blah blah</p>
 +
  </div>
 +
</article>
 +
</source>
 +
 +
Parsed JSON:
 +
<source lang=javascript>
 +
{
 +
  "items": [
 +
    {
 +
      "type": [
 +
        "h-entry"
 +
      ],
 +
      "properties": {
 +
        "name": [
 +
          "Microformats are amazing"
 +
        ],
 +
        "author": [
 +
          {
 +
            "value": "W. Developer",
 +
            "type": [
 +
              "h-card"
 +
            ],
 +
            "properties": {
 +
              "name": [
 +
                "W. Developer"
 +
              ],
 +
              "url": [
 +
                "http://example.com"
 +
              ]
 +
            }
 +
          }
 +
        ],
 +
        "published": [
 +
          "2013-06-13 12:00:00"
 +
        ],
 +
        "summary": [
 +
          "In which I extoll the virtues of using microformats."
 +
        ],
 +
        "content": [
 +
          {
 +
            "value": "Blah blah blah",
 +
            "html": "<p>Blah blah blah</p>"
 +
          }
 +
        ]
 +
      }
 +
    }
 +
  ]
 +
}
 +
</source>
 +
 +
=== Get started ===
 +
The class '''<code>h-entry</code>''' is a ''root class name'' that indicates the presence of an h-entry.
 +
 +
'''p-name''', '''p-author''', '''dt-published''' and the other h-entry property classnames listed below define properties of the h-entry.
 +
 +
See [[microformats2-parsing]] to learn more about property classnames.
 +
 +
== Properties ==
 +
h-entry properties, inside an element with class '''h-entry'''. All properties are optional.
 +
 +
=== Core Properties ===
 +
The following ''core'' h-entry properties have broad consensus:
 +
* '''<code>p-name</code>''' - entry name/title
 +
* '''<code>p-summary</code>''' - short entry summary
 +
* '''<code>e-content</code>''' - full content of the entry
 +
* '''<code>dt-published</code>''' - when the entry was published
 +
* '''<code>dt-updated</code>''' - when the entry was updated
 +
* '''<code>p-author</code>''' - who wrote the entry, optionally embedded [[h-card]](s)
 +
* '''<code>p-category</code>''' - entry categories/tags
 +
* '''<code>u-url</code>''' - entry permalink URL
 +
* '''<code>u-uid</code>''' - unique entry ID
 +
* '''<code>p-location</code>''' - location the entry was posted from, optionally embed [[h-card]], [[h-adr]], or [[h-geo]]
 +
* '''<code>u-syndication</code>''' - URL(s) of syndicated copies of this post. The property equivalent of [[rel-syndication]] ([http://erinjo.is/2014/checked-into-rockit-colabs-23 example])
 +
* '''<code>u-in-reply-to</code>''' - the URL which the h-entry is considered reply to (i.e. doesn’t make sense without context, could show up in comment thread), optionally an embedded [[h-cite]] ([http://indiewebcamp.com/reply-context reply-context]) ([http://waterpigs.co.uk/notes/4V2DjG/ example])
 +
 +
=== Draft Properties ===
 +
The following draft properties are in use in the wild (published and consumed), and are under strong consideration, but are not yet part of the core:
 +
 +
* '''<code>p-comment</code>''' - optionally embedded (or nested?) [[h-cite]](s), each of which is a comment on/reply to the parent h-entry. See [[comment-brainstorming]] ([http://waterpigs.co.uk/notes/4V2DjG/ example])
 +
* '''<code>u-like-of</code>''' - the URL which the h-entry is considered a “like” (favorite, star) of. Optionally an embedded [[h-cite]] ([http://barryfrost.com/posts/11 example])
 +
* '''<code>u-repost-of</code>''' - the URL which the h-entry is considered a “repost” of. Optionally an embedded [[h-cite]].
 +
* '''<code>u-photo</code>''' - one or more photos that is/are considered the primary content of the entry, unless there is a <code>p-location h-card</code>, which is still considered a "checkin" (i.e. with a photo). Otherwise the presence of a u-photo means the name of the entry should be interpreted as a caption on the photo, and the summary/content should be interpreted as a description of the photo.
 +
* '''<code>p-rsvp</code>''' (enum, use &lt;data> element or [[value-class-pattern]])
 +
** "invited", "yes", "no", "maybe", "interested", e.g.:
 +
** <code><nowiki>... <data class="p-rsvp" value="yes">is going</data> to ...</nowiki></code>, or
 +
** <code><nowiki>... <data class="p-rsvp" value="maybe">might go</data> to ...</nowiki></code>
 +
** <code><nowiki>... <data class="p-rsvp" value="no">unable to go</data> to ...</nowiki></code>
 +
** <code><nowiki>... <data class="p-rsvp" value="interested">am interested/tracking/watching</data>  ...</nowiki></code>
 +
 +
=== Proposed Additions ===
 +
The following properties are proposed additions based on various use-cases, such as existing [[link-preview-brainstorming|link preview]] markup conventions, but are awaiting citations of use across multiple sites in the wild, and at least one reader / real world consuming code example:
 +
* '''<code>u-audio</code>''' - special u- parsing rules for <code>&lt;audio src> & &lt;source src></code>
 +
* '''<code>u-video</code>''' - special u- parsing rules for <code>&lt;video src> & &lt;source src></code>
 +
* '''<code>u-like</code>''' - similar to p-comment, URL to a like post of the current post, e.g. in a responses list or facepile.
 +
* '''<code>u-repost</code>''' - similar to u-like, URL to a repost of the current post, e.g. in a responses list or facepile.
 +
* '''<code>u-featured</code>''' - a representative photo or image for the entry, e.g. primary photo for an article or subject-cropped photo, suitable for use in a [[link-preview]].
 +
 +
The following interpretation is also proposed addition:
 +
* if the <code>p-location</code> is also an embedded [[h-card]], the entry is treated as a "checkin".
 +
 +
== Status ==
 +
'''h-entry''' is a microformats.org draft specification. Public discussion on h-entry takes place on [[h-entry-feedback]] and the #microformats [[irc]] channel on irc.freenode.net.
 +
 +
h-entry is ready to use and implemented in the wild, but for backwards compatibility you should also mark h-entries up as classic [[hAtom]] entries.
 +
 +
== Property Details ==
 +
This section is a stub.
 +
=== p-location ===
 +
'''<code>p-location</code>''' has been re-used from [[h-event]].
 +
 +
== FAQ ==
 +
=== p-name of a note ===
 +
<div class="discussion">
 +
* '''What is the <code>p-name</code> of a [http://indiewebcamp.com/note note]?'''
 +
** A few options, from simplest to most detailed.
 +
*** '''same as the p-content/e-content''' property.
 +
*** '''same as the <code>title</code> element''' on the note permalink post page. When publishing a note on its own permalink post page, the contents of the note are likely abbreviated for the title of the page. The same abbreviation can be used for the p-name.
 +
*** '''first sentence of the p-content/e-content''' property. It may be better for [http://indiewebcamp.com/syndication syndication] and [[link-preview]] purposes to provide just the first sentence of the note as the <code>p-name</code>. Similarly if only a portion of the content is syndicated to other sites, that portion can be marked up as the <code>p-summary</code>.
 +
</div>
 +
 +
=== venue an entry was posted from ===
 +
<div class="discussion">
 +
* '''How do you indicate a named venue where an entry was posted from? Like a restaurant or park.'''
 +
** Use an embedded [[h-card]] microformat on a <code>p-location</code> property value.
 +
</div>
 +
=== address an entry was posted from ===
 +
<div class="discussion">
 +
* '''How do you indicate the address where an entry was posted from? Like a restaurant or park.'''
 +
** If the address is just part of a named venue, see above, use an [[h-card]]
 +
** Otherwise use an embedded [[h-adr]] microformat on a <code>p-location</code> property value.
 +
</div>
 +
=== lat long an entry was posted from ===
 +
<div class="discussion">
 +
* '''How do you indicate the latitude and longitude of where an entry was posted from?'''
 +
** If the location has a name in addition to latitude and longitude, see above, use an [[h-card]]
 +
** Otherwise if there is an address in addition to latitude and longitude, see above, use an [[h-adr]]
 +
** Otherwise use an embedded [[h-geo]] microformat on a <code>p-location</code> property value.
 +
</div>
 +
=== dt-published property and HTML5 time element ===
 +
<div class="discussion">
 +
* '''Does the dt-published property need to be a time element?'''
 +
** The <code>dt-published</code> property should be a <code>&lt;time&gt;</code> element so that you can take advantage of HTML5's "datetime" property.
 +
** This lets you specify a human-readable date in the value of the attribute, and the ISO8601 machine-readable date in the "datetime" property.
 +
</div>
 +
=== what is the bare minimum list of required properties on an h-entry ===
 +
<div class="discussion">
 +
* What is the bare minimum list of required properties on an h-entry?
 +
** No properties are explicitly required, but in practice a h-entry should have the following properties at a minimum for consumers:
 +
</div>
 +
* <code>name</code> (can be implied)
 +
* <code>url</code> (can be implied)
 +
* <code>published</code>
 +
<div class="discussion">
 +
* What properties should an h-entry have in addition to the bare minimum?
 +
** Beyond the bare minimum, a typical h-entry should have the following as well:
 +
</div>
 +
* <code>content</code> (or <code>summary</code> at least) - especially for structured content. For a plain text note, the content/summary (whichever is used) should be the same as the <code>name</code>, otherwise it will be implied from the text content of the root element.
 +
* <code>name</code> - for explicitly named/titled entries. Otherwise the entry is assumed to be a "title-less" note (like a tweet).
 +
* <code>author</code> - including a nested <code>[[h-card]]</code>
 +
 +
== Examples in the wild ==
 +
Real world in the wild examples:
 +
 +
* ... add uses of h-entry you see in the wild here.
 +
* ind.ie mark up their [https://ind.ie/blog blog] listing and [https://ind.ie/blog/autumn-events-2014/ permalink] pages with h-entry
 +
* David John Mead marks up his profile, blog posts and comments with h-card, h-entry and h-cite on [http://davidjohnmead.com davidjohnmead.com]
 +
* [[User:Brian|Brian Suda]] marks up his blog posts up with h-entry and h-card on [http://optional.is/required/ optional.is]
 +
* Ashton McAllen marks up his blog posts, reposts, comments and likes with h-entry, h-card and h-cite on [http://acegiak.net/ acegiak.net]
 +
* Emma Kuo marks up her blog posts and notes with h-entry and h-card on [http://notenoughneon.com/ notenoughneon.com]
 +
* Scott Jenson marks up his blog posts with h-entry and h-card on [http://jenson.org/ jenson.org]
 +
* Emily McAllen marks up her blog posts with h-entry and h-card on [http://blackwoolholiday.com/ blackwoolholiday.com]
 +
* Ryan Barrett marks up his blog posts, notes, replies and likes with h-entry and h-card on [https://snarfed.org/ snarfed.org]
 +
* Barry Frost marks up his notes with h-entry, h-card and h-cite on [http://barryfrost.com/ barryfrost.com]
 +
* Amber Case marks up her profile, blog posts, replies and notes with h-entry and h-card on [http://caseorganic.com/ caseorganic.com]
 +
* Johannes Ernst marks up his blog posts with h-entry on [http://upon2020.com/blog/ upon2020.com]
 +
* Michiel de Jong marks up his profile and notes with h-entry and h-card on [https://michielbdejong.com/ michielbdejong.com]
 +
* Mike Taylor marks up his profile and blog posts with h-card and h-entry on [https://bear.im/bearlog/ bear.im]
 +
* Erin Jo Ritchey marks up her profile, posts and comments using h-card, h-entry and h-cite with idno on [http://erinjo.is/ erinjo.is]
 +
* Jeena Paradies marks up his profile, blog posts, notes and comments using h-card, h-entry and h-cite on [https://jeena.net/ jeena.net]
 +
* Andy Sylvester marks up his profile, blog posts and comments using h-card and h-entry on [http://andysylvester.com/2014/03/01/howto-setting-up-the-selfoss-feed-reader-with-microformats-support/ andysylvester.com] (note: as of 2014-03-13 using h-entry for comments instead of correct h-cite --[[User:Barnabywalters|bw]] 14:44, 13 March 2014 (UTC))
 +
* Chloe Weil marks up her blog posts with h-entry on [http://chloeweil.com/blog chloeweil.com]
 +
* Christophe Ducamp marks up his blog posts and profile with h-entry and h-card on [http://christopheducamp.com/ christopheducamp.com]
 +
* Glenn Jones marks up his blog posts, notes, replies, profile and comments with h-entry, h-card and h-cite on [http://glennjones.net/ glennjones.net]
 +
* Marcus Povey marks up his blog posts and profile with h-entry and h-card on [http://www.marcus-povey.co.uk/ marcus-povey.co.uk]
 +
* Matthias Pfefferle marks up his blog posts, comments and profile with h-card, h-cite and h-entry on [http://notizblog.org/ notizblog.org]
 +
* Kyle Mahan marks up his profile and notes with h-card and h-entry on [http://kylewm.com/ kylewm.com]
 +
* Okinawan-lyrics marks up his posts with h-entry and h-card ([http://www.okinawan-lyrics.com/ example])
 +
* App.net marks up profile pages and permalink pages with h-entry as of 2013-08-06 ([https://alpha.app.net/voidfiles example])
 +
* The Twitter archive browser UI uses h-entry and h-card internally, unfortunately it’s not exposed as HTML in static files anywhere
 +
* Brett Comnes marks up his posts with h-entry and h-card ([http://bret.io/2013/06/29/getting-started-with-bower/ example])
 +
* Ben Werdmuller marks up his posts with h-card and h-entry, u-in-reply-to and u-like ([http://werd.io/view/51d5097fbed7ded0633a5956 example])
 +
* Sandeep Shetty marks his posts up with h-card and h-entry, as well as draft u-in-reply-to and experimental u-like properties ([http://sandeep.io/101 example])
 +
* Laurent Eschenauer marks up his posts with h-entry ([http://eschnou.com/entry/first-autonomous-flight-of-my-nodecopter-62-24992.html example])
 +
* Tom Morris marks up his posts using h-entry ([http://tommorris.org/posts/8417 example])
 +
* Numerous newer W3C specs, e.g.
 +
** [http://www.w3.org/TR/2013/CR-css3-values-20130404/ CSS Values and Units Module Level 3 - 2013-04-04]
 +
** [http://www.w3.org/TR/2013/CR-css3-conditional-20130404/ CSS Conditional Rules Module Level 3 - 2013-04-04]
 +
** [http://www.w3.org/TR/2013/WD-css3-page-20130314/ CSS Paged Media Module Level 3 - 2013-03-14]
 +
** [http://www.w3.org/TR/2013/WD-css-counter-styles-3-20130221/ CSS Counter Styles Level 3 - 2013-02-21]
 +
* [http://wordpress.org/extend/themes/sempress SemPress] is a WordPress theme that supports h-card, h-feed/h-entry.
 +
* [http://the-pastry-box-project.net/ The Pastry Box Project] use h-card and h-entry markup on their homepage and individual thoughts pages
 +
* Aaron Parecki uses h-entry to mark up notes, e.g. [http://aaronparecki.com/2012/230/reply/1 2012/230/reply/1].
 +
* [http://tantek.com/ Tantek Çelik] uses h-entry on his home page, as well as h-entry on all post permalinks, e.g. [http://tantek.com/2012/243/t1/name-beats-title-modern-use-dubline-core-wrong-uf2 2012-243 post], with [[rel-prev]]/[[rel-next]] (if applicable) to indicate prev/next posts
 +
* [http://waterpigs.co.uk/ Barnaby Walters] uses h-entry on all notes and articles, as well as nested within notes as reply contexts [http://waterpigs.co.uk/notes/1468/ example] and comments [http://waterpigs.co.uk/notes/1482/ example].
 +
 +
=== offline ===
 +
* spreadly marks up share permalink pages with h-entry, as well as minimal h-cards and experimental p-like properties ([http://my.spread.ly/share/51d570bc09e9486562000002 example])
 +
 +
== Validating ==
 +
* '''[http://indiewebify.me/validate-h-entry/ indiewebify.me h-entry validator]''' parses [[h-entry]] markup, finds common errors and makes suggestions for things to add, with code samples
 +
* '''[http://shrewdness.waterpigs.co.uk/test/ Shrewdness h-entry/h-feed validator]''' shows how shrewdness interprets+displays h-entries, with original source and interim formats, works for single h-entries and feed pages
 +
 +
{{h-spec-section-validating}}
 +
 +
== Backward Compatibility ==
 +
=== Publisher Compatibility ===
 +
For backward compatibility, you may wish to use classic [[hAtom]] classnames in addition to the more future-proof h-entry properties, for example:
 +
 +
<source lang=html4strict>
 +
<div class="h-entry hentry">
 +
  <h1 class="p-name entry-title">My great blog post</h1>
 +
</div>
 +
</source>
 +
 +
=== 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-entry" is found, don't look for an "hentry" on the same element.
 +
 +
Compat root class name: <code id="hentry">hentry</code><br/>
 +
Properties: (parsed as '''p-''' plain text unless otherwise specified):
 +
 +
* <code>entry-title</code> - parse as '''<code>p-name</code>'''
 +
* <code>entry-summary</code> - parse as '''<code>p-summary</code>'''
 +
* <code>entry-content</code> - parse as '''<code>e-content</code>'''
 +
* <code>published</code> - parse as '''dt-'''
 +
* <code>updated</code> - parse as '''dt-'''
 +
* <code>author</code> - including compat root <code>vcard</code> in the absence of <code>h-card</code>
 +
* <code>category</code>
 +
* <code>rel=bookmark</code> - parse as '''<code>u-url</code>'''. While not a class name nor typical microformats property, rel=bookmark was the only way to indicate an hentry permalink. Thus parsers should look for rel=bookmark hyperlinks inside an hentry, and take their "href" value as a value for a '''<code>u-url</code>''' property, including handling any relative URL resolution.
 +
* <code>rel=tag</code> - parse as '''<code>p-category</code>'''. While not a class name nor typical microformats property, rel=tag was the typical way to tag an hentry. Thus parsers should look for rel=tag hyperlinks inside an hentry, and take the last path segment of their "href" value as a value for a '''<code>p-category</code>''' property.
 +
 +
Proposed:
 +
* <code>time.entry-date[datetime]</code> - in the absence of <code>published</code>, parse as '''<code>dt-published</code>'''. parse for the first <code>&lt;time&gt;</code> element with class name of <code>entry-date</code> and non-empty <code>datetime</code> attribute inside an hentry, if there is no <code>published</code> property, use that time element's <code>datetime</code> attribute value for the <code>dt-published</code> property. Evidence: default WordPress themes 2011-2014([https://wp-themes.com/twentyeleven/][https://wp-themes.com/twentytwelve/][https://wp-themes.com/twentythirteen/][https://wp-themes.com/twentyfourteen/]).
 +
* <code>rel=author</code> - in the absence of <code>author</code>, parse as '''<code>u-author</code>'''. While not a class name nor typical microformats property, rel=author was commonly used to link to an author's URL. Thus parsers should look for rel=author hyperlinks inside an hentry (or even on the same page, preceding the hentry), use the absolute version of it as a value for the '''<code>u-author</code>''' property if there is no "author" property. (citations to "hentry" examples in the wild that <em>depend</em> on rel=author needed to accepted this proposal. Note: default WordPress themes twentyeleven, twentytwelve, twentythirteen, twentyfourteen all use rel=author but only inside class="author vcard", and thus rel=author can be ignored since authorship is already picked up by existing <code>author</code> backcompat parsing.)
 +
 +
=== Compat FAQ ===
 +
==== What about rel bookmark ====
 +
Also asked as: ''Why use an h-entry u-url u-uid for permalinks when I have [[rel-bookmark|rel=bookmark]]?''
 +
 +
A: tl;dr: use <code>class="u-url u-uid"</code> instead of <code>rel=bookmark</code> for post permalinks because it's simpler (fewer attributes), and works better across contexts (permalink page, recent posts on home page, collection of posts on archive pages).
 +
 +
rel=bookmark was the old [[hAtom]] way of marking up permalinks. Since then two factors have contributed to reducing use of rel inside microformats:
 +
* rel by typically* document scoped in [[HTML5]] - thus making it inappropriate for use in microformats that are aggregated, e.g. a collection of posts on a home page or in monthly archives.
 +
* it is easier to always use class names for properties. When formats use two (or more!) attributes in HTML to specify properties, confusion results in lower data quality (of the markup and thus the stuff that is marked up). Thus per the microformats [[principle]] of [[simplicity]], in [[microformats2]] we only use class names for properties.
 +
 +
<nowiki>*</nowiki> even though rel=bookmark in particular is article-element / sectioning scoped in HTML5[http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-bookmark], it's a detail that typical authors are not going to remember, and thus it's not good to depend on it for any kind of format.
 +
 +
==== Why rename entry-title entry-summary entry-content ====
 +
The <code>entry-*</code> classnames in classic [[hAtom]] were prefixed as such due to concerns about vocabulary overlap with the title (as in job title, completely separate semantic) property in [[hCard]] and the summary property in [[hCalendar]] (see: [[hatom-faq#Could_hAtom_instead_use_title_content_and_summary|hAtom FAQ]]).
 +
 +
Following the [[simplicity]] principle, in microformats2, the aforementioned vagueness of '''title''' is dealt with by removing it. As '''name''' is now used consistently across all vocabularies as the property which “names” the microformat, it makes sense to use it to mark up the name of a post.
 +
 +
Likewise, adding entry- to '''summary''' doesn’t add any useful information, and in practice there have been no problems with blog post summaries overlapping with entry summaries, so it makes sense to simplify to '''summary'''. The same applies to '''entry-content''' simplified to '''content'''.
 +
 +
See also: [http://krijnhoetmer.nl/irc-logs/microformats/20120830#l-128 2012-08-30 IRC conversation].
 +
 +
== Related Work ==
 +
Work that re-uses or builds upon h-entry:
 +
* [https://mailpile.pagekite.me:8080/p/Open_Message_Format Mailpile Open Message Format] is using h-entry with structured properties, e.g. p-author h-card.
 +
 +
== Background ==
 +
This work is based on the existing [[hAtom]] microformat, and extensive selfdogfooding in the [http://indiewebcamp.com indie web camp] community.
 +
 +
== See Also ==
 +
* [[h-feed]]
 +
* [[microformats2]]
 +
* [[microformats2-parsing]]
 +
* [[h-geo]]
 +
* [[hCard]]
 +
 +
[[Category:Draft Specifications]]

Revision as of 16:19, 20 August 2015

Tantek Çelik (Editor)


h-entry is a simple, open format for episodic or datestamped content on the web. h-entry is often used with content intended to be syndicated, e.g. blog posts. h-entry is one of several open microformat draft standards suitable for embedding data in HTML/HTML5.

h-entry is the microformats2 update to hAtom's "hentry". For an update to "hfeed" see h-feed.

Per CC0, to the extent possible under law, the editors have waived all copyright and related or neighboring rights to this work. In addition, as of 2017-11-22, the editors have made this specification available under the Open Web Foundation Agreement Version 1.0.

Contents

Example

Here is a simple blog post example:

<article class="h-entry">
  <h1 class="p-name">Microformats are amazing</h1>
  <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a>
     on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time>
 
  <p class="p-summary">In which I extoll the virtues of using microformats.</p>
 
  <div class="e-content">
    <p>Blah blah blah</p>
  </div>
</article>

Parsed JSON:

{
  "items": [
    {
      "type": [
        "h-entry"
      ],
      "properties": {
        "name": [
          "Microformats are amazing"
        ],
        "author": [
          {
            "value": "W. Developer",
            "type": [
              "h-card"
            ],
            "properties": {
              "name": [
                "W. Developer"
              ],
              "url": [
                "http://example.com"
              ]
            }
          }
        ],
        "published": [
          "2013-06-13 12:00:00"
        ],
        "summary": [
          "In which I extoll the virtues of using microformats."
        ],
        "content": [
          {
            "value": "Blah blah blah",
            "html": "<p>Blah blah blah</p>"
          }
        ]
      }
    }
  ]
}

Get started

The class h-entry is a root class name that indicates the presence of an h-entry.

p-name, p-author, dt-published and the other h-entry property classnames listed below define properties of the h-entry.

See microformats2-parsing to learn more about property classnames.

Properties

h-entry properties, inside an element with class h-entry. All properties are optional.

Core Properties

The following core h-entry properties have broad consensus:

Draft Properties

The following draft properties are in use in the wild (published and consumed), and are under strong consideration, but are not yet part of the core:

Proposed Additions

The following properties are proposed additions based on various use-cases, such as existing link preview markup conventions, but are awaiting citations of use across multiple sites in the wild, and at least one reader / real world consuming code example:

The following interpretation is also proposed addition:

Status

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

h-entry is ready to use and implemented in the wild, but for backwards compatibility you should also mark h-entries up as classic hAtom entries.

Property Details

This section is a stub.

p-location

p-location has been re-used from h-event.

FAQ

p-name of a note

  • What is the p-name of a note?
    • A few options, from simplest to most detailed.
      • same as the p-content/e-content property.
      • same as the title element on the note permalink post page. When publishing a note on its own permalink post page, the contents of the note are likely abbreviated for the title of the page. The same abbreviation can be used for the p-name.
      • first sentence of the p-content/e-content property. It may be better for syndication and link-preview purposes to provide just the first sentence of the note as the p-name. Similarly if only a portion of the content is syndicated to other sites, that portion can be marked up as the p-summary.

venue an entry was posted from

  • How do you indicate a named venue where an entry was posted from? Like a restaurant or park.
    • Use an embedded h-card microformat on a p-location property value.

address an entry was posted from

  • How do you indicate the address where an entry was posted from? Like a restaurant or park.
    • If the address is just part of a named venue, see above, use an h-card
    • Otherwise use an embedded h-adr microformat on a p-location property value.

lat long an entry was posted from

  • How do you indicate the latitude and longitude of where an entry was posted from?
    • If the location has a name in addition to latitude and longitude, see above, use an h-card
    • Otherwise if there is an address in addition to latitude and longitude, see above, use an h-adr
    • Otherwise use an embedded h-geo microformat on a p-location property value.

dt-published property and HTML5 time element

  • Does the dt-published property need to be a time element?
    • The dt-published property should be a <time> element so that you can take advantage of HTML5's "datetime" property.
    • This lets you specify a human-readable date in the value of the attribute, and the ISO8601 machine-readable date in the "datetime" property.

what is the bare minimum list of required properties on an h-entry

  • What is the bare minimum list of required properties on an h-entry?
    • No properties are explicitly required, but in practice a h-entry should have the following properties at a minimum for consumers:
  • What properties should an h-entry have in addition to the bare minimum?
    • Beyond the bare minimum, a typical h-entry should have the following as well:

Examples in the wild

Real world in the wild examples:

offline

Validating

Main article: validators

Test and validate microformats2 markup in general with:

Backward Compatibility

Publisher Compatibility

For backward compatibility, you may wish to use classic hAtom classnames in addition to the more future-proof h-entry properties, for example:

<div class="h-entry hentry">
  <h1 class="p-name entry-title">My great blog post</h1>
</div>

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-entry" is found, don't look for an "hentry" on the same element.

Compat root class name: hentry
Properties: (parsed as p- plain text unless otherwise specified):

Proposed:

Compat FAQ

What about rel bookmark

Also asked as: Why use an h-entry u-url u-uid for permalinks when I have rel=bookmark?

A: tl;dr: use class="u-url u-uid" instead of rel=bookmark for post permalinks because it's simpler (fewer attributes), and works better across contexts (permalink page, recent posts on home page, collection of posts on archive pages).

rel=bookmark was the old hAtom way of marking up permalinks. Since then two factors have contributed to reducing use of rel inside microformats:

* even though rel=bookmark in particular is article-element / sectioning scoped in HTML5[5], it's a detail that typical authors are not going to remember, and thus it's not good to depend on it for any kind of format.

Why rename entry-title entry-summary entry-content

The entry-* classnames in classic hAtom were prefixed as such due to concerns about vocabulary overlap with the title (as in job title, completely separate semantic) property in hCard and the summary property in hCalendar (see: hAtom FAQ).

Following the simplicity principle, in microformats2, the aforementioned vagueness of title is dealt with by removing it. As name is now used consistently across all vocabularies as the property which “names” the microformat, it makes sense to use it to mark up the name of a post.

Likewise, adding entry- to summary doesn’t add any useful information, and in practice there have been no problems with blog post summaries overlapping with entry summaries, so it makes sense to simplify to summary. The same applies to entry-content simplified to content.

See also: 2012-08-30 IRC conversation.

Related Work

Work that re-uses or builds upon h-entry:

Background

This work is based on the existing hAtom microformat, and extensive selfdogfooding in the indie web camp community.

See Also

Categories

h-entry was last modified: Wednesday, December 31st, 1969

Views