h-event: Difference between revisions
|  (drop p-geo p-latitude p-longitude p-altitude as no one has ever used them directly inside an h-event nor vevent. use nested h-geo inside p-location instead.) | GRegorLove (talk | contribs)  m (s/<source>/<syntaxhighlight>/) | ||
| (39 intermediate revisions by 11 users not shown) | |||
| Line 1: | Line 1: | ||
| {{DISPLAYTITLE:h-event}} | |||
| <dfn style="font-style:normal;font-weight:bold">h-event</dfn> is a simple, open format for events on the web. h-event is often used with both event listings and individual event pages. h-event is one of several open [[microformats|microformat]] draft standards suitable for embedding data in HTML. | |||
| <dfn style="font-style:normal;font-weight:bold">h-event</dfn> is a simple, open format for  | |||
| h-event is the [[microformats2]] update to [[hCalendar]]. | h-event is the [[microformats2]] update to [[hCalendar]]. | ||
| {{cc0-owfa-license}} | ;<span id="status">Status</span> | ||
| :This is a '''Living Specification''' yet mature enough to encourage additional implementations and [https://github.com/microformats/h-event/issues feedback]. | |||
| ;<span id="participate">Participate</span> | |||
| :[https://github.com/microformats/h-event/issues Open Issues] | |||
| :[[IRC]] | |||
| :Advance the spec by contributing to a consensus in [https://github.com/microformats/h-event/issues/1 issue: adopt same change control as h-entry] | |||
| <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}} | |||
| <span style="float:right">__TOC__</span> | |||
| == Example == | == Example == | ||
| Here is a simple event example: | Here is a simple event example: | ||
| < | <syntaxhighlight lang="html"> | ||
| <div class="h-event"> | <div class="h-event"> | ||
|    <h1 class="p-name">Microformats Meetup</h1> |    <h1 class="p-name">Microformats Meetup</h1> | ||
| Line 20: | Line 30: | ||
|    <p class="p-summary">Get together and discuss all things microformats-related.</p> |    <p class="p-summary">Get together and discuss all things microformats-related.</p> | ||
| </div> | </div> | ||
| </ | </syntaxhighlight> | ||
| Parsed JSON: | |||
| <syntaxhighlight lang="json"> | |||
| { | |||
|   "items": [ | |||
|     { | |||
|       "type": [ | |||
|         "h-event" | |||
|       ], | |||
|       "properties": { | |||
|         "name": [ | |||
|           "Microformats Meetup" | |||
|         ], | |||
|         "start": [ | |||
|           "2013-06-30 12:00:00" | |||
|         ], | |||
|         "end": [ | |||
|           "2013-06-30 18:00:00" | |||
|         ], | |||
|         "location": [ | |||
|           "Some bar in SF" | |||
|         ], | |||
|         "summary": [ | |||
|           "Get together and discuss all things microformats-related." | |||
|         ] | |||
|       } | |||
|     } | |||
|   ] | |||
| } | |||
| </syntaxhighlight> | |||
| === Get started === | === Get started === | ||
| Line 37: | Line 77: | ||
| * '''<code>dt-duration</code>''' - duration of the event | * '''<code>dt-duration</code>''' - duration of the event | ||
| * '''<code>p-description</code>''' - more detailed description of the event | * '''<code>p-description</code>''' - more detailed description of the event | ||
| ** '''WARNING:''' Proposed to be replaced by '''<code>e-content</code>''' (re-used from [[h-entry]]) | |||
| ** See and follow-up: https://github.com/microformats/h-event/issues/3 | |||
| * '''<code>u-url</code>''' - permalink for the event | * '''<code>u-url</code>''' - permalink for the event | ||
| * '''<code>p-category</code>''' - event category(ies)/tag(s) | * '''<code>p-category</code>''' - event category(ies)/tag(s) | ||
| * '''<code>p-location</code>''' - where the event takes place, optionally embedded [[h-card]], [[h-adr]], or [[h-geo]]  | * '''<code>p-location</code>''' - where the event takes place, optionally embedded [[h-card]], [[h-adr]], or [[h-geo]] | ||
| All properties are optional. | |||
| Experimental  | === Experimental Properties === | ||
| These properties are currently in use in the wild but not (yet) part of the draft h-event spec: | |||
| * '''<code>p-attendee</code>''' - a person attending the event, optionally embed [[h-card]] | |||
| <div class="discussion"> | |||
| * This draft has not been updated in almost 2 years. During this period, <code>h-entry</code> <code>p-rsvp</code> has been standardised, thus making it robust and mature enough for the addition. I guess it's about time to unlabel <code>p-attendee</code> as experimental. | |||
| ** I've filed https://github.com/microformats/h-event/issues/2 to track advancing this draft as a whole. Let's do that with the existing draft before discussing p-attendee in particular. And rather than guessing, take a look at the vocabulary maturity levels in h-entry and perhaps help evaluate (in another issue) p-attendee according to those criteria. [[User:Tantek|Tantek]] 01:10, 28 February 2017 (UTC) | |||
| * I would also suggest to extend expected value to [[h-entry]], so that, while the personal info can be preserved, the attendee can also support p-rsvp property of h-entry. | |||
| ** I don't understand this. p-attendee is supposed to represent a person, e.g. an [[h-card]]. How would it having that be an [[h-entry]] make sense and work (from a publishing and consuming code perspective)? This proposed extension to p-attendee may be worth its own issue as well. [[User:Tantek|Tantek]] 01:10, 28 February 2017 (UTC) | |||
| </div> | |||
| * '''<code>p-organizer</code>''' - a person organizing an event, optionally embedded [[h-card]]. Used in Indieweb events, but not consumed. https://github.com/microformats/h-event/issues/10 | |||
| * '''<code>u-rsvp</code>''' - similar to the proposed u-comment on h-entry, this would be the proposed property to mark up displayed RSVPs on an h-event. https://github.com/microformats/h-event/issues/9 | |||
| == Status == | == Status == | ||
| '''h-event''' is a microformats.org draft specification. Public discussion on h-event takes place on [[ | '''h-event''' is a microformats.org draft specification. Public discussion on h-event takes place on the [[irc|#microformats channel on irc.freenode.net]] ([https://chat.indieweb.org/microformats view recent discussions]), and specific issues [https://github.com/microformats/h-event/issues may be filed on GitHub]. | ||
| h-event is ready to use and implemented in the wild | h-event is ready to use and implemented in the wild. For backwards compatibility you should also mark up top-level h-events as classic [[hCalendar]] events. | ||
| == Property Details == | == Property Details == | ||
| Line 57: | Line 110: | ||
| <code>p-location</code> is typically a physical address, optionally marked up with [[h-adr]], for example: | <code>p-location</code> is typically a physical address, optionally marked up with [[h-adr]], for example: | ||
| < | <syntaxhighlight lang="html"> | ||
| <p class="p-location h-adr"> | <p class="p-location h-adr"> | ||
|    <span class="p-street-address">17 Austerstræti</span> |    <span class="p-street-address">17 Austerstræti</span> | ||
| Line 63: | Line 116: | ||
|    <span class="p-country-name">Iceland</span> |    <span class="p-country-name">Iceland</span> | ||
| </p> | </p> | ||
| </ | </syntaxhighlight> | ||
| === Reserved Properties === | === Reserved Properties === | ||
| Reserved properties: | Reserved properties: | ||
| * '''<code>p-organizer</code>''' - a person (co-)organizing the event, optionally embed [[h-card]] {{main|h-card}} | * '''<code>p-organizer</code>''' - a person (co-)organizing the event, optionally embed [[h-card]] {{main|h-card}} | ||
| ** proposed as way to [https://github.com/snarfed/bridgy/issues/275 implement copying an event organizer to Eventbrite] | |||
| == Examples in the wild == | == Examples in the wild == | ||
| Line 80: | Line 134: | ||
| * [http://indiewebcamp.com IndieWebCamp] has [[microformats2]] h-event markup with embedded h-cards for the organizers and the location. | * [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://wiki.mozilla.org/Events Mozilla Events] page has [[microformats2]] h-event markup with attendees marked up with h-card. | ||
| * https://gregorlove.com/events has h-event markup, for example: https://gregorlove.com/2017/06/homebrew-website-club/ | |||
| ** has additional property from [[h-entry]]: <code>dt-published</code> | |||
| * https://oauth.net/events/ has a list of h-event marked up events relating to OAuth, both future and past | |||
| * http://68middle.st/events has events marked up in h-event | |||
| * [https://www.gov.uk/government/publications/open-standards-for-government/exchange-of-calendar-events gov.uk] mentions that iCalendar can be translated into h-event microformats in their "Exchange of calendar events" guidance. | |||
| <blockquote>You can map events to and from iCalendar from other formats, such as h-event.</blockquote> | |||
| See [[microformats2#Examples_in_the_wild|microformats2 examples in the wild]] for more | See [[microformats2#Examples_in_the_wild|microformats2 examples in the wild]] for more | ||
| == Validating == | |||
| {{h-spec-section-validating}} | |||
| == Implementations == | |||
| Software implementations that publish or consume h-event, including themes, plugins, or extensions: | |||
| When adding an implementation, please provide and link to its home page and open source repo if any. | |||
| * [https://github.com/gRegorLove/mf2-to-iCalendar mf2 to iCalendar]: Convert microformats h-event to iCalendar. Example: https://gregorlove.com/calendar/ | |||
| == Backward Compatibility == | == Backward Compatibility == | ||
| Line 91: | Line 157: | ||
| For backward compatibility, you may wish to use classic [[hCalendar]] classnames in addition to the more future-proof h-event properties, for example: | For backward compatibility, you may wish to use classic [[hCalendar]] classnames in addition to the more future-proof h-event properties, for example: | ||
| < | <syntaxhighlight lang="html"> | ||
| <div class="h-event vevent"> | <div class="h-event vevent"> | ||
|    <h1 class="p-name summary">Some great event</h1> |    <h1 class="p-name summary">Some great event</h1> | ||
| </div> | </div> | ||
| </div> | </div> | ||
| </ | </syntaxhighlight> | ||
| === Parser Compatibility === | === Parser Compatibility === | ||
| Microformats parsers {{should}} detect  | Microformats parsers {{should}} detect classic properties only if a classic root class name is found and parse them as microformats2 properties.   | ||
| If an "h-event" is found, don't look for a "vevent" on the same element. | |||
| Compat root class name: <code id="vevent">vevent</code><br/> | Compat root class name: <code id="vevent">vevent</code><br/> | ||
| Line 123: | Line 191: | ||
| == See Also == | == See Also == | ||
| * [[h-calendar-to-do]] | |||
| * [[h-event-brainstorming]] | |||
| * [[microformats2]] | * [[microformats2]] | ||
| * [[microformats2-parsing]] | * [[microformats2-parsing]] | ||
| Line 129: | Line 199: | ||
| * [[h-card]] | * [[h-card]] | ||
| * [[hCalendar]] | * [[hCalendar]] | ||
| * [[h-entry]]s can be RSVPs to events, using the p-rsvp property | |||
| [[Category:Draft Specifications]] | [[Category:Draft Specifications]] | ||
Latest revision as of 21:18, 26 July 2023
h-event is a simple, open format for events on the web. h-event is often used with both event listings and individual event pages. h-event is one of several open microformat draft standards suitable for embedding data in HTML.
h-event is the microformats2 update to hCalendar.
- Status
- This is a Living Specification yet mature enough to encourage additional implementations and feedback.
- Participate
- Open Issues
- IRC
- Advance the spec by contributing to a consensus in issue: adopt same change control as h-entry
- License
- 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 2025-10-31, the editors have made this specification available under the Open Web Foundation Agreement Version 1.0.
Example
Here is a simple event example:
<div class="h-event">
  <h1 class="p-name">Microformats Meetup</h1>
  <p>From 
    <time class="dt-start" datetime="2013-06-30 12:00">30<sup>th</sup> June 2013, 12:00</time>
    to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time>
    at <span class="p-location">Some bar in SF</span></p>
  <p class="p-summary">Get together and discuss all things microformats-related.</p>
</div>
Parsed JSON:
{
  "items": [
    {
      "type": [
        "h-event"
      ],
      "properties": {
        "name": [
          "Microformats Meetup"
        ],
        "start": [
          "2013-06-30 12:00:00"
        ],
        "end": [
          "2013-06-30 18:00:00"
        ],
        "location": [
          "Some bar in SF"
        ],
        "summary": [
          "Get together and discuss all things microformats-related."
        ]
      }
    }
  ]
}
Get started
The class h-event is a root class name that indicates the presence of an h-event.
p-name, dt-start, dt-end, p-location, p-summary, and the other h-event property class names listed below define properties of the h-event.
See microformats2-parsing to learn more about property class names.
Properties
h-event properties, inside an element with class h-event:
- p-name- event name (or title)
- p-summary- short summary of the event
- dt-start- datetime the event starts
- dt-end- datetime the event ends
- dt-duration- duration of the event
- p-description- more detailed description of the event- WARNING: Proposed to be replaced by e-content(re-used from h-entry)
- See and follow-up: https://github.com/microformats/h-event/issues/3
 
- WARNING: Proposed to be replaced by 
- u-url- permalink for the event
- p-category- event category(ies)/tag(s)
- p-location- where the event takes place, optionally embedded h-card, h-adr, or h-geo
All properties are optional.
Experimental Properties
These properties are currently in use in the wild but not (yet) part of the draft h-event spec:
- p-attendee- a person attending the event, optionally embed h-card
- This draft has not been updated in almost 2 years. During this period, h-entryp-rsvphas been standardised, thus making it robust and mature enough for the addition. I guess it's about time to unlabelp-attendeeas experimental.- I've filed https://github.com/microformats/h-event/issues/2 to track advancing this draft as a whole. Let's do that with the existing draft before discussing p-attendee in particular. And rather than guessing, take a look at the vocabulary maturity levels in h-entry and perhaps help evaluate (in another issue) p-attendee according to those criteria. Tantek 01:10, 28 February 2017 (UTC)
 
- I would also suggest to extend expected value to h-entry, so that, while the personal info can be preserved, the attendee can also support p-rsvp property of h-entry.
- I don't understand this. p-attendee is supposed to represent a person, e.g. an h-card. How would it having that be an h-entry make sense and work (from a publishing and consuming code perspective)? This proposed extension to p-attendee may be worth its own issue as well. Tantek 01:10, 28 February 2017 (UTC)
 
- p-organizer- a person organizing an event, optionally embedded h-card. Used in Indieweb events, but not consumed. https://github.com/microformats/h-event/issues/10
- u-rsvp- similar to the proposed u-comment on h-entry, this would be the proposed property to mark up displayed RSVPs on an h-event. https://github.com/microformats/h-event/issues/9
Status
h-event is a microformats.org draft specification. Public discussion on h-event takes place on the #microformats channel on irc.freenode.net (view recent discussions), and specific issues may be filed on GitHub.
h-event is ready to use and implemented in the wild. For backwards compatibility you should also mark up top-level h-events as classic hCalendar events.
Property Details
(stub, to be expanded)
p-location
p-location is typically a physical address, optionally marked up with h-adr, for example:
<p class="p-location 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>
Reserved Properties
Reserved properties:
- p-organizer- a person (co-)organizing the event, optionally embed h-cardMain article: h-card- proposed as way to implement copying an event organizer to Eventbrite
 
Examples in the wild
Real world in the wild examples:
- ... add uses of h-event you see in the wild here.
- W3Conf 2013 uses h-event for the main event, and h-card for all the speakers and notable attendees. The h-cards make particularly good use of implied name, url, and photo properties.
- Tantek Çelik uses h-event on his home page
- microformats.org at 7 years presentation with h-event
- Rise of the Indie Web hCards (from Personal Democracy Forum 2012 #pdf12 #pdf2012) has microformats2 h-event and h-card markup
- WebMaker by Mozilla has h-event and h-card on event search (e.g. search near Portland Oregon) and event pages (e.g. IndieWebCamp 2012).[1]
- IndieWebCamp has microformats2 h-event markup with embedded h-cards for the organizers and the location.
- Mozilla Events page has microformats2 h-event markup with attendees marked up with h-card.
- https://gregorlove.com/events has h-event markup, for example: https://gregorlove.com/2017/06/homebrew-website-club/
- has additional property from h-entry: dt-published
 
- has additional property from h-entry: 
- https://oauth.net/events/ has a list of h-event marked up events relating to OAuth, both future and past
- http://68middle.st/events has events marked up in h-event
- gov.uk mentions that iCalendar can be translated into h-event microformats in their "Exchange of calendar events" guidance.
You can map events to and from iCalendar from other formats, such as h-event.
See microformats2 examples in the wild for more
Validating
Test and validate microformats2 markup in general with:
- https://pin13.net/mf2/ - enter your markup directly
- https://pin13.net/ - enter a URL to a page to test where it says "Microformats Parser"
Implementations
Software implementations that publish or consume h-event, including themes, plugins, or extensions:
When adding an implementation, please provide and link to its home page and open source repo if any.
- mf2 to iCalendar: Convert microformats h-event to iCalendar. Example: https://gregorlove.com/calendar/
Backward Compatibility
Publisher Compatibility
For backward compatibility, you may wish to use classic hCalendar classnames in addition to the more future-proof h-event properties, for example:
<div class="h-event vevent">
  <h1 class="p-name summary">Some great event</h1>
</div>
</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-event" is found, don't look for a "vevent" on the same element.
Compat root class name: vevent
Properties: (parsed as p- plain text unless otherwise specified)
- summary- parse as- p-name
- dtstart- parse as- dt-start
- dtend- parse as- dt-end
- duration- parse as- dt-duration
- description
- url- parse as u-
- category
- location- including compat root- vcardin the absence of- h-card, and compat root- adrin the absence of- h-adr
- geo- parse as- p-location h-geoincluding compat root- geo
iCalendar Compatibility
hCalendar-specific implementations that perform custom display or translation to iCalendar .ics SHOULD prefer p-name over p-summary, and use p-summary value(s) as a fallback if there is no p-name.
Background
This work is based on the existing hCalendar and iCalendar specifications.
Design Principles
(stub, expand)
See Also
- h-calendar-to-do
- h-event-brainstorming
- microformats2
- microformats2-parsing
- h-adr
- h-geo
- h-card
- hCalendar
- h-entrys can be RSVPs to events, using the p-rsvp property