Microformats

Meaningful HTML

What are Microformats?

Microformats are a simple way to add more meaning to your HTML.

How do you use Microformats?

It's easy! You probably already know how. It's just classes.

Example: Contact Information

Plain HTML
<div>
    Emma Goldman<br>
    123 Main St<br>
    Some Town, CA<br>
    90210

    <a href="mailto:emma.goldman@example.com">emma.goldman@example.com</a><br>
    <a href="https://twitter.com/emmagoldman">@emmagoldman</a>
</div>
HTML + Microformats
<div class="h-card">
    <span class="p-name">Emma Goldman</span>
    <span class="p-street-address">123 Main St</span>
    <span class="p-locality">Some Town</span>, <span class="p-region">CA</span>
    <span class="p-postal-code">90210</span>

    <a class="u-email" href="mailto:emma.goldman@example.com">emma.goldman@example.com</a><br>
    <a class="u-url" rel="me" href="https://twitter.com/emmagoldman">@emmagoldman</a>
</div>

Example: Link to Person

Plain HTML
<a href="https://twitter.com/emmagoldman">@emmagoldman</a>
HTML + Microformats
<a class="h-card" href="https://twitter.com/emmagoldman">@emmagoldman</a>

Why use Microformats?

By adding Microformats to your HTML, your website becomes more understandable to various kinds of computers.

  • Search engines can make sense of your HTML which allows them to display a better version in their search results.
  • Browser extensions can enable your readers to download information to their contacts, calendar, and maps apps.
  • Feed readers can be used to subscribe to your website's feeds (blog posts, bookmarks, checkins, etc).
  • You can even use your website (with Microformats) to sign into other websites.

What else are they good for?

In addition to people and organizations, Microformats can be used for: feeds, blog posts, events, locations, reviews, recipes, resumes, and products.

Examples in the wild

Developers

Microformats are fully specced with a comprehensive test suite and are licensed as Public Domain allowing you to freely use them however you want.

Parsing Microformats

If you're a developer working on an app or service, you probably need JSON as your input format. Don't worry. There are several Microformats parsers written in multiple programming languages. A parser will take a URL or a glob of HTML, understand it, then convert it to JSON for your use.

You can test your URL here (or HTML snippet on any of the parser sites).

Parser Libraries

Production ready parsers are available for: Go, Node, PHP, Python, Ruby.

Other parsers are in-development for: Erlang, Elixir, Haskell, Java, and more.

Example: Parsing Contact Information

HTML + Microformats
<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>
HTML + Microformats
{
  "items": [{
    "type": ["h-card"],
    "properties": {
      "url": ["http://blog.lizardwrangler.com/"],
      "name": ["Mitchell Baker"],
      "org": [{
        "value": "Mozilla Foundation",
        "type": ["h-card"],
        "properties": {
          "name": ["Mozilla Foundation"],
          "url": ["http://mozilla.org/"]
        }
      }]
    }
  }],
  "rels": {},
  "rel-urls": {}
}

More information