Finally Conceptualizing Microformats

When I first started to hack around with microformats and learning Tantek tried to slow me down. He tried to get me to focus on POSH first.


Yes eleven years later Tantek had the same message of Plain Old Semantic HTML. I didn’t listen. I mean I heard but I didn’t understand. Now I get the point.

Community over Documentation

I had brought something I was working on to the microformats channel of indieweb. Martijn van der Ven and Tantek helped me understand exactly how microformats worked.

After weeks of reading wiki pages I got a handle on it after a five minute conversation (that is if you discount the tinkering and the lurking which prepared me for being open to conversation) and I hope as a community I can help improve documentation or help build step by step guides for the less technical.

What are microformats

Microformats are a bit of code you add to html that allow other stuff on the web to recognize people, events, and posts. You add microformats like you do CSS. Most microformats boil down to  h-card, which are semantic business card and an h-entry, which if you think about a newspaper is the headline, author byline, and the mast (top) of the paper. This is the information which follows around the stuff you put online. There are other types of micrformats but the h-card  is best place to start.

H-card

You need to think of an h-card like a box and there are special tools called parsers that can open up the box and pick out stuff about you. This can be an email, a photo, a phone number, even a location.

div class="h-card">
  <img class="u-photo" alt="photo of Mitchell"
       src="https://webfwd.org/content/about-experts/300.mitchellbaker/mentor_mbaker.jpg"/>
  <a class="p-name u-url"
     href="https://blog.lizardwrangler.com/" 
    >Mitchell Baker</a>
 (<a class="u-url" 
     href="https://twitter.com/MitchellBaker"
    >@MitchellBaker</a>)
  <span class="p-org">Mozilla Foundation</span>
  <p class="p-note">
    Mitchell is responsible for setting the direction and scope of the Mozilla Foundation and its activities.
  </p>
  <span class="p-category">Strategy</span>
  <span class="p-category">Leadership</span>
</div>

All of the properties, the stuff in quotes after the word class, you see assigned to the html tags are called properties. These properties are all carried in your h-card box.

When a parser opens up your h-card box it will ignore anything without the microformats properties.

Can I style my H-card

If HTML is the words on a page the CSS, or cascading style sheet is the pretty on the page. You can bedazzle your h-card.  Decorate your identity box anyway you want just don’t add any style to the microformat properties.

That’s about it. Once you master this you can move on to h-entry . This one I really messed up so I will save if for later.

In the mean time I need to just go back and focus on making sure my html is plain and on point.

2 responses on “Finally Conceptualizing Microformats”

Mentions

  • Learning Microformats During the Teenage Years: Happy Thirteenth Birthday.
  • Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *