Markup Map for hCard Microformat (Update)

Knowing what elements are available in the hCard microformat is important when trying to apply CSS rules. The main problem is that there are so many elements it’s easy to get tripped up on how to best style an hCard.

To help understand how many elements are in the hCard and keep the block-level and inline elements separate, I followed Andy Clarke’s 3D Zen Garden map model and made my own 3D map for the hCard microformat.

3D hCard Map

3D hCard

Update: After asking Tantek to review the hCard map, he made some suggestions for improving it. For more information, see the notes section.

Notes

Keep in mind that this example is simply a base. The 3D map uses the live example as its base, however an hCard can add more elements, like instant messenger handlers, or remove some that are currently shown in the demo. It depends on how much information you have to work with. For a clearer demonstration of this, I suggest tinkering with the useful hCard creator.

Also the live example is an hCard geared for an organization. Therefore the fn and org class attribute values are used on the same a element.

In the previous version, I used “web.site” as a fictional Web address. Tantek reminded me that example.com Web address was registered by the IANA for this very reason. I keep Ohio in the map since that’s my new home state.

I fixed a typo in the last version where I carried over the class attribute tel for the email address’s div wrapper.

In my previous example I was representing block level elements in two ways: as being on top of visual boxes as well as being placed inside them as well. While that made perfect sense at 2 a.m., I reworked the presentation of block level elements to be bold and try to focus the boxes on grouping and nesting of elements. 

Dynamic Markup Maps

Lastly, I created this example using CSS rules (instead of going with Illustrator). The rationale behind using XHTML+CSS over a graphics editor is that I am more familiar with those technologies. Also I thought it would be a great benefit for Web developers to see a markup map (which could be dynamically generated) while using a tool like hCard generator.

The first step was creating the CSS rules, but I don’t have the spare time to implement the rest of the project myself. Though, maybe someone else can?