The Elements of Meaningful XHTML

"XHTML"

• Today's Web
• HTML 4 and "compatible" XHTML 1.0
• Valid

For Meaning not Show

• Strict not Transitional
• Layout Tables
• Avoid <b> <br/> <i> <sub> <sup>
• <h1> != big and bold
• <em> != make this italic
• <blockquote> != indent this
• For more, see:
  • Throwing Tables Out the Window
  • Why tables for layout is stupid
  • Integrated Web Design: The Meaning of Semantics

Precisely Meaningful

• Goldilocks
• <div> & <span> last resort

XHTML Elements: simple contact info

• <address> element

XHTML Elements: simple contact info

• <address> element

<p>
 Please contact
          webmaster at example dot com
 if you find any problems with this site.
</p>

XHTML Elements: simple contact info

• <address> element

<p><div>
 Please contact
 <address>webmaster at example dot com</address>
 if you find any problems with this site.
</p></div>

XHTML Elements: simple contact info

• <address> element

<div>
 Please contact
 <address>webmaster at example dot com</address>
 if you find any problems with this site.
</div> 

XHTML Elements: Blog quote

• <cite> & <blockquote> elements

XHTML Elements: Blog quote

• <cite> & <blockquote> elements

<p>      Eric Meyer        wrote:</p>

<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.
</p>

<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

XHTML Elements: Blog quote

• <cite> & <blockquote> elements

<p><cite>Eric Meyer</cite> wrote:</p>
<blockquote>
<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.
</p>
</blockquote>
<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

XHTML Elements: Blog quote

• <cite> & <blockquote> elements

<p><cite>Eric Meyer</cite> wrote:</p>
<blockquote cite="http://meyerweb.../social-protocols/">
<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.
</p>
</blockquote>
<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

XHTML Elements: Blog quote

• <cite> & <blockquote> elements

<p><cite>Eric Meyer</cite> wrote:</p>
<blockquote cite="http://meyerweb.../social-protocols/">
<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.
</p>
</blockquote>
<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

XHTML Compound: Block of code

• <pre> and <code> combined

XHTML Compound: Block of code

• <pre> and <code> combined

<p>
Style the address tag to be inline and normal:
</p>
<p>
address { 
 display:inline;
 font-style:normal;
}
</p>

XHTML Compound: Block of code

• <pre> and <code> combined

<p>
Style the address tag to be inline and normal:
</p>
<p><pre><code>
address { 
 display:inline;
 font-style:normal;
}
</p></code></pre>

XHTML Compound: Block of code

• <pre> and <code> combined

<p>
Style the address tag to be inline and normal:
</p>
<pre><code>
address { 
 display:inline;
 font-style:normal;
}
</code></pre>

XHTML Compound: Conversation

          Costello
               Well then who's on first?
          Abbott
               Yes.
          Costello
               I mean the fellow's name.
          Abbott
               Who.
          Costello
               The guy on first.
          Abbott
               Who.

XHTML Compound: Conversation

<dl>
      <dt>Costello</dt>
           <dd>Well then who's on first?</dd>
      <dt>Abbott</dt>
           <dd>Yes.</dd>
      <dt>Costello</dt>
           <dd>I mean the fellow's name.</dd>
      <dt>Abbott</dt>
           <dd>Who.</dd>
      <dt>Costello</dt>
           <dd>The guy on first.</dd>
      <dt>Abbott</dt>
           <dd>Who.</dd>
</dl>

• Abuse! DLs are terms & descriptions
• But conversations are speakers & quotes

XHTML Compound: Conversation

          Costello
                Well then who's on first?
          Abbott
                Yes.
          Costello
                I mean the fellow's name.
          Abbott
                Who.
          Costello
                The guy on first.
          Abbott
                Who.

XHTML Compound: Conversation

    <cite>Costello</cite>
               Well then who's on first?
    <cite>Abbott</cite>
               Yes.
    <cite>Costello</cite>
               I mean the fellow's name.
    <cite>Abbott</cite>
               Who.
    <cite>Costello</cite>
               The guy on first.
    <cite>Abbott</cite>
               Who.

XHTML Compound: Conversation

    <cite>Costello</cite>
<blockquote><p>Well then who's on first?</p></blockquote>
    <cite>Abbott</cite>
<blockquote><p>Yes.</p></blockquote>
    <cite>Costello</cite>
<blockquote><p>I mean the fellow's name.</p></blockquote>
    <cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote>
    <cite>Costello</cite>
<blockquote><p>The guy on first.</p></blockquote>
    <cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote>

XHTML Compound: Conversation

<ol>
<li><cite>Costello</cite>
<blockquote><p>Well then who's on first?</p></blockquote></li>
<li><cite>Abbott</cite>
<blockquote><p>Yes.</p></blockquote></li>
<li><cite>Costello</cite>
<blockquote><p>I mean the fellow's name.</p></blockquote></li>
<li><cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote></li>
<li><cite>Costello</cite>
<blockquote><p>The guy on first.</p></blockquote></li>
<li><cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote></li>
</ol>

XHTML Compound: Conversation

<ol>
<li><cite>Costello</cite>
<blockquote><p>Well then who's on first?</p></blockquote></li>
<li><cite>Abbott</cite>
<blockquote><p>Yes.</p></blockquote></li>
<li><cite>Costello</cite>
<blockquote><p>I mean the fellow's name.</p></blockquote></li>
<li><cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote></li>
<li><cite>Costello</cite>
<blockquote><p>The guy on first.</p></blockquote></li>
<li><cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote></li>
</ol>

More XHTML Compounds

1. Understand the Elements
2. Read:
   • Web Standards Solutions by Dan Cederholm
   • and his SimpleQuizzes
