1. The Elements of Meaningful XHTML

    Tantek Çelik Senior Technologist Technorati
  2. "XHTML"

  3. For Meaning not Show

  4. Precisely Meaningful

  5. XHTML Elements: simple contact info

  6. XHTML Elements: simple contact info

    
    <p>
     Please contact
              webmaster at example dot com
     if you find any problems with this site.
    </p>
    
  7. XHTML 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>
    
  8. XHTML Elements: simple contact info

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

  10. XHTML 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>
    
  11. XHTML 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>
    
  12. XHTML 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>
    
  13. XHTML 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. XHTML Compound: Block of code

  15. XHTML Compound: Block of code

    
    <p>
    Style the address tag to be inline and normal:
    </p>
    <p>
    address { 
     display:inline;
     font-style:normal;
    }
    </p>
    
  16. XHTML Compound: 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>
    
  17. XHTML Compound: Block of code

    
    <p>
    Style the address tag to be inline and normal:
    </p>
    <pre><code>
    address { 
     display:inline;
     font-style:normal;
    }
    </code></pre>
    
  18. 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.
    
    
  19. 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>
    
  20. 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.
    
    
  21. 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.
    
    
  22. 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>
    
    
  23. 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>
    
  24. 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>
    
  25. More XHTML Compounds

    1. Understand the Elements
    2. Read:
    3. Try Mixing Experiments
    4. Peer Discussions
  26. Extend XHTML. Why?

  27. What can you extend in (X)HTML?

  28. How should you extend XHTML?

  29. Microformats Methodology

  30. Microformats Design Principles

  31. Microformats Foundation: XMDP

  32. Microformat: linked license

  33. Microformat: linked license

    
    
             http://creativecommons.org/licenses/by/2.0/
             Some rights reserved. CC by-2.0.
    
    
  34. Microformat: linked license

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

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

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

    
    
               rel
               
                  license
              Indicates that the referred resource 
              is a license for the referring page.
    
    
    
  38. 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>
    
    
  39. 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>
    
  40. 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>
    
  41. Microformat: social relationships

  42. Microformat: people

  43. Microformat: people

    
    <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>
    
  44. Microformat: events

  45. Microformat: events

    
    <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>
    
  46. Microformat: outlines

    
    
         topic 1
             point A
             point B
         topic 2
             point C
    
    
    
  47. Microformat: 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>
    
  48. Microformat: 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>
    
  49. Microformat: 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>
    
  50. Microformat: presentations

  51. Microformat: presentations

  52. Colophon