HTML5 and Microformat – How to Make the Most of them

September 13th, 2023

Coding has been treated as a creative domain but thanks to the introduction of Microformat, this story is certainly going to change. Days of sluggish codes with HTML elements scattered all around are numbered as more and more websites are embracing this new format of HTML coding where all the HTML entities and their properties are defined properly. In short, Microformat codes are using the class attributes in HTML tags to make it easier for search engine bots to gather vital information about those elements and thereby making the website more search engine friendly.

For example, previously the SERP [search engine result page] were quite uninteresting with only 10 blue links dominating the page. But thanks to the induction of microformat code, things have changed a lot and they have changed for good. Now we have completely different snippets for review sites, recopies, music albums etc and all these are happening because of incorporating of microformat into HTML codes. This allows web developers a subtle way to highlight their website even in the search engine results. So, if you are interested and want to get the most of this hot and happening trend, keep reading – Before we delve deep into microformat, let’s find out its benefits and drawbacks:

Benefits

  • By using them, you will be one step ahead of making your site more SEO friendly.
  • Microformat will enable your website to get found out by innumerable apps and thereby increasing interactivity of your website.
  • An increasing number of social networking sites are embracing Microformat in an effort to make it easier for third party web services to interact with their platforms.

Downsides

  • The most nagging part of Microformat code is that developers have to write additional codes.
  • Developers have got another thing to learn and master it within a very short period of time.
  • Not all browsers are powerful enough to offer support of these microformat codes.

So, we have got enough knowledge of what Microformats are and how they are going to change our lives. Some of the leading Designing companies are now using HTML5. For example, HTML template section of MotoCMS shows the sheer strength and power of websites powered by this revolutionary language. Now, let us find how to use this microformat code in real life environment and make our lives a bit better –

Say, you are to use microformat code against a website that reviews book. Here is how you can do it –

Original HTML Code

<a href="category/books.php">Books</a> >
 <a href="category/books/literature.php>Literature & Fiction</a> >
 <a href="category/books/literature/classic.php">Classics</a>

<img src="Tale-of-two-cities.jpg" />
The Tale of Two Cities - Paperback
by <a href="/author/Charles-dickens.html">Charles Dickens</a>
5 stars - 200 reviews

Price: $10
In Stock

Product details
255 pages
Publisher: Penguine - May 1, 2012
Language: English
ISBN-10: 01564365

Reviews:

5 stars - <b>"An Opus Magus" </b>
By Dave. Posted on April 10, 2013
A great read and of course a fascinating one. I did not realized that I read almost half of it in just 6 hours and that too without taking a single break. A classic book that everyone should read.

So, now we are going to present this data in microformat code so that search engine can figure out what this page is all about –

HTML Code with Microformat

<body itemscope itemtype="http://schema.org/WebPage">
...
<div itemprop="breadcrumb">
<a href="category/books.php">Books</a> >
 <a href="category/books/literature.php>Literature & Fiction</a> >
 <a href="category/books/literature/classic.php">Classics</a>
</div>

<div itemscope itemtype="http://schema.org/Book">

<img itemprop="image" src="Tale-of-two-cities.jpg" />
<span itemprop="name">The Tale of Two Cities</span> -
 <link itemprop="bookFormat" href="http://schema.org/Paperback">Paperback
by <a itemprop="author" href="/author/Charles-dickens.html">Charles Dickens</a>

<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
  <span itemprop="ratingValue">5</span> stars -
  <span itemprop="reviewCount">200</span> reviews
</div>

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  Price: <span itemprop="price">$10</span>
  <meta itemprop="priceCurrency" content="USD" />
  <link itemprop="availability" href="http://schema.org/InStock">In Stock
</div>

Product details
<span itemprop="numberOfPages">255</span> pages
Publisher: <span itemprop="publisher">Penguine</span> -
 <meta itemprop="datePublished" content="2012-05-01">May 1, 2012
Language: <span itemprop="inLanguage">English</span>
ISBN-10: <span itemprop="isbn">01564365</span>

Reviews:

<div itemprop="review" itemscope itemtype="http://schema.org/Review">
  <span itemprop="reviewRating">5</span> stars -
  <b>"<span itemprop="name">A masterpiece of literature</span>" </b>
  by <span itemprop="author">John Doe</span>,
  Written on <meta itemprop="datePublished" content="2006-05-04">May 4, 2006
  <span itemprop="reviewBody">I really enjoyed this book. It captures the essential
  challenge people face as they try make sense of their lives and grow to adulthood.</span>
</div>

<div itemprop="review" itemscope itemtype="http://schema.org/Review">
  <span itemprop="reviewRating">4</span> stars -
  <b>"<span itemprop="name">An Opus Magus</span>" </b>
  by <span itemprop="author">Dave</span>,
  Written on <meta itemprop="datePublished" content="2006-06-15">April 10, 2013
  <span itemprop="reviewBody">A great read and of course a fascinating one. I did not realized that I read almost half of it in just 6 hours and that too without taking a single break. A classic book that everyone should read. </span>
</div>
</div>

So, hope that you have an idea how you are going to use microformat code in your website. So, let’s start rocking the web.

Author Bio : Chace Moneith is a passionate blogger and social media analyst. He loves designing highly creative websites and occasionally contributes to leading web magazines.
Certifications &
Partners
Certifications