Microformats are Very Semantic HTML

Scott Reynen

The Integer Group

What Does “Semantic HTML” Mean?

• “Meaningful semantics” is redundant
• Example of semantic HTML:

What Does “Semantic HTML” Mean?

• “Meaningful semantics” is redundant
• Example of semantic HTML:

<div class="slide">
  <h1>What does &#8220;semantic HTML&#8221; mean?</h1>
  <ul class="incremental">
    <li>&#8220;Meaningful semantics&#8221; is redundant</li>
    <li>Example of semantic HTML:</li>
  </ul>
</div>
		

What Does “Semantic HTML” Mean?

• “Meaningful semantics” is redundant
• Example of semantic HTML:

<div class="slide">
  <h1>What does &#8220;semantic HTML&#8221; mean?</h1>
  <ul class="incremental">
    <li>&#8220;Meaningful semantics&#8221; is redundant</li>
    <li>Example of semantic HTML:</li>
  </ul>
</div>
		

What Does “Semantic HTML” Mean?

• “Meaningful semantics” is redundant
• Example of semantic HTML:

<div class="slide">
  <h1>What does &#8220;semantic HTML&#8221; mean?</h1>
  <ul class="incremental">
    <li>&#8220;Meaningful semantics&#8221; is redundant</li>
    <li>Example of semantic HTML:</li>
  </ul>
</div>
		

What Does “Semantic HTML” Mean?

• “Meaningful semantics” is redundant
• Example of semantic HTML:

<div class="slide">
  <h1>What does &#8220;semantic HTML&#8221; mean?</h1>
  <ul class="incremental">
    <li>&#8220;Meaningful semantics&#8221; is redundant</li>
    <li>Example of semantic HTML:</li>
  </ul>
</div>
		

What Does “Semantic HTML” Mean?

• “Meaningful semantics” is redundant
• Example of semantic HTML:

<div class="slide">
  <h1>What does &#8220;semantic HTML&#8221; mean?</h1>
  <ul class="incremental">
    <li>&#8220;Meaningful semantics&#8221; is redundant</li>
    <li>Example of semantic HTML:</li>
  </ul>
</div>
		

Why Do We Need Semantic HTML?

• Computers are dumb
• HTML helps computers help people
• Semantic HTML helps computers help people better

Why Do We Need Microformats?

• Semantic HTML is limited
• Example: party at my place

Why Do We Need Microformats?

• Semantic HTML is limited
• Example: party at my place
• My address as text:

  Scott Reynen
  844 16th St.
  Des Moines, IA 50314

Why Do We Need Microformats?

• Semantic HTML is limited
• Example: party at my place
• My address as text:

  Scott Reynen
  844 16th St.
  Des Moines, IA 50314

• My address as HTML:

  <p>Scott Reynen<br />
  844 16th St.<br />
  Des Moines, IA 50314</p>

Why Do We Need Microformats?

• Semantic HTML is limited
• Example: party at my place
• My address as text:

  Scott Reynen
  844 16th St.
  Des Moines, IA 50314

• My address as HTML:

  <p>Scott Reynen<br />
  844 16th St.<br />
  Des Moines, IA 50314</p>

• My address as semantic HTML:

  <address>Scott Reynen<br />
  844 16th <abbr title="Street">St.</abbr><br />
  Des Moines, <abbr title="Iowa">IA</abbr> 50314</address>

My Address as a Microformat

<address class="vcard">
  <span class="fn">
    <span class="given-name">Scott</span>
    <span class="family-name">Reynen</span>
  </span><br />
  <span class="adr">
    <span class="street-address">844 16th 
      <abbr title="Street">St.</abbr>
    </span><br />
    <span class="locality">Des Moines</span>, 
    <abbr title="Iowa" class="region">IA</abbr>
    <span class="postal-code">50314</span>
  </span>
</address>

My Address as a Microformat

<address class="vcard">
  <span class="fn">
    <span class="given-name">Scott</span>
    <span class="family-name">Reynen</span>
  </span><br />
  <span class="adr">
    <span class="street-address">844 16th 
      <abbr title="Street">St.</abbr>
    </span><br />
    <span class="locality">Des Moines</span>, 
    <abbr title="Iowa" class="region">IA</abbr>
    <span class="postal-code">50314</span>
  </span>
</address>

My Address as a Microformat

<address class="vcard">
  <span class="fn">
    <span class="given-name">Scott</span>
    <span class="family-name">Reynen</span>
  </span><br />
  <span class="adr">
    <span class="street-address">844 16th 
      <abbr title="Street">St.</abbr>
    </span><br />
    <span class="locality">Des Moines</span>, 
    <abbr title="Iowa" class="region">IA</abbr>
    <span class="postal-code">50314</span>
  </span>
</address>

This helps computers help people better. A map is better than a text address.

Microformats are Classy

• Few opportunities to extend meaningfulness of HTML
  • class="" — what it is
  • rel="" — how it relates
  • href="" — where it is
• Beyond this, HTML is dumb

Where Do Microformats Come From?

“Paving the cowpaths”

What Are the Current Microformats?

• Specs:
  • Contacts: hCard
  • Events: hCalendar
  • Social Networks: XFN
  • Licenses: rel-license
  • Tags: rel-tag
  • Outlines: XOXO

What Are the Current Microformats?

• Drafts:
  • Opinions: hReview
  • Blogs: hAtom
  • Resumes: hResume
• In progress:
  • Classified Listings
  • Citations
  • Currency
  • Discussions
  • Media Info
  • Recipes
  • ...

Summary

Text

Summary

Text → HTML

Summary

Text → HTML → Semantic HTML

Summary

Text → HTML → Semantic HTML → Microformats

Questions?