Denise R. Jacobs, a web solutions consultant, explains microformats as a way to enhance web pages by adding semantic markup for easily accessible information such as events and contact details. These microformats build on existing HTML practices and offer benefits like richer data publication without relying on centralized services. Jacobs encourages individuals and organizations to adopt microformats to improve their web presence and functionality.

1. Hands-on Microformats Denise R. Jacobs PapillonEffect.com

2. Who is Denise? Starting with teaching herself HTML in 1996 (and dreaming in it for a while), Denise R. Jacobs has worked at creating and maintaining websites, web application localization, web project management, and teaching web design/development since then. Currently, Denise is a Web Solutions Consultant with her company PapillonEffect.com in Miami, Florida. She helps individuals and businesses increase their web knowledge, transform their web presence, and bring their websites into the 21st century with standards-based markup, web 2.0 tools, and the use of Social Media.

3. What are Microformats? Microformats are small patterns of HTML to represent commonly published things like people, events, blog posts, reviews and tags in web pages. Great. So what good does that do? 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. In other words… Microformats capitalize on the way people already work with and use the web, and add an additional layer of information that enhances functionality and use of the content on your pages.

4. Microformats are not a new language overly complex a whole new approach that throws away what already works today

5. The Basis of Microformats Shhhhh! Here’s a secret: Microformats are based on clean, semantic (X)HTML (aka POSH). If you use this already, you are very close to using microformats, and you won't have to do much additional work to implement them on your site. Microformats add information to a web page using mostly the class attribute (although sometimes the id, title, rel or rev attributes too). The class names are semantically rich and describe the data they encapsulate.

6. What can Microformats do for you? Why use Microformats? They provide consistency They provide contextual meaning beyond the standard set of XHTML elements. Why were microformats developed? they are a logical next step in the evolution of web design and information architecture they are a way for people and organisations to publish richer information themselves, without having to rely upon centralized services they provide a way to use (X)HTML for data.

7. Microformats currently supported hCalendar – Putting Event & Todo data on the web (iCalendar) hCard – electronic business card/self-identification (vCard rel-license – To declare licenses for content Example: <a rel=&quot;license&quot; href=&quot;http://creativecommons.org/licenses/by-nc-sa/2.0/&quot;> rel-tag – Allow authors to assign keywords to stuff. Example: <a rel=&quot;tag&quot; href=&quot;tagspace/tag&quot;>...</a> VoteLinks XFN Distributed Social Networks (“XHTML Friends Network “) Example: <a rel=&quot;friend met&quot; href=&quot;http://molly.com&quot;>Molly Holzschlag</a> XOXO - eXtensible Open XHTML Outlines (you are looking at one!)

8. Microformats coming in the not-so-distant future adr - for marking up address information geo - for marking up geographic coordinates (latitude; longitude) hAtom - format to standardize feeds/syndicating episodic content (e.g. weblog postings) hAudio hProduct hRecipe hResume - for publishing resumes and CVs

9. Microformats coming in the not-so-distant future (contd) hReview -Publishing reviews of products, events, people, etc rel-directory - distributed directory building rel-enclosure - for indicating attachments (e.g. files) to download and cache rel-home - indicate a hyperlink to the homepage of the site rel-payment - indicate a payment mechanism xFolk

10. That’s all well and good, but nobody uses them, right? hCalendar – events: Yahoo Upcoming.org, Eventful.com, Wikipedia, more… hCard - people & orgs: Avon.com, Eventful.com, Flickr, Google, Wikipedia, mailchimp.com more… rel-license - license links: CC Creator, Yahoo CC search, Google Rights Search rel-tag - content tagging: Technorati, Ice Rocket, more VoteLinks - for/against/abstain a link: Technorati XOXO - lists and outlines: WordPress, Technorati, S5, more hListing - classifieds: Oodle, Edgeio, WordPress plugin

11. More big names using Microformats hResume - resumes: SimplyHired hReview – reviews: JudysBook, Reevoo, more rel-directory - directory inclusion: Technorati Xfn – relationships: Wordpress, Flickr, Rubhub.com Geo: Wikipedia hReview: Yahoo, on several sites

12. Hands-on: Something you may have done already xfn on your blog

13. Hands-on: Something you can do tonight Put an hcard on your website vCard Example 1. BEGIN:VCARD 2. N:Jacobs;Denise;;; 3. FN:Denise Jacobs 4. EMAIL;type=INTERNET;type=WORK;denise@papilloneffect.com 5. END:VCARD

14. Hands-on: Something you can do tonight (cont'd) hCard, the markup: 1. <div class=&quot;vcard&quot;> 2. <span class=&quot;fn&quot;>Denise Jacobs </span> 3. <span class=&quot;email&quot;> 4. <span class=&quot;type&quot;>work</span> 5. <a class=&quot;value href=&quot;mailto:denise@papilloneffect.com&quot;>denise@papilloneffect.com</a> 6. </span> 7. </div>

15. Hands-on: Something you can do in upcoming months Your personal website(s)/ blog(s): add hCard to your contact info page along with an &quot;Add to address book&quot; link add hCard+XFN to your friends list or blog roll add your website and contact page to the hcard-examples-in-wild page. add hAtom to your blog pages

16. Hands-on: Something you can do in upcoming months Your company/organization’s website: add hCard to the contact/about pages along with &quot;Add to address book&quot; links for each hCard. If your company has a page listing employees or others that belong to the organization, add hCard to the listings or search results. Use hCalendar anywhere on the website that publishes event information. If your organization publishes its history, mark up the events noted with hCalendar, thus allowing anybody to build a dynamic timeline application with your history. Any publication of information about people, events, reviews etc. could benefit from being marked up with hCard, hCalendar, and hReview respectively.

17. Don't wait! Get in on the trend. &quot;...Do you just use your browser to browse? That's so 20th century.&quot; -- Mark Pilgrim

18. Questions? Anyone? Anyone? You can always contact me later if you need to: denise (at) denisejacobs (dot) com Or follow me on Twitter: @denisejacobs

19. Resources & Acknowledgements Michael Montgomery's Refresh presentation, October 2008: http://www.webstandardsforskeptics.com/microformats_29oct08.html Microformats.org: http:// microformats.org /get-started , http:// microformats.org/wiki/Main_Page Kevin Lawver’s presentation: http:// presentations.lawver.net/standards/power_of_microformats / Tantek Celik’s presentation: http://tantek.com/presentations/2006/03/what-are-microformats/ Ryan King’s presentations: , http://theryanking.com/presentations/2006/www/ Great overview article: http://www.smashingmagazine.com/2007/05/04/microformats-what-they-are-and-how-to-use-them/ Microformat-generating tools: http:// microformats.org /code-tools/