getting-started: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
(rough draft, needs a bit of improvement to the writing and better examples)
 
(http://12abjdhoaz.blogspot.com/ has been moved, it is now a redirect to get-started)
 
(3 intermediate revisions by 3 users not shown)
Line 1: Line 1:
''This is aimed specifically at an audience of designers and IA's, not programmers, so excuse the non-technical language. Trying not to be too contrived or patronizing but it is a fine line, that I'll hopefully nail a bit better after a re-edit - [[MarkRickerby]]''
#redirect [[get-started]]
 
= Getting Started with Microformats (Draft) =
 
Microformats are based on simple markup conventions that enable you to add meaningful structure to your web content.
 
One of the key principles of Microformats, is to privelege [[humans-first|human readable]] content. This means that you should think first and foremost of your content design being readable and accessible to web viewers. Using the [[design-principles|most appropriate HTML elements]] and applying structured [[class-design-pattern|class names]] to your markup enables you to produce content that can be clearly understood by a human audience and also used in a structured way by automated programs and other online tools. But the point is that you shouldn't have to go out of your way to produce such machine friendly markup - Microformats make it easy to integrate this greater degree of structure into your websites, without the overhead of having to learn complicated new languages or formats.
 
== Moving to Microformats: A 5 Minute Primer ==
 
The best way to understand Microformats is to start using them straight away. Since they're embedded in ordinary HTML, you can take existing pages and add these structured class names to the markup, but it's recommended that when doing this, you also take a close look at the overall tag structure that you're using - maybe there is a better way to say what you mean using basic HTML tags.
 
A simple, and very popular place to start is with [[hcard|hCard]] - a microformat for displaying personal and organizational contact details. You can think of [[hcard|hCard]] as a way to embed mini business cards in web pages, but glancing over the [[hcard-examples|examples]] shows a lot more possibilities than just that.
 
Let's imagine a static page that contains some personal contact details, the main part of which looks something like:
 
<pre>
<nowiki>
<div id="contact">
  <h2>Contact Me</h2>
  <p>You can contact me via email to <a href="mailto:jane@example.com">jane@example.com</a>, or send stuff to me at the following address:</p>
  <p>255 Some Street,<br />
    Some Place,<br />
    Some Town</p>
</div>
</nowiki>
</pre>
 
This snippet has all the human readable information needed to produce a valid [[hcard|hCard]] representation - all that is necessary is to add some additional structure that defines each particular detail. The first thing to do is to add the <code>vcard</code> wrapper class to the enclosing <code>div</code>, which identifies this particular block as an [[hcard|hCard]]:
 
<pre><nowiki>
<div id="contact" class="vcard">
</nowiki></pre>
 
One thing that is noticeably missing from this snippet is the full name of who these contact details apply to - this makes the information presented  more ambiguous and harder to understand. It's good to be explicit with such things, and it just so happens that the full name property is a compulsory field within an [[hcard|hCard]] as well. So let's add it, using the <code>fn</code> class:
 
<pre><nowiki>
<div id="contact" class="vcard">
  <h2>Contact Me</h2>
  <h3 class="fn">Jane Doe</h3>
  <p>You can contact me via email to <a href="mailto:jane@example.com">jane@example.com</a>, or reach me at the following address:</p>
  <p>255 Some Street,<br />
    Some Town,<br />
    Some Place</p>
</div>
</nowiki></pre>
 
Another thing we can do to improve the semantics of the snippet is to add an <code>address</code> tag. This isn't strictly part of the [[hcard|hCard]] format itself, but it is good practice to use it to display contact details like this. At the same time, we should also get rid of the [http://tantek.com/log/2002/10.html#L20021022t1432 bed & breakfast] markup in the second paragraph, replacing it with structured classnames for the components of a mailing address: <code>adr</code>, <code>street-address</code>, <code>locality</code>, and <code>region</code>. We can also add the <code>email</code> class to the mailto link, to complete the structure of the [[hcard|hCard]]:
 
<pre><nowiki>
<div id="contact" class="vcard">
  <h2>Contact Me</h2>
  <h3 class="fn">Jane Doe</h3>
  <p>You can contact me via email to <a class="email" href="mailto:jane@example.com">jane@example.com</a>, or reach me at the following address:</p>
  <address class="adr">
    <div class="street-address">255 Some Street</div>
    <div class="locality">Some Town<div/>
    <div class="region">Some Place</div>
  </address>
</div>
</nowiki></pre>
 
And that's all it takes!
 
Aside from the advantages of having such structured visible data, providing these additional class names also increases the visual design possibilities.

Latest revision as of 17:03, 14 March 2013

Redirect to:

Retrieved from "http://microformats.org/wiki/index.php?title=getting-started&oldid=50611"