Microformatting

MAIN OBJECTIVE

In this tutorial you will gain a better understanding of what microformatting is and how it can be used. You will learn the difference between a hCard and a vCard. You will also learn how to properly format a vCard and vCal file, and how to properly utilize them on your website

SUB OBJECTIVES

• What are vCard's & hCards?
• vCard Formatting
• hCard Properties
• hCard Formatting
• What are vCal's and hCal's?
• vCal Formatting
• hCal Formatting

PREREQUISITES

Before beginning this tutorial you should already have a strong understanding of HTML fundamentals and how to apply them to your web page. You should also have a basic understanding of php and how it works.

What are vCard's & hCards?

Think of a vCard as an electronic business card. A vCard is a file that you can use on the web, email, and messaging which contains all of your contact info and can also contain url's, images, and sound files. An hCard is a microformat which is used to provide information about a person, business or organization. It is basically an HTML version of a vCard. By using the hCard you allow websites to display the contact info. hCard also allows search engines to look for your contact info and it enables people to download your contact info directly into their contacts. Unfortunately hCards are not really supported on mobile devices yet.

vCard Formatting

Below is an example of a formatted vCard and what each line is.

     BEGIN:VCARD
            VERSION:2.1
            N:McGinnis, Sean R ( Properly Formatted Name: Always Last, First MI)
            FN:Sean McGinnis (Full Name)
            ORG: Division Fifteen (Organization)
            TITLE:Designer (Person's Title)
            TEL;WORK;VOICE:(555) 555-1212 (Work Phone)
            TEL;HOME;VOICE:(555) 555-1213 (Home Phone)
            ADR;WORK:;;75 Wild Cherry Ln;Marietta;PA;17547;United States of America (Work Address)
            ADR;HOME:;;75 Wild Cherry Ln;Marietta;PA;17547;United States of America (Home Address)
            EMAIL;PREF;INTERNET:sean@divisionfifteen.com (Email)
            REV:20150303T142732Z (This is when it was created or revised)
            END:VCARD
    

There are other elements that you can add to a vCard, but this is the probably the most common layout of all of the basic info. For a vCard to work the only field that really needs to be filled out is the N field (your properly formatted name).

hCard Properties

• fn: Full Name
• n: Structured Name (Last Name, First Name, MI) or a container for:
• honorific-prefix - e.g. Ms., Mr., Dr.
• given-name - given (often first) name
• additional-name - other/middle name
• family-name - family (often last) name
• honorific-suffix - e.g. Ph.D., Esq.
• nickname: Nickname or Alias
• org: Organization or Business Name
• photo: Photograph, Logo, or Image
• url: Business or Personal Website, Or Web Link
• email: Personal or Business email
• tel: Work or Personal Telephone Number
• adr: Structured Address or a Container for:
• street-address - street #+name, apt/ste
• locality - city or village
• region - state or province
• postal-code - postal code, e.g. U.S. ZIP
• country-name - country name
• bday: Birthday
• category: For Tagging Contacts
• note: Notes About the Contact

The information for this list was pulled from microformats.org.

Formatting hCard in HTML

In order for an hCard to display properly on your website you must structure it correctly in your html. When marking up your hCard in html you will use the basic vCard structure in the framework of <div> and <span> elements with class tags that correlate to the vCard properties. As long as you’re using valid HTML in the right way you will be fine. Below is an example of the earlier vCard in hCard format.

                    <div class="vcard">  
                    <span class="fn">
                    <span class="first-name">Sean</span>  
                    <span class="last-name">McGinnis</span></span>,  
                    <span class="title">Designer</span>,  
                    <div class="org">Division Fifteen</div>  
                    <div class="adr">   
                    <div class="street-address">75 Wild Cherry Ln</div>   
                    <span class="locality">Marietta</span>,   
                    <span class="region">Pensylvania</span>   
                    <span class="postal-code">17547</span>  
                    </div>  
                    <div>Tel: <span class="tel">555 555 1212</span></div>  
                    <div>Email: <span class="email">sean@divisionfifteen.com</span></div> 
                    </div>
		

vCal & hCal

vCal is basically the calendar version of a vCard. vCal allows you to add significant dates to your website or emails that the visitors or recipients can click on in order to add them to their personal calendars. These can be very useful if you or your company are sending out mass emails withinvitations to a grand opening, or possibly posting significant dates on a company blog or website. vCal is compatable with most of the common calander applications available today. hCal works similarly to the hCard in that it allows HTML to pull info from your vCal file and populate your webpage with it.

vCal Formatting

Below is an example of a formatted vCal file for my birthday along with explanations of each line.

            <?php
            header('Content-Type: text/calendar; charset=utf-8');
            header('Content-Disposition: attachment; filename="bday.ics"');?>
            
            BEGIN:VCALENDAR (This is sayng that it's a vCal entry)
            VERSION:2.0 (This is the version used)
            BEGIN:VEVENT (This creates an array for the event)
            UID:sean@divisionfifteen.com (This creates a unique id)
            DTSTAMP:20150311T1600Z (This is when the event was last modified)
            DTSTART:20150620 (This is the date of the event)
            SUMMARY:Sean's Birthday (This is a brief explanation of what the event is)
            CATEGORIES:BIRTHDAY,PERSONAL,SPECIAL OCCASION
            RRULE:FREQ=YEARLY (This is how often the event occurs)
            END:VEVENT (this closes the specific event)
            END:VCALENDAR (this closes the calendar)
            
            

hCal Formatting

Below is an example of an hCal format of the vCal that we created above.

              
            <div class="vevent" id="hcalendar-Sean-McGinnis's-Birthday-Party">              
            <time datetime="2015-06-20T19:00" class="dtstart">June 20, 2015 7</time>–
            <time datetime="2015-06-20T23:00" class="dtend">11pm</time> :  
            <span class="summary">Sean McGinnis's Birthday Party</span> at 
            <span class="location">Annie Bailey's</span>
            

Try It Out

Given what we have just learned create a vCard and hCard for yourself with your basic info on them. Once you've done that create a vCal file with your own birthday and then create an hCal file for your website. You can refer back to my vCard, hCard, and vCal if you get stuck. Try out your html below.

POP QUIZ HOT SHOT!