| CARVIEW |
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
<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>This snippet of HTML is very common. While you as a human can recognize that is contact information, computers could use a few hints to understand it.
<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>By adding just a few HTML classes, you can turn this generic markup into much more meaningful and semantic HTML.
Example: Link to Person
<a href="https://twitter.com/emmagoldman">@emmagoldman</a>Or an even simpler example is just link.
<a class="h-card" href="https://twitter.com/emmagoldman">@emmagoldman</a>
All it needs is one h-card class on the link tag.
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
<div class="h-card">
<a class="p-name u-url" href="https://blog.lizardwrangler.com/">Mitchell Baker</a>
(<a class="p-org h-card" href="https://mozilla.org/">Mozilla Foundation</a>)
</div>
This is a simple h-card example.
{
"items": [{
"type": ["h-card"],
"properties": {
"url": ["https://blog.lizardwrangler.com/"],
"name": ["Mitchell Baker"],
"org": [{
"value": "Mozilla Foundation",
"type": ["h-card"],
"properties": {
"name": ["Mozilla Foundation"],
"url": ["https://mozilla.org/"]
}
}]
}
}],
"rels": {},
"rel-urls": {}
}It will be converted into this JSON by a parser.
More information
- For further reading, head over to the Microformats community wiki.
- If you have questions, join the #microformats chat.
- If you have your own personal website (or want to!), check out the #indieweb community wiki and join the chat.