Table of Contents
Don’t know how about you, but I think all the technologies what HTML offers us such a possibilities when it comes to enhancing the accessibility of our pages. It’s almost like dream came true. Users don’t have to type everything if they want to add new content from the browser to their apps. Now, this content is add automatically by apps itself. How? Thanks to Microformats. Let’s take a quick look at them.
What the heck are microformats?
They are simple entities of HTML code which are used for describing types of information about the content. For example for marking up people, organizations, events, locations, blog posts, products, reviews, resumes, recipes etc. You imagine it and that particular microformat probably exists somewhere. Sites use microformats to publish a standard API that is caught and used by search engines, browsers and other sites. See what-are-microformats for more. These Microformats use our-good-old “class” attribute to assign specific names to entities and their properties. Simply put, this way you can share data and information more easily then ever before. The newest stable version is microformats2.
What are the principles of microformats
As everything, microformats have their own principles according to which they are developed and used. You should keep these principles in mind when using these entities on you web. It will help API’s to read the data on your page or site and, by that, it will also help users to use these data in right way.
– Solve a specific problem
– Start as simple as possible
– Design for humans first, machines second
– Reuse building blocks from widely adopted standards
– Modularity / embeddability
– Enable and encourage decentralized development, content, services
How to use microformats (Microformats 2)
Using these entities is quite simple and only thing required is your patience while enhancing the markup of your page. Depending on the amount of embeddable information on you page, you might need a lot of patience. First you need to do is to add a specific class attribute to html element.
For example for tagging a person’s information (like business card):
<div class="h-card"> <p><img class="u-photo" href="/me.png" alt="" /></p> <p class="p-name"> <a href="u-url" href="http://waterpigs.co.uk">Barnaby Walters</a> </p> </div>
– h-card is open standard specification (another are hCalendar, hproduct, hrecipe, hevent etc.)
– u-photo, p-name, u-url are standard properties
Thanks to microformats2, you can now even combine individual specifications as you need.
For example if you run a blog and have an article:
<article class="h-entry"> <p class="p-author h-card">Scott Willis</p> <p class="p-content">Lorem ipsum</p> … </article>
– h-entry is format for episodic content on the web like blog post
– p-author is for the name of the author
– p-content contains the content of post or article
– h-card is combined here with p-author for use with author’s name
For more examples from real life situations take a look at:
http://microformats.org/wiki/examples-in-the-wild
If you want to know more about microformats:
http://microformats.org/
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
