<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Using microformats to semanticly tag content

Published on
9,666 Points
3,266 Views
4 Endorsements
Last Modified:
Approved
The past - html
In the early days of the Internet, html code was used to describe how the page should look more than it described the actual content. Some used a combination of the <font> tag and the <b> tag to make headings, others designed web pages using <table> tags -- while now most pages use <h1> tags for headings, and combine <div> tags and CSS for page design.

The present - xhtml
While more focused on content than html, xhtml still provides only a limited set of semantic tags, such as <h1> <p> <a> <abbr> <acronym> <cite> <code>. These tags add value to search result describing the type of content the tags contain, helping search engines such as Google to assess the relevance of the text. However, the tags do not describe things such as "what's at the other end of this link", "this is a street address", or "this is calendar info about an event".

The future - The semantic web
The past few years Web 2.0 has been a buzz word, introducing collaboration, interoperability, communities and focus on the end-user. The next "version", Web 3.0, will be all about the semantic web; how we can create and use mark-up code that describe the content of web pages, and how that content can be used to closer relate resources on the Internet.

Microformats are part of several other standards and technologies used to build the semantic web. Using attributes provided by standard xhtml, metadata can be added to links and other tags, precisely describing the content of that tag.

In other words: microformats tells your browser and Google that this next xhtml code from my personal web site is my contact information:  

<div id="hcard-Havard-Fjaer" class="vcard"> 
    <h1 class="fn">Håvard Fjær</h1> 
    <p class="adr"> 
        <span class="street-address">Svoldergata 2b</span><br /> 
        <span class="postal-code">0271</span> <span class="locality">Oslo</span></p> 
    <p> 
        <span class="tel">+47 99 44 99 59</span><br /> 
        <a href="mailto:havard@fjaer.com" class="email">havard@fjaer.com</a><br /> 
        <a href="http://www.fjær.no" class="url">http://www.fjær.no</a> 
    </p> 
</div>

Open in new window

In the code above, the hCard microformat defines tags describing my full name: class="fn"; address: class="adr", class="street-address", class="postal-code", span class="locality"; my phone number: class="tel"; etc.

It is not only search engines that are able to use this meta data:
 - The browser might add the contact information to your address book,
 - Skype might add a callto: link to my phone number,
 - or a LinkedIn plugin in Firefox might recognize the contact as a colleague of yours.

Other microformats such as XFN describe the relation of a link. For instance the link from my home page to my LinkedIn profile:
<a href="http://www.linkedin.com/in/havardfjaer" rel="me">LinkedIn</a>

Open in new window


... is tagged with rel="me", stating that the page is another page about me. Other keywords might be acquaintance, friend, co-resident, parent, etc. Based on these tags it is quite possible to build relation networks, describing how a person is related to others.

The microformats are not made for the end user, but for the developer and services that are able to read the formats. As of now there aren't too many services leveraging the potential available in microformats, but once there is enough content tagged out there, such services and applications will surely emerge, adding that extra value for the end user.

Read more about microformats at http://microformats.org

Håvard Fjær
4
Comment
3 Comments
LVL 18

Expert Comment

by:WaterStreet
I think this article is both informative and nicely focused.  Got my vote above.
0
LVL 61

Expert Comment

by:Kevin Cross
I second the motion.  Got my vote above as well.  Nice article, Håvard!
0
LVL 2

Author Comment

by:havard-fjaer
Thank you for your kind comments -- and for your feedback, WaterStreet and lherrou, when I was writing the article. This is my first article on EE, and I'm very impressed with the feedback and quality assurance you uphold. You really helped me add that little extra to the article.
0

Featured Post

Exploring SQL Server 2016: Fundamentals

Learn the fundamentals of Microsoft SQL Server, a relational database management system that stores and retrieves data when requested by other software applications.

Join & Write a Comment

Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month