1. The Elements of Meaningful XHTML

    Tantek Çelik Senior Technologist Technorati

  2. "XHTML"

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

  3. For Meaning not Show

  4. Precisely Meaningful

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

  5. XHTML Elements: simple contact info

    • <address> element

  6. XHTML Elements: simple contact info

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

  7. 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> (追記ここまで)

  8. 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>

  9. XHTML Elements: Blog quote

    • <cite> & <blockquote> elements

  10. 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>

  11. 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>

  12. 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>

  13. 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>

  14. XHTML Compound: Block of code

    • <pre> and <code> combined

  15. 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>

  16. 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>

  17. 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>

  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>
    • Abuse! DLs are terms & descriptions
    • But conversations are speakers & quotes

  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?

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

  27. 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...

  28. How should you extend XHTML?

    • Avoid
    • Methodology
    • Peer review

  29. 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

  30. 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

  31. 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="">

  32. Microformat: linked license

    • Analogy: linked stylesheet
    • New rel value: "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

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

  42. Microformat: people

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

  43. 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>

  44. Microformat: events

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

  45. 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>

  46. Microformat: outlines

    • XOXO - eXtensible Open XHTML Outlines
    
 topic 1
 point A
 point B
 topic 2
 point C

  47. 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>

  48. 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>

  49. 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>

  50. Microformat: presentations

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

  51. Microformat: presentations

  52. Colophon

AltStyle によって変換されたページ (->オリジナル) /