Microformats: The Fine Art of Markup

As you might imagine, I wrote this article several weeks ago at the time that heated conversations about Blueprint and (so called) CSS frameworks were taking place. In this article I give my own opinions on Blueprint but I'm not intending to stir up more controversy (not this week) or go over ground that has already been covered. So, reproduced here for readers of my site, I give you:

Microformats: The Fine Art of Markup

In this series of articles, Microformats: The Fine Art of Markup, I will be asking you to think differently about the ways that you approach authoring HTML and XHTML mark-up and to think about the mark-up that you write less as a tool for a job and more as a means of creative expression. During the series, I will be working extensively with microformats, those modern building blocks that can help to make your authoring of mark-up into a fine art.

This series will not cover in detail the more technical aspects of microformats, nor how to make the many exciting opportunities for advanced functionality that microformats offer possible. For this grounding in microformats, I recommend that you read Molly Holzschlag's Microformats: Tomorrow's Web Today series and Brian Suda's Microformats: More Meaning from Your Markup; both are published online.

If your preference is to curl up with a good book, John Allsop has written what is to date the definitive guide: Microformats: Empowering Your Markup for Web 2.0 published by Friends Of Ed. Of course, you can also go straight to the horse's mouth and keep up to date with all the latest developments at the microformats web site and wiki.

I will be demonstrating ways in which you can enhance the meaning of your content by using microformats in a range of situations. This will help you to change the way that you approach authoring mark-up for the better. In each article, you will also learn how to transform the most minimal, accessible, and meaningful mark-up built upon microformats into layouts and interface elements using CSS to dramatic effect. The microformats that you will be working with in this series include:

• hCard (for contact information)
• hCalendar (for event information)
• hReview

Before I discuss microformats and my own strange passion for using them, I'll begin by taking a look at plain old mark-up and how we have mostly come to use its languages today.

The Fine Art of Compromise

Most web designers and developers that I know aim to make the best work that they can for their companies, organizations, or clients. Making the best work involves working hard at every level and at every element that goes into a successful, professional web site or web application.

Of course, in most areas of web design and development, a professional's need for perfection often needs to be balanced by the demands of the job in hand; demands that are made by clients or managers, or simply by deadlines that force us to sometimes compromise our work in ways that we know makes it fall short of perfection. Unfortunately for us, the web, and consumers of the content that we publish, often the first area where we make compromises is the HTML or XHTML mark-up that we author to add meaning to that content. This, of course, is nothing new.

Refocusing On Meaningful Mark-up

In the darker days before browsers' implementations of CSS became reliable enough to use as a means of visually structuring and styling web pages, even the most conscientious of web designers and developers were forced to abuse mark-up to satisfy the needs of the visual layout. With CSS now more mature and more solid, we no longer need to rely on mark-up abuse in order to create rich visual layouts and interfaces for our web sites and web applications. Mark-up has been largely relieved of any presentational duties and can be free to fulfil its original task of conveying meaning.

With the shift away from wholesale presentational mark-up, it has become much more likely for web designers and developers to choose mark-up elements for their meaningful, semantic value rather than for their appearance. Headings again add structure and define specific areas of content; lists have become one of the staples of modern mark-up. Even elements and attributes that had rarely been used outside of dusty, academic circles, such as citations, have found new homes on blogs. This newfound enthusiasm for authoring better mark-up can only benefit site owners and their visitors who today access web-based content on a wide variety of platforms and devices.

If you have been working with meaningful mark-up for awhile, you may remember Dan Cederholm's Simple Quiz in which the respected designer and author asked his audience for ideas on the most appropriate use for headings, as well as the most meaningful way to convey interface elements such as breadcrumb trails. Aspects of best practice are often topics for discussion among web professionals and few topics raise virtual voices more than best practices for authoring mark-up.

Mark-up Patterns and Blueprints

As some patterns for mark-up use have developed, alongside practical CSS solutions for browser resetting, typography, and layout, some web designers and developers have advocated the use of mark-up and CSS libraries and frameworks such as Blueprint. These are intended to be similar to libraries and frameworks for JavaScript and other technical languages and their advocates push hard their usefulness during rapid development. However, the layout techniques employed in Blueprint rely heavily on presentational mark-up.

I believe that frameworks such as Blueprint can, in the right hands, serve a useful purpose in a few limited cases, I also passionately believe that advocating a widespread use of the pre-prepared, highly presentational mark-up in such frameworks undoes many of the gains that have been made in recent years from designers learning and authoring plain old semantic HTML.

Worse still, Blueprint and others like it reinforce presentational thinking and perpetuate a wrongful use of mark-up for presentational, rather than semantic, reasons: All in the name of short-term efficiency. To me, this is the worst type of compromise that a web designer or developer can make. While we must sometimes accept that compromises be made in CSS (using hacks or filters as one example), we should resist until the very end any compromises to the mark-up that we write.

Even with the more widespread use of meaningful mark-up and CSS, if you peel back the visual skin of many sites whose design has been implemented using CSS, you will find that web designers still author mark-up to achieve a presentational rather than meaningful result. While the appropriate use of headings, paragraphs, block quotations, and lists are more common, authors still most often order and structure their mark-up for presentational reasons.

1. Headers and branding
2. Columns of content ordered left to right
3. Footers or site information

In particular, web designers and developers have relied heavily on division elements to create vertical columns, even when these divisions do not group related elements or content, as is their real purpose.

