An Introduction to

gRegor Morrill,

What are microformats?

A simple way to mark up structural information in your HTML so software can parse it.

Core principles of microformats

  • Solve a specific, simple problem
  • Design for humans first, machines second
  • Keep it DRY
more on

How to publish microformats

Let's start with a contact information example:

PayLease 9330 Scranton Rd #450 San Diego, CA 92121

Add microformat class names

PayLease 9330 Scranton Rd #450 San Diego, CA 92121
h-card specification:

microformats2 parsers return JSON

  "items": [
      "type": [
      "properties": {
        "org": [
        "street-address": [
          "9330 Scranton Rd #450"
        "locality": [
          "San Diego"
        "region": [
        "postal-code": [
  "rels": {},
  "rel-urls": {}

Anatomy of the markup

  • Use the class attribute
  • h- prefix for root microformats
  • p- prefix for plain text properties
  • u- prefix for URL properties
  • dt- prefix for date/time properties
  • e- prefix for embedded markup properties

Another example: events

An Introduction to Microformats

@ PayLease – San Diego, CA

I'll be giving a talk about microformats at...

h-event specification:

microformats vocabularies

  • h-card
  • h-event
  • h-entry, h-feed
  • h-review
and more:


  • Subscribe to events in calendar software (mf2-to-iCalendar)
  • Cross-site commenting when used in conjunction with Webmention
  • Publish using third-party clients (Micropub)
  • Subscribe to h-feed in next-generation readers (Microsub)

Who publishes microformats?

  • You might already! Do you have a WordPress site?
  • Mastodon

Consuming microformats

  • mf2 parsers available in several languages including: PHP, Python, Ruby, Node, Haskell, and Go
  • Granary: a library to convert between ActivityStreams, microformats2, and Atom
  • XRay: a library to parse structured content, including microformats2

Live demo

What could go wrong?

We do it with class.