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="http://clevelandohioweatherforecast.com//pFad.php?u=https%3A%2F%2Ftwitter.com%2Femmagoldman">@emmagoldman</a>
</div><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="http://clevelandohioweatherforecast.com//pFad.php?u=https%3A%2F%2Ftwitter.com%2Femmagoldman">@emmagoldman</a>
</div>Example: Link to Person
<a href="http://clevelandohioweatherforecast.com//pFad.php?u=https%3A%2F%2Ftwitter.com%2Femmagoldman">@emmagoldman</a><a class="h-card" href="http://clevelandohioweatherforecast.com//pFad.php?u=https%3A%2F%2Ftwitter.com%2Femmagoldman">@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
<div class="h-card">
<a class="p-name u-url" href="http://clevelandohioweatherforecast.com//pFad.php?u=http%3A%2F%2Fblog.lizardwrangler.com%2F">Mitchell Baker</a>
(<a class="p-org h-card" href="http://clevelandohioweatherforecast.com//pFad.php?u=http%3A%2F%2Fmozilla.org%2F">Mozilla Foundation</a>)
</div>{
"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
- 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.