Microformats are Very Semantic HTML

Scott Reynen

The Integer Group

What Does “Semantic HTML” Mean?

What Does “Semantic HTML” Mean?

<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?

<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?

<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?

<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?

<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?

Why Do We Need Microformats?

Why Do We Need Microformats?

Why Do We Need Microformats?

Why Do We Need Microformats?

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

Where Do Microformats Come From?

Organization Document Existing Practice Promote New Practice
Dictionary Always Never
W3C Only when necessary Whenever possible
Microformats.org Whenever possible Only when necessary

“Paving the cowpaths”

What Are the Current Microformats?

What Are the Current Microformats?

Summary

Text

Summary

Text → HTML

Summary

Text → HTML → Semantic HTML

Summary

Text → HTML → Semantic HTML → Microformats

Questions?