3. Try Mixing Experiments
4. Peer Discussions

Extend XHTML. Why?

• Limited elements
• Limited compounds
• New / precise semantics
• Stylable!
• "lowercase semantic web"

What can you extend in (X)HTML?

• class

  The class attribute has several roles in HTML: ...

  • For general purpose processing by user agents.

• meta

  For the [name, content] attributes, the permitted values and their interpretation are profile dependent...

• rel and profile

  Authors may wish to define additional link types not described in this specification. If they do so, they should use a profile...

How should you extend XHTML?

• Avoid
• Methodology
• Peer review

Microformats Methodology

• solve a specific problem
• evolutionary improvements
• as simple as possible
• adapt to current behaviors
• presentable and parsable
• reuse rather than reinvent
• modularity / embeddability
• decentralized development, content, services

Microformats Design Principles

• build on (X)HTML
• design for humans first, machines second
• reuse the schemas from well-supported standards
• reuse semantic XHTML building blocks
• use class names when necessary

Microformats Foundation: XMDP

• XHTML Meta Data Profiles
• use XHTML to extend itself!
• dictionary of properties
• dictionary of values
• define new class, meta, rel values
• reference with <head profile="">

Microformat: linked license

• Analogy: linked stylesheet
• New rel value: "license"

Microformat: linked license

         http://creativecommons.org/licenses/by/2.0/
         Some rights reserved. CC by-2.0.

Microformat: linked license

<a 
   href="http://creativecommons.org/licenses/by/2.0/">
         Some rights reserved. CC by-2.0.
</a>

Microformat: linked license

<a rel="license"
   href="http://creativecommons.org/licenses/by/2.0/">
         Some rights reserved. CC by-2.0.
</a>

Microformat: linked license

<a rel="license"
   href="http://creativecommons.org/licenses/by/2.0/">
         Some rights reserved. CC by-2.0.
</a>

Microformat: linked license profile

           rel
           
              license
          Indicates that the referred resource 
          is a license for the referring page.

Microformat: linked license profile

           rel
     <dl>
      <dt id="license">license</dt>
      <dd>Indicates that the referred resource 
          is a license for the referring page.</dd>
 </dl>

Microformat: linked license profile

<dl class="profile">
 <dt id="rel">rel</dt>
 <dd><dl>
      <dt id="license">license</dt>
      <dd>Indicates that the referred resource 
          is a license for the referring page.</dd>
 </dl></dd>
</dl>

Microformat: linked license profile

<dl class="profile">
 <dt id="rel">rel</dt>
 <dd><dl>
      <dt id="license">license</dt>
      <dd>Indicates that the referred resource 
          is a license for the referring page.</dd>
 </dl></dd>
</dl>

Microformat: social relationships

• People are URLs
• Blogrolls are a social network
• * = met
• XFN - XHTML Friends Network

• 
  <a rel="met friend"
     href="http://jeff.example.com/blog/">Jeffrey</a>
  

Microformat: people

• Established format: vCard (IETF RFC2426)
• Reuse properties, values, schema
• 1:1 in XHTML
• hCard

Microformat: people

• hCard example

<address class="vcard"> 
 <a class="url fn n" href="http://tantek.com/">
  <span class="given-name">Tantek</span> 
  <span class="family-name">Çelik</span>
 </a>
 <span class="title">Senior Technologist</span>
 <a class="org" href="http://technorati.com">Technorati</a>
</address>

Microformat: events

• Established format: iCalendar (IETF RFC2445)
• Reuse properties, values, schema
• 1:1 in XHTML
• hCalendar

Microformat: events

• hCalendar example

<ol class="vcalendar">
 <li class="vevent">
  <a href="http://2005.sxsw.com/i...&id=IAP0080" 
     class="url">
   <span class="summary">The Elements of Meaningful XHTML</span
   <abbr class="dtstart" title="20050313T1530-0600">
    March 13, 2005
   </abbr>
  ></a>
 </li>
</ol>

Microformat: outlines

• XOXO - eXtensible Open XHTML Outlines

     topic 1
         point A
         point B
     topic 2
         point C

Microformat: outlines

• XOXO - eXtensible Open XHTML Outlines

<ol>
 <li>topic 1
 <ol><li>point A</li>
     <li>point B</li></ol></li>
 <li>topic 2
 <ol><li>point C</li></ol></li>
</ol>

Microformat: outlines

• XOXO - eXtensible Open XHTML Outlines

<ol class="xoxo">
 <li>topic 1
 <ol><li>point A</li>
     <li>point B</li></ol></li>
 <li>topic 2
 <ol><li>point C</li></ol></li>
</ol>

Microformat: outlines

• XOXO - eXtensible Open XHTML Outlines

<ol class="xoxo">
 <li>topic 1
 <ol><li>point A</li>
     <li>point B</li></ol></li>
 <li>topic 2
 <ol><li>point C</li></ol></li>
</ol>

Microformat: presentations

• a presentation is an outline
• reuse XOXO
• as slides
  • class="slide"
• in a presentation
  • class="presentation"
• S5+XOXO

Microformat: presentations

• S5+XOXO

• 
  <ol class="xoxo presentation">
   <li class="slide">topic 1
   <ol><li>point A</li>
       <li>point B</li></ol></li>
   <li class="slide">topic 2
   <ol><li>point C</li></ol></li>
  </ol>
  

• You've just experienced it.
• http://tantek.com/presentations/2005/03/elementsofxhtml

Colophon

• XHTML
• CSS
• S5 v1.1b5xoxo
• XOXO
• hCard
• hCalendar
• rel="license"
• Some rights reserved. CC by-2.0