Frameworks such as Blueprint only serve to reinforce this type of presentational thinking. Instead, I advocate that web designers and developers should think first about authoring the most appropriate, meaningful, and minimal mark-up; free of presentational elements and attributes and then set themselves the creative challenge of implementing a design with CSS using, where possible, only that mark-up.

Content-Out Markup

In my book, Transcending CSS: The Fine Art Of Web Design, I outlined the concept of content-out mark-up: a concept where web designers and developers work from the basic elements of mark-up (such as headings, paragraphs, and lists) outwards, rather than thinking first about achieving a design by simply replacing table rows and cells with divisions. Using this approach, the starting point should always be rich semantics and not a visual layout as described in, for example, a graphical design. I have been pleasantly surprised that the vast majority of (the overwhelmingly positive) feedback on the book has come from people who are excited by thinking about mark-up in this way: from the most elemental outwards.

Art or Science?

The early Simple Quiz discussions were good-natured and, above all, highly useful in helping give web designers and developers ideas for practical solutions to common problems using meaningful mark-up. However, discussions about whether it is right to use mark-up and CSS libraries and frameworks can quickly become super-heated.

Seattle-based web developer Jeff Croft has stirred strong feelings with his articles on frameworks. What was particularly interesting to me about this and subsequent discussions was the different views that many web designers and developers hold about whether authoring mark-up is simply a means to an end (to achieve a visual end result) or an end in itself, i.e.: the creation of a rich and meaningful document that maintains its own integrity and can then be styled using CSS to accomplish a design.

As Croft admits to his readers in his article:

Writing [mark-up and CSS] code is, for me, just a way to do what I really care about: building amazing things for the web. I think like an engineer, and not like an artist. For me, the process of writing HTML and CSS is not a particularly creative one; it's engineering, pure and simple.

Jeff Croft: The final word on frameworks from someone way smarter than me

In my opinion, Croft misses the point about the true purpose of mark-up. It is not intended to provide a means by which to render a cool, AJAX infused web application inside a browser, but instead to allow highly detailed, rich, and, above all, meaningful content to be published on the web.

In the same discussion, some other commenters also misunderstand the importance of regarding authoring mark-up as an art.

I wouldn't consider mark-up an art, after all art is about expression and mark-up/coding style doesn't change the expression of the final output. But I would consider it a craft.

However, authoring mark-up should be everything about expressing meaning. Far from being a craft, when an author carefully, even obsessively, considers the meaning and placement of each and every element that he or she adds to a document, that document becomes a creative work that is little different to poetry. That very expressiveness can make mark-up an art form.

For me, the creation of a meaningful document is as important as the visual end-result. Every element that an author writes into the mark-up of a document should be well thought through and considered. Every attribute value should serve to enhance the meaning of the element to which it belongs. When an author considers mark-up from the content-out, rather than a tool with which to achieve a visual result to be displayed in a browser, the semantic richness of the web is extended.

MIcroformats: Extending the Reach of Meaningful Content

While many of the definitions of microformats emphasize their use as data formats and patterns, microformats enthusiast Brian Suda has taken a different approach, focusing instead on their ability to add even more precise meaning to mark-up.

Microformats are all about representing semantic information encoded within a web page, allowing that information to be leveraged in ways that were possibly never conceived by the original publisher. The idea to put more semantic information directly into HTML is nothing new; people in the web industry have been discussing this concept for over ten years [...] The idea is finally becoming reality.

Brian Suda: Microformats: More Meaning From Your Markup

It is microformats' ability to, as Brian Suda describes, encode additional semantics into the HTML markup of web pages that makes them highly attractive. They also reinforce the content-out approach by making authors of HTML or XHTML think not just from the element out, but also from the character string out. For example, in the following code example, I have considered not only that the following segment of text is a quotation, but also the precise semantics of the name and URL.

<blockquote class="vcard">
<p><a href="http://www.stuffandnonsense.co.uk/" class="fn url">Andy Clarke</a>
is hip and mature. You almost never get both. He is a seasoned brand steward,
a fancy pixel wrangler, and no mean hand at code. A triple talent.
The bastard.</p>
</blockquote>

In this example, without the microformat attribute value of fn (formatted name) there is nothing to make my name distinctive from any other strings of characters. The presence of the attribute value url also serves to denote that the web site address mentioned belongs to me as the owner of that particular vcard.

Authoring using microformats has significant advantages for all concerned, but most importantly it requires that a web designer or developer think about their documents at the most granular, almost atomic level. This is an essential part of the content-out approach to authoring mark-up that I advocate. I might even go so far as to suggest that adding rich, precise semantics through the inclusion of microformats is as essential to a modern, professional level web site or application as valid, well-structured HTML or XHTML, and that without this rich meaning, web sites and their visitors are little better off than they were in the days of mark-up abuse.

Moving Forward

One of the major areas of interest for me is that, having abandoned presentational mark-up in favor of utilizing the rich, meaningful elements and attribute values that microformats bring to mark-up, a web designer or developer now has a wide range of legitimate hooks with which to bind a design to a document using CSS. Throughout this series of six Microformats: The Fine Art Of Mark-up articles, I will be taking you on a journey through transforming highly rich, but minimal, mark-up into a series of new and engaging interface and layout designs.

Until then, I encourage you to learn more about the state of microformats and I hope that, like me, you'll be excited and inspired by what you discover.