As I tried to point out in my previous posts, HTML is a very rich language when it comes to describe semantic structures. But sometimes we might find that there are some structures we would like to describe more precisely than possible with the current list of elements. A good example is how we usually give some common id's to our sections- #header to the header DIV, #menu to the site's main menu, #footer to the footer and so on. Now – if you know about HTML5 you already know that many of these problems are solved there, but for various reasons I still avoid using H5 for most of my sites. For XHTML 1.0, there is one nice solution for us – microformats.

What are microformats?

Microformats are a set of standards that use an existing HTML tool – the class attribute – to introduce new semantic structures without harming the validation of our HTML.

The hCard

The hCard microformat is a way to markup contact details. Lets look at this example:

    
Name:
        
Arieh Glazer
    
    
Address

        

            
Sigalit st. Migdal Haemek Israel
        
    
    
Phone Numbers:
        
Home: 04-1235-678

        
Mobile:052-1235-678
    
    
Email:
        
Workarieh.glazer@gmail.com

    

This is a very semantic way to describe our contact information. But when a robot (such as google) looks at it, it might be hard for it to scrap the data in the exact way we meant it (well, google is probably a bad example because it is just smarter than anything we can imagine, but you can see my point). Now let's look at our hCard:

    
Name
        
Arieh Glazer
    
    
Address

        

            

                Sigalit st.
                Migdal Haemek

                Israel
            
        
    
    
Phone Numbers:

        
Home: 04-1235-678
        
Mobile: 052-1235-678

    
    
Email:
        
Workarieh.glazer@gmail.com

Not too much markup addition, but a much richer meaning. Since not all class name are understandable, let's go over them:

• The vcard element is used to mark the container. It is called vcard because it follows the vCard specification.
• The fn element is used to markup the contact name, and it is mandatory.
• The adr is used to markup addresses. Note that while adding an adr class to an address element might seem silly, but it allows us it's inner markup – a way to break the address down into its own parts (which are quite literal).
• The tel class us used to markup phone numbers. Notice the type and value. This is not a requirement, simply a way to create specifty. If I were to simply nest the number inside the dd it would still have been legal.
• The email class is literal. Again the use of type and value is optional.

As you can see – using almost the same markup, we doubled it's meaning. There are much more option to the hCard MF, so go look at the specification.

Another Example - The hProduct

This one is still in draft status, but I find it extremely useful so I use it anyway. This time I'm just going to include the full hproduct:

    
Prod Name:
        
Night Googles
    
    
Company:

        
NightOwels
    
    
Categories:
        
Nightvision
        
Fasion Accessory

    
    
Images:
        

            

        
        

            
        

        
    
Description
        

            

            There Googles can be used at a range of lighting scenes, 
            ranging from starlight to mall light. As you can see, they are also 
            quite cool looking and will make all your friends jealous
            
        

    
Price:
        
1,000 NIS

Now this again might look a bit pointless because the DL is so useful, but it can still help robots and MF tools to find more sense in it.

Some tools and links

• The Microformats Site.
• Operator - a microformats tool for Firefox (not hebrew).
• hCard spec.
• hProduct spec.