Styling hCards with CSS. There are plenty of places online where you can learn about using the hCard microformat to mark up contact details at your site (there are some resources at the end of the article).
But there’s not yet been a lot of focus on using microformats with CSS. So in this installment of 24 ways, we’re going to look at just that – how microformats help make CSS based styling simpler and more logical. Being rich, quite complex structures, hCards provide designers with a sophisticated scaffolding for styling them. A recent example of styling hCards I saw, playing on the business card metaphor, was by Andy Hume, at While his approach uses fixed width cards, let’s take a look at how we might style a variable width business card style for our hCards. Let’s take a common hCard, which includes address, telephone and email details <div class="vcard"><p class="fn org">Web Directions North <a href=" src="images/vcard-add.png" alt="download vcard icon"></a></p> 1485 Laperrière Avenue Ottawa ON K1Z 7S8 Canada.
hCalendar Creator. Hreview - Microformats. This document represents a draft microformat specification.
Although drafts are somewhat mature in the development process, the stability of this document cannot be guaranteed, and implementers should be prepared to keep abreast of future developments and changes. Watch this wiki page, or follow discussions on the #microformats Freenode IRC channel to stay up-to-date. hReview is a simple, open, distributed format, suitable for embedding reviews (of products, services, businesses, events, etc.) in HTML, XHTML, Atom, RSS, and arbitrary XML. hReview is one of several microformats open standards. Want to get started with writing an hReview? Use the hReview creator to write a review and publish it. Microformats Draft Specification 2012 copyright and patents statements apply. Status hReview 0.4 is a microformats.org draft specification. Available languages The English version of this specification is the only normative version. Errata and Updates Introduction Scope Out of scope Format In General Schema. Tutorials on Microformats.
Introduction Microformats are used to make Web documents smarter (HTML, XHTML, RSS, ATOM, BLOGS, XML).
They don't affect how your documents are rendered by a browser. But they have a huge (positive) impact on the ability of Web applications/tools to collect, understand, and process the information in your Web pages. Microformats are tiny bits of information injected into Web pages. When you add together the tiny bits of information over thousands or millions of Web pages, you have a mountain of valuable information that can help with searching, understanding, and processing the Web.
There is a growing collection of Microformats. The Microformat Process. Microformats.cheatsheet.pdf (application/pdf Object) hCard Creator. This user interface, and the code behind it, is provided as an example for the benefit of microformat open standards developers, and to demonstrate the clear one to one correspondence between microformat fields and microformat code.
The code generated by this interface may be used for semantic web pages, structured blogging, or any other application that requires markup that is simultaneously human presentable and machine readable. Based on the hCard creator by Tantek Çelik (later updated by Ryan King), which is based on the XFN Creator (v1.0 by Matt Mullenweg, v1.1 update by Tantek Çelik). To report any problems or make any suggestions, please send feedback to the #microformats IRC channel on Freenode.