The Elements of Meaningful XHTML

Tantek Çelik Chief Technologist

"XHTML"

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

"Meaningful"

• 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 — Bowman
  • Why tables for layout is stupid — Merikallio & Pratt
  • informIT: The Meaning of Semantics — Holzschlag

Precisely Meaningful

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

Elements: simple contact info

• <address> element
• Perhaps most confusingly named HTML element
  • NOT for marking up literal "addresses" (per se)
• For:
  • contact information for a document...
  • ...or a major part of a document such as a form.

Elements: simple contact info

• <address> element

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

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>

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> 

Elements: blog quote

• <cite> & <blockquote> elements

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>

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>

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>

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>

Elements: correction / update

• <del> & <ins> elements

Elements: correction / update

• <del> & <ins> elements

<p> 
The robot uses a 
     radar-sensor
(correction: visual-sensor)
to navigate around the room.</p>

<p>
Update: Apparently it has
a stereo microphone as well.</p>

Elements: correction / update

• <del> & <ins> elements

<p> 
The robot uses a 
<del>radar-sensor</del>
<ins>visual-sensor</ins>
to navigate around the room.</p>
<ins>
<p>
Update: Apparently it has
a stereo microphone as well.</p>
</ins>

Elements: correction / update

• <del> & <ins> elements

<p> 
The robot uses a 
<del>radar-sensor</del>
<ins>visual-sensor</ins>
to navigate around the room.</p>
<ins>
<p>
Update: Apparently it has
a stereo microphone as well.</p>
</ins>

Elements: correction / update

• with a few style rules:

• 
  p ins,p del { display:inline }
  ins { text-decoration:underline }
  del { text-decoration:line-through }
  

• The robot uses a radar-sensor visual-sensor to navigate around the room.

  Update: Apparently it has a stereo microphone as well.

Elements: semantic table

Elements: semantic table

• 'axis' & 'headers' attributes
•  
•  

<table>
 <tr><th></th>
     <th                        >Guthrie</th>
     <th                        >MacFarlane</th></tr>
 <tr><th                    >1.30pm</th>
     <td                >Brett, John, David</td>
     <td                >Roger</td></tr>
 <tr><th                    >2.15pm</th>
     <td                >Dean</td>     
     <td                >Lisa, Peter</td></tr>
</table>

Elements: semantic table

• 'axis' & 'headers' attributes
• add 'id' and 'axis' to <th>s
•  

<table>
 <tr><th></th>
     <th id="gu" axis="location">Guthrie</th>
     <th id="mc" axis="location">MacFarlane</th></tr>
 <tr><th id="t1" axis="time">1.30pm</th>
     <td                >Brett, John, David</td>
     <td                >Roger</td></tr>
 <tr><th id="t2" axis="time">2.15pm</th>
     <td                >Dean</td>     
     <td                >Lisa, Peter</td></tr>
</table>

Elements: semantic table

• 'axis' & 'headers' attributes
• add 'id' and 'axis' to <th>s
• add 'headers' to <td>s

<table>
 <tr><th></th>
     <th id="gu" axis="location">Guthrie</th>
     <th id="mc" axis="location">MacFarlane</th></tr>
 <tr><th id="t1" axis="time">1.30pm</th>
     <td headers="gu t1">Brett, John, David</td>
     <td headers="mc t1">Roger</td></tr>
 <tr><th id="t2" axis="time">2.15pm</th>
     <td headers="gu t2">Dean</td>     
     <td headers="mc t2">Lisa, Peter</td></tr>
</table>

Elements: semantic table

• 'axis' & 'headers' attributes
• add 'id' and 'axis' to <th>s
• add 'headers' to <td>s

<table>
 <tr><th></th>
     <th id="gu" axis="location">Guthrie</th>
     <th id="mc" axis="location">MacFarlane</th></tr>
 <tr><th id="t1" axis="time">1.30pm</th>
     <td headers="gu t1">Brett, John, David</td>
     <td headers="mc t1">Roger</td></tr>
 <tr><th id="t2" axis="time">2.15pm</th>
     <td headers="gu t2">Dean</td>     
     <td headers="mc t2">Lisa, Peter</td></tr>
</table>

Elements: semantic table

• with a few style rules:

• 
  #t1,td[headers~=t1] { background:yellow }
  #mc,td[headers~=mc] { background:yellow }
  td[headers~=t1][headers~=mc] { background:#ffA500 }
  

Elements: semantic table

• with a few style rules:

• 
  #t1,td[headers~=t1] { background:yellow }
  #mc,td[headers~=mc] { background:yellow }
  td[headers~=t1][headers~=mc] { background:#ffA500 }
  

Elements: semantic table

Summary: 'axis' and 'headers' attributes:

• make semantic tables more semantic
• enable styling of semantic rows/columns
• help accessibility as well. see:
  • HTML Techniques for WCAG 1.0 for details
  • Facts and Opinions About PDF Accessibility by Joe Clark for documentation of screen reader support
• enable additional semantic uses...

XHTML Compounds

• Limited set of semantic XHTML elements & attributes
• Patterns of elements can express additional semantics
  • assembled like semantic "Lego blocks"
  • Many combinations to be explored
• Name for such semantic XHTML patterns
  • people have asked
  • chemistry analogy: elements and compounds
• Working definition:

  XHTML Compound

  Two or more XHTML Elements used in combination to express new, perhaps more specific, semantics.

Compounds: block of code

• white space is important
  • use <pre> element
• the text is code
  • use <code> element

Compounds: 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>

Compounds: 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>

Compounds: 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>

Compounds: 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.

Compounds: 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

Compounds: 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.

Compounds: 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.

Compounds: 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>

Compounds: 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>

Compounds: 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>

Compounds: bibliography

• A bibliography is:
• an alphabetically ordered list...
  • use <ol> and <li>
• ... of citations
  • use <cite>

Compounds: bibliography

• <ol><li> and <cite> combined

  "Colorimetry, Second Edition", CIE Publication 15.2-1986,
     ISBN 3-900-734-00-3.
  
  
  "Cascading Style Sheets, level 1", H. W. Lie, B. Bos, 
     17 December 1996.
  
  
  "Cascading Style Sheets, level 2, CSS2 Specification", 
     B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998

Compounds: bibliography

• <ol><li> and <cite> combined

     <cite>
  "Colorimetry, Second Edition", CIE Publication 15.2-1986,
     ISBN 3-900-734-00-3.
 </cite>
     <cite>
  "Cascading Style Sheets, level 1", H. W. Lie, B. Bos, 
     17 December 1996.
 </cite> 
     <cite>
  "Cascading Style Sheets, level 2, CSS2 Specification", 
     B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998
 </cite> 

Compounds: bibliography

• <ol><li> and <cite> combined

<ol class="bibliography">
 <li><cite>
  "Colorimetry, Second Edition", CIE Publication 15.2-1986,
     ISBN 3-900-734-00-3.
 </cite></li>
 <li><cite>
  "Cascading Style Sheets, level 1", H. W. Lie, B. Bos, 
     17 December 1996.
 </cite></li>
 <li><cite>
  "Cascading Style Sheets, level 2, CSS2 Specification", 
     B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998
 </cite></li>
</ol>

Compounds: bibliography

• <ol><li> and <cite> combined

<ol class="bibliography">
 <li><cite>
  "Colorimetry, Second Edition", CIE Publication 15.2-1986,
     ISBN 3-900-734-00-3.
 </cite></li>
 <li><cite>
  "Cascading Style Sheets, level 1", H. W. Lie, B. Bos, 
     17 December 1996.
 </cite></li>
 <li><cite>
  "Cascading Style Sheets, level 2, CSS2 Specification", 
     B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998
 </cite></li>
</ol>

Compounds: bibliography

• with style rules:

• ol.bibliography { list-style:none }
  .bibliography li { text-indent:-2em }
  

• 1. "Colorimetry, Second Edition", CIE Pub. 15.2-1986, ISBN 3-900-734-00-3.
  2. "Cascading Style Sheets, level 1", H. W. Lie, B. Bos, 17 December 1996.
  3. "Cascading Style Sheets, level 2, CSS2 Specification", B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998

Compounds: bibliography

• Bibliography example limitations
• Styling needed a class name — context insufficient
• Citations have more structure than <cite>
  • title, authors, date
  • XHTML lacks those building blocks

Meaningful class names

• When semantic XHTML elements aren't enough
  • try XHTML compounds
• When XHTML compounds aren't enough
  • use meaningful class names

Meaningful class names: ATOC

Key points:

• Classy detailing
  • detail additional semantics, e.g. subclass XHTML elements
• Context before class
• Class sensitivity
  • use lowercase dashed-words instead of camelCase
• Semantic classes instead of presentational classes
• For more, see essays:
  • A Touch Of Class
  • Competent Classing
  • Class for meaning, not for show

More Meaningful XHTML

• Understand the Elements
• Learn from XHTML Compounds discussions:
  • Web Standards Solutions, SimpleQuizzes by Cederholm
  • Usual suspects: Bowman, Holzschlag, Meyer, Shea, Zeldman, etc.
  • See Technorati Blog Directory: XHTML for many more.
• Experiment with new compounds
• Discuss with peers
• Learn from others' meaningful class names
• See you at Microformats: Evolving the Web

Thanks!

Colophon

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