Quantcast
Channel: Codeblam - UI Web Development » CSS
Viewing all articles
Browse latest Browse all 3

Get Started with Microformats

0
0

Created primarily for the user  and secondary for machines, microformats are a set of simple formats built upon adopted standards. Instead of throwing away what works today, microformats intend to solve simpler problems first by adapting to current behaviors and usage patterns (e.g. XHTML, blogging).

Microformats are tiny patterns in HTML to interpret commonly used things like people, events, blog posts, reviews and tags in web pages; the fastest and simplest way to provide feeds and APIs for the information in your website.

Microformats are a way of adding simple markup to human-readable data items such as events, contact details or locations, on web pages, so that the information in them can be extracted by software and indexed, searched for, saved, cross-referenced or combined.

More technically, they are items of semantic markup, using just standard plain old semantic (X)HTML with a set of common class names and “rel” values. They are open and available, freely, for anyone to use.

Microformats are:

  • A way of thinking about data
  • Design principles for formats
  • Adapted to current behaviors and usage patterns
  • Highly correlated with semantic XHTML
  • A set of simple open data format standards for more structured blogging & microcontent publishing.

Microformats are not:

  • A new language
  • Infinitely extensible and open-ended
  • An attempt to get everyone to change their behavior and rewrite their tools
  • A whole new approach that throws away what already works today
  • A panacea for all taxonomies, ontologies, and other such abstractions
  • Defining the whole world, or even just boiling the ocean

Specifications

The list of current, stable Microformats open standard specifications.

hCalendar - (HTML iCalendar) is a Microformat standard for displaying a semantic representation of  calendar information about an event, on web pages, using HTML classes and rel attributes.

Consider the following HTML example

<p>
    The English Wikipedia was launched
    on 15 January 2001 with a party from
    2-4pm at
    Jimmy Wales' house
    (<a href="http://en.wikipedia.org/wiki/History_of_Wikipedia">more information</a>)
</p>

hCalendar mark-up may  added using HTML elements and appropriate classes:

<p>
    The <span>English Wikipedia was launched</span>
    on 15 January 2001 with a party from
    <abbr title="2001-01-15T14:00:00+06:00">2</abbr>-
    <abbr title="2001-01-15T16:00:00+06:00">4</abbr>pm at
    <span>Jimmy Wales' house</span>
    (<a href="http://en.wikipedia.org/wiki/History_of_Wikipedia">more information</a>)
</p>

 



hCard - a microformat for publishing the contact details (which might be no more than the name) of people, companies, organizations, and places, in (X)HTML, Atom, RSS, or arbitrary XML. The hCard microformat does this using a representation of vCard properties and values, identified using HTML classes and rel attributes.

Consider the following HTML example

<div>
   <div>Joe Doe</div>
   <div>Jo</div>
   <div>The Example Company</div>
   <div>604-555-1234</div>
   <a href="http://example.com/">http://example.com/</a>
 </div>

hCard mark-up may  added using HTML elements and appropriate classes:

<head profile="http://www.w3.org/2006/03/hcard">
 ...
 </head>
 ...
 <div class="vcard">
   <div class="fn">Joe Doe</div>
   <div class="nickname">Jo</div>
   <div class="org">The Example Company</div>
   <div class="tel">604-555-1234</div>
   <a class="url" href="http://example.com/">http://example.com/</a>
 </div>

 



rel-license - By adding rel="license" to a hyperlink, a page indicates that the destination of that hyperlink is a license for the current page. E.g. with the following hyperlink:

<a href="http://creativecommons.org/licenses/by/2.0/" rel="license">cc by 2.0</a>


rel-nofollow - By adding rel="nofollow" to a hyperlink, a page indicates that the destination of that hyperlinkshould not be afforded any additional weight or ranking by user agents which perform link analysis upon web pages (e.g. search engines). Typical use cases include links created by 3rd party commenters on blogs, or links the author wishes to point to, but avoid endorsing.



rel-tag - By adding rel="tag" to a hyperlink, a page indicates that the destination of that hyperlink is an author-designated “tag” (or keyword/subject) for the current page. Note that a tag may just refer to a major portion of the current page (i.e. a blog post). e.g. by placing this link on a page,

<a href="http://technorati.com/tag/tech" rel="tag">tech</a>

the author indicates that the page (or some portion of the page) has the tag “tech”.



XFN - XHTML Friends Network  is an microformat developed by Global Multimedia Protocols Group that provides a simple way to represent human relationships using links. XFN enables web authors to indicate relationships to the people in their blogrolls by adding one or more keywords as the rel attribute to their links. XFN was the first microformat, introduced in December 2003.

A friend of Jimmy Example could indicate that relationship by publishing a link on their site like this:

<a href="http://jimmy.example.com/" rel="friend">Jimmy Example</a>

Multiple values may be used, so if that friend has met Jimmy:

<a href="http://jimmy.example.com/" rel="friend met">Jimmy Example</a>

 



XMDP XHTML Meta Data Profiles is a format for defining metadata ‘profiles’ in a machine-readable fashion, while enabling people to see a description of the definition visually in a web browser. XMDP definitions are expressed in XHTML. Examples of applications that use XMDP include XFN and hCard.

<dl>
  <dt id="title">title</dt>
  <dd>The name given to a piece of work.</dd>
</dl>

To apply, use the profile attribute in the head element of your document:

<head profile="URL">

 



XOXO eXtensible Open XHTML Outlines is an XML microformat for outlines built on top of XHTML. Developed by several authors to reuse XHTML building blocks instead of inventing unnecessary new XML elements/attributes, XOXO is based on existing conventions for publishing outlines, lists, and blogs on the Web.



 

 


Viewing all articles
Browse latest Browse all 3

Latest Images

Trending Articles





Latest Images