Add hcard micro-format to a Web page

When it comes to "micro-format", there are people who hold the question. In the final analysis, I think the browser and terminal equipment support did not keep up, did not form a complete application process. Still, companies such as Yahoo and Google have begun to apply micro-formats to their mainstream products. As a website developer and personal webmaster, you are still on the sidelines of "micro-format" application?

In fact, the micro-format is not complex, it is not far away from us. Just do it now and try adding a micro format to your Web page.

In my opinion, the most dominant application of micro-format is hCard. Therefore, this article will focus on some HCard application experience.

VCARD/VCF

Before discussing HCard, it is necessary to introduce the VCard first.

A vCard is a file format standard for electronic business cards that stores information such as the name of the contact, company name, position, phone number, address, e-mail, website, and so on. A VCard's file name extension is usually .VCF a simple VCF file that looks like this:

BEGIN:VCARD
VERSION:2.1
N:Michael;Jackson
TEL:13912345678
END:VCARD

Although the VCF file does not seem to be common to ordinary users, it has been widely supported and applied in many fields.

The first time I contacted the VCF file was when I was sorting my phone address book. I needed to move my phone's address book to my new phone, and I downloaded and tried some of the relevant tool software, such as PC-side mobile phone management software NOKIA pc Suite and Oxygen phone Manager, Address Book management software Outlook/outlook Express , mobile phone Address directory Backup tool Smartvcard and so on. I found that all of these software "invariably" support the VCF format, and NOKIA smartphones even natively support the import/export of VCF files on the mobile side.

HCard

Look at HCard again. We know that HCard is a micro-format that is commonly used in languages such as HTML, primarily for organizing and labeling contact information in Web pages. HCard directly uses the name of the vcard as its own tagging rule, which means that HCard is inherently compatible with vcard. These features make it the most-watched form of application.

Like other micro-formats, HCard is completely transparent to web browsers. HCard uses the class attribute of the HTML tag to mark the data. Sometimes, when an existing label in an HTML document is not sufficient for careful tagging, you may need to add additional tags (usually without affecting the appearance of the page span or div labels). I'm not going to go into the specifics of adding hCard (or converting VCard to HCard) on a Web page, because there are very detailed references on the web, and I'll list them at the end of this article.

where to add HCard

Where do you add HCard to your Web page? In fact, from its use can be seen, the Web page in any personal, website or company contact information can be used HCard to mark.

The homepage of the CSS magic as an example, involving such contact information page elements have site title, "About Webmaster", "Friendship link" three areas, we can respectively to the site, webmaster, friends for the main body set hCard alone.

Why to use HCard

You might ask, since HCard is completely transparent to web surfers, why bother adding hCard to the Web page?

At the moment, this seems like a thankless thing, because hCard such as the micro-format has not yet been well supported by browsers and terminal devices. But once these deficiencies have been improved, HCard will bring great convenience to our digital life. Take a look at some of the ideal examples:

• When I use a mobile phone to browse a company's website, the mobile browser identified the HCard information in the Web page. This hCard marks the company's various contacts, the mobile browser is very smart to prompt me "whether to save to the Address book", so I am very loose to save the information I need.
• Mobile browser can also be the page HCard exported to VCF files, I will VCF file with Bluetooth transmission to colleagues on the phone, they also easily saved these contact information, but also can easily sync to the computer's address book software.
• To my surprise, the mobile browser identified the location of the HCard information (latitude and longitude), and can pass this information to the mobile phone in the GPS navigation software, so even the road does not need me to ask around!

These apps look good, don't they? In fact, these scenarios are getting closer to us now, HCard already has some feasible application process.

HCard application at present stage

At present, the HCard applications are mainly desktop-oriented, because there seems to be no support for micro-format mobile phone browser.

Browsers that currently identify micro-format information include Firefox with tails Export or Operator extensions installed, and a Mac version of Safari browser with the safari microformats Plugin plugin installed.

These browsers usually provide the ability to export VCF files after identifying HCard information in the page. These exported VCF files can be easily added to the local directory (Outlook or address book) and can then be synchronized to the Nokia phone or iphone/i via software such as the Nokia PC Suite or Apple iTunes Pod and other portable devices.

The Safari microformats Plugin plug-in can directly import contact information from HCard into a native (Mac OS only) address book.

In addition, Firefox's Operator extension also offers a number of online applications for micro-format, such as "Use Google map Lookup", "Add to Yahoo Address Book" and so on, effectively enrich the scope of hCard applications.

It is worth mentioning that there is also a completely online, browser-independent implementation--microformats bookmarklet (micro-format bookmarks). Although its interface is clearly borrowed from safari microformats Plugin, it is actually cross-browser (support for Safari, Firefox, and IE browsers). It's easy to use and interesting to drag and drop the "micro-format Bookmark tool" into the bookmarks bar (or add to favorites), even if you've finished installing. Then, when browsing any Web page, you can identify and manipulate the micro-format information in the Web page by clicking on the bookmark item (or by opening the Favorites item). (However this tool needs to call jQuery, it may conflict with the JS library that the Web page calls itself, or it will fail due to the failure of the jQuery load, and not be stable enough.) ）

Conclusion

Although the current micro-format has not been good browser and terminal equipment support, but we believe that in the near future, HCard and other micro-format applications will make the information in the Web page more accurate and rich, and for Internet users to bring more convenience.

Related reading

• Official information of HCard
• Chinese Wikipedia encyclopedia: VCard
• Chinese Wikipedia encyclopedia: HCard