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.


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 “” as a fictional Web address. Tantek reminded me that 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?

3 thoughts on “Markup Map for hCard Microformat (Update)

  1. Hello,

    I’m not sure I understand how your visual map works. How do the borders and lines of text match each other? Do the borders match the text directly inside them, or the text directly above them?

    If they match the text directly inside, then your map is wrong, because it means that the A element encompass most of the following content (including block elements, which is not valid HTML). And of course it’s not what the example you used says.

    If they match the text directly above, then it’s wrong as well because it means that div.street-address is contained by span.type (which is, again, not valid HTML).

    My best guess is that the borders match the line of text just above them, but you messed the content of div.adr by putting borders around div.street-address and, even though borders normally mean «the element described above contains what is inside the borders».

    If that’s the case, then the 3D CSS Zen Garden Map you mentioned does things the other way round.

    Either I’m stupid or just momentarily lost, or this is quite puzzling. 😉

Leave a Reply

Your email address will not be published. Required fields are marked *