1. The Elements of Meaningful XHTML

    Tantek Çelik Chief Technologist Technorati
  2. (cc) Creative Commons BY
  3. "XHTML"

  4. "Meaningful"

  5. Precisely Meaningful

  6. Elements: simple contact info

  7. Elements: simple contact info

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

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

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

  11. Elements: blog quote

    
    <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>
    
  12. Elements: blog quote

    
    <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>
    
  13. Elements: blog quote

    
    <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>
    
  14. Elements: blog quote

    
    <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>
    
  15. Elements: correction / update

  16. Elements: correction / update

    
    <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>
    
  17. Elements: correction / update

    
    <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>
    
  18. Elements: correction / update

    
    <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>
    
  19. Elements: correction / update

  20. Elements: semantic table

    Guthrie MacFarlane
    1.30pm Brett, John, David Roger
    2.15pm Dean Lisa, Peter
  21. Elements: semantic table

    
    <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>
    
  22. Elements: semantic table

    
    <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>
    
  23. Elements: semantic table

    
    <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>
    
  24. Elements: semantic table

    
    <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>
    
  25. Elements: semantic table

  26. Elements: semantic table

    Guthrie MacFarlane
    1.30pm Brett, John, David Roger
    2.15pm Dean Lisa, Peter
  27. Elements: semantic table

    Summary: 'axis' and 'headers' attributes:

    Check out the "Microformats Evolution" presentation for more uses of axis and headers.
  28. XHTML Compounds

  29. Compounds: block of code

  30. Compounds: block of code

    
    <p>
    Style the address tag to be inline and normal:
    </p>
    <p>
    address { 
     display:inline;
     font-style:normal;
    }
    </p>
    
  31. Compounds: block of code

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

    
    <p>
    Style the address tag to be inline and normal:
    </p>
    <pre><code>
    address { 
     display:inline;
     font-style:normal;
    }
    </code></pre>
    
  33. 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.
    
    
  34. 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>
    
  35. 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.
    
    
  36. 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.
    
    
  37. 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>
    
    
  38. 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>
    
  39. 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>
    
  40. Compounds: bibliography

  41. Compounds: bibliography

    
    
      "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
    
  42. Compounds: bibliography

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

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

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

  46. Compounds: bibliography

  47. Meaningful class names

  48. Meaningful class names: ATOC

    Key points:

  49. More Meaningful XHTML

  50. Thanks!

    Question & Answer
  51. Colophon