For those unfamiliar with POSH (Plain Old Semantic HTML), it’s essential to understand that creating semantic code that reflects content contextually, rather than stylistically, is a pivotal aspect of web design. HTML, with its array of elements for conveying meaning, has been complemented by purpose-built microformats (conventions) to more accurately represent page content. This guide explores popular microformats that can enhance the semantics and interoperability of your website.Microformats offer significant benefits when given proper consideration. Although not part of the W3C HTML specification, they provide a valuable set of naming conventions (using specific attribute values) to identify key page elements, such as calendar events, license agreements, and even unique content like recipes. While not yet a W3C standard, the broad support from browsers and web services underscores their practicality.Essentially, microformats are a worthwhile investment for web developers. If you’re using a CMS like WordPress, you may already be utilizing microformats due to their built-in support for certain data types. If you’re new to microformats, you might be questioning their relevance.Microformats offer several advantages and disadvantages, but any tool that aids in making websites more comprehensible to external machines, like web spiders indexing pages, is worth the effort. They utilize conventional HTML syntax and attributes, making them compatible with XHTML and even XML pages, like RSS and Atom feeds, expanding their potential use and integration with RDFa and other metadata.Benefits of Using Microformats
Enhance the semantic value of your content.
Enable web apps to discover and interface with data on your site.
Allow social networks to implement microformats in user profiles for third-party web service interoperability.
Provide browser extensions that give users access to microformat data, such as the Michromeformats Chrome extension.
Enable web spiders, like Googlebot, to utilize microformats in site indexing.
Drawbacks of Microformats
Require additional HTML markup.
Are an additional learning and maintenance burden.
Exist for a limited number of data types.
Attract attention to your data, which could be mined.
Are not uniformly supported by web browsers.
Microformats are designed to serve specific purposes for presenting information, making them potentially valuable based on your website’s needs. While detailed information can be found in the microformats specifications, this section provides a quick reference to the available microformats.
Name
Purpose
ADR
Identifies a street address
FOAF
Describes a relationship to another website
Geo
Identifies a geographic location
hAtom
Enhances syndication-friendly content
hAudio
Describes audio or a podcast
hCalendar
Marks up event or date-based content
hCard
For business and personal contacts
hListing
Lists goods and services
hMedia
Lists media references
hNews
Uses hAtom for journalistic news
hProduct
Embeds extensive product details
hRecipe
Marks up recipes and cooking data
hResume
To showcase a CV or resume
hReview
Reviews and ratings of products and services
hSlice
Pops up internal or external subscription windows in IE8
rel
The rel attribute is a microformat for HTML elements; examples include:
Robot Exclusion Profile
Instructs web crawlers
VoteLinks
Provides options to like or dislike a link
XFN
Describes a relationship to a website
XFolk
Lists favorite links
XMDP
Adds resources to the page’s profile
XOXO
Outlines a document or list of items
rel Attribute ValuesExpanding on the table above, here are descriptions of the rel (relationship) attribute values:
License: Identifies a license agreement on a page, such as Creative Commons or GPL.
Nofollow: Instructs search engines not to attribute value to the linked resource.
Tag: Applies keywords to anchors to create tag clouds or categories.
Directory: Indicates a listing in a directory on the current website.
Enclosure: For anchors linking to downloadable files and non-web documents.
Home: Generates a permalink to the home page of a website.
Payment: For anchors pointing to purchasing or payment pages.
Microformats are recommended without providing examples of their implementation. Here, we’ll explore examples of each microformat that can be integrated into your website. A microformat is identified by data within the value of an HTML element’s class or rel attribute. The element may be part of the displayed data, but if no semantic alternative exists, a class or rel attribute can be used to define the content’s purpose.ADR<ul class=”adr”> <li class=”street-address”>123 North Street</li> <li class=”locality”>Manchester</li> <li class=”postal-code”>MX43 991</li> <li class=”country-name”>UK</li> </ul>FOAFCreate a FOAF profile by visiting FOAF-o-Matic and saving the document as foaf.rdf. Reference your FOAF profile within your HTML documents using the rel tag, and upload the related files to your website for indexing.Geo<p class=”geo”> <abbr class=”latitude” title=”37.408183″>N 37° 24.491</abbr> – <abbr class=”longitude” title=”-122.13855″>W 122° 08.313</abbr> </p>hAtom<div class=”hAtom”> <div class=”hentry”> <h3 class=”entry-title”>I Love Microformats</h3> <abbr class=”published” title=”2010-08-28T13:14:37-07:00″>Aug 28, 2010</abbr> <p class=”category”><a href=”https://www.webfx.com/category/rdf” rel=”tag”>RDF</a></p> <p><a href=”https://www.webfx.com#” title=”Post a comment”>What do you think of this post?</a></p> <div class=”entry-content”> <p>Place your content here for maximum impact!</p> </div> <dl> <dt>Tags:</dt> <dd><a href=”https://www.webfx.com/tag/standards/” rel=”tag”>standards</a></dd> <dd><a href=”https://www.webfx.com/blog/web-design/ultimate-guide-to-microformats-reference-and-examples/ /tag/microformats/” rel=”tag”>microformats</a></dd> </dl> </div> </div>hAudio<p class=”haudio”> <em class=”fn”>Bohemian Rhapsody</em> by <span class=”contributor vcard”> <em class=”fn org”>Queen</em></span> found on <em class=”album”>A Night at the Opera</em> </p>hCalendarUse the hCalendar Creator for automated microformat implementation.<p class=”vEvent”> <a class=”url” href=”http://www.yoursitehere.com/”>MySite</a> <span class=”summary”>New website launch</span>: <abbr class=”dtstart” title=”20091202″>December 2</abbr>- <abbr class=”dtend” title=”20091204″>4</abbr>, at <span class=”location”>Google College, London, UK</span> </p>hCardUse the hCard creator for automated microformat implementation.<ul id=”hCard-John-Doe” class=”vcard”> <li class=”fn”>John Doe</li> <li class=”org”>Special Stores</li> <li><a class=”email” href=”https://www.webfx.com/blog/web-design/ultimate-guide-to-microformats-reference-and-examples/mailto:”></a></li> <li class=”adr”> <ul> <li class=”street-address”>44 Semantic Drive</li>, <li class=”locality”>Markup City</li>, <li class=”region”>World Wide Web</li>, <li class=”postal-code”>BP33 9HQ</li
