語義網、新標籤、新表單

1. HTML5 The Missing Part
othree

2. Outline
• Semantic Web
• HTML5
• Web Forms 2.0

3. Semantic Web
• Tim Bernes Lee

4. What is Semantic Web
•

5. So
•

7. How ?
• XML for data
• (X)HTML for web content

8. (X)HTML Standards
• HTML 4.01: Still using today
• XHTML 1: Bridge between HTML and XML
• XHTML 1.1: Preparing for Semantic Web
• XHTML 2.0 ( )

9. XHTML 2.0
•
•
• ex: no <h1> ~ <h6>, <br>

11. How ?
•
• <table> for not
• <p> for
• <h1> ~ <h6> for not
• <blockquote> for not
• <b>, <i>, <u>, <big>, <small>

12. http://www.certifiedchinesetranslation.com/openaccess/rdfa-primer.html

13. 2nd Step
• RDFa, Microformats ... etc

14. HTML
<div>
Bob Smith
Smithy
<a href="http://www.example.com">www.example.com</a>.
Albuquerque (NM) ACME Corp.
</div>
http://www.google.com/support/webmasters/bin/topic.py?topic=21997

15. vCard
BEGIN:VCARD
VERSION:3.0
N:Bob Smith
FN:Bob Smith
NICKNAME:Smithy
URL: http://www.example.com
TITLE:
ORG:ACME Corp
ADR;TYPE=work:;;;Albuquerque;NM;;
END:VCARD
http://www.google.com/support/webmasters/bin/topic.py?topic=21997

16. RDFa
<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
<span property="v:name">Bob Smith</span>
<span property="v:nickname">Smithy</span>
<a href="http://www.example.com" rel="v:url">www.example.com</a>.
Albuquerque (NM) <span property="v:affiliation">ACME
Corp</span>.
<span property="v:title"> </span>
</div>
http://www.google.com/support/webmasters/bin/topic.py?topic=21997

17. Microformats
<div class="vcard">
<span class="fn">Bob Smith</span>
<span class="nickname">Smithy</span>
<a href="http://www.example.com" class="url">www.example.com</a>.
Albuquerque (NM) <span class="org">ACME Corp</span>.
<span class="title"> </span>
</div>
http://www.google.com/support/webmasters/bin/topic.py?topic=21997

18. Microformats
hCalendar
hCard
rel-license
rel-nofollow
rel-tag
XFN
XOXO
...

19. Benefits
• (Accessibility)
• SEO
•
•

20. HTML Standards
• HTML 4.01: Still using today
• XHTML 1: Bridge between HTML and XML
• XHTML 1.1: Preparing for Semantic Web
• XHTML 2.0 ( )
• (X)HTML5 by WHATWG

21. HTML5 New Elements

22. New Structure Elements
<header>
<footer>
<nav>
<aside>
<article>
<hgroup>
<section>

23. A Web Page
<div id=”header”></div>
<ul id=”navigator”></ul>
<div id=”sidebar”>
<div id=”content”></div> </div>
<div id=”footer”></div>

24. A Web Page in HTML5
<header></header>
<nav></nav>
<aside>
<div id=”content”></div> </aside>
<footer></footer>

25. Structure Elements
• <header>
• <footer>
• <aside>
• <nav>

26. Weblog Index
<div class=”entry”></div>
<div class=”entry”></div>
<div class=”entry”></div>

27. Weblog Index
<article></article>
<article></article>
<article></article>

28. <article>
•
•
•
•
• ...etc

29. An Article
<h1></h1>
<p></p>
<h2></h2>
<p></p>
<h2></h2>
<p></p>

30. An Article
<h1></h1>
<p></p>
<section>
<h2></h2>
<p></p>
<h2></h2>
<p></p>
</section>

31. <hgroup>
<hgroup>
<h1>My Weblog</h1>
<h2 class="tagline">A lot of effort went into making this effortless.</h2>
</hgroup>
<div class="entry">
<h2>Travel day</h2>
</div>
<div class="entry">
<h2>I'm going to Prague!</h2>
</div>
http://diveintohtml5.org/semantics.html

32. Outline
• My Weblog
• Travel day
• I'm going to Prague!
http://diveintohtml5.org/semantics.html

33. Site Title and Article Title
<h1>My Weblog</h1>
<h2 class="tagline">A lot of effort went into making this effortless.</h2>
<div class="entry">
<h2>Travel day</h2>
</div>
<div class="entry">
<h2>I'm going to Prague!</h2>
</div>
http://diveintohtml5.org/semantics.html

34. Outline
• My Weblog
• A lot of effort went into making this effortless
• Travel day
• I'm going to Prague!
http://diveintohtml5.org/semantics.html

35. Mixin
• Is <article> in <article> valid ?
• Is <article> in <section> valid ?
• How about <header> in <article> ?

36. Yes
<article>
<header>
<h1>The Very First Rule of Life</h1>
<p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
</header>
<p>If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</p>
<p>...</p>
<section>
<h1>Comments</h1>
<article>
<footer>
<p>Posted by: George Washington</p>
<p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
</footer>
<p>Yeah! Especially when talking about your lobbyist friends!</p>
</article>
</section>
</article>
http://dev.w3.org/html5/spec/sections.html#the-article-element

37. <article>
<header>
<h1>Title</h1>
<p><time pubdate></p>
</header>
<p>Centent</p>
<section>
<h1>Comments</h1>
<article>
<footer>
<p>Posted by</p>
<p><time pubdate></p>
</footer>
<p></p>
</article>
</section>
</article>

38. New Elements
<figure>
<figcaption>

39. for
http://html5doctor.com/the-figure-figcaption-elements/

40. Actually for
• Everything
• image
• code
• blockquote
• video
• ...etc

41. Examples
<figure>
<img src="bubbles-work.jpeg"
alt="Bubbles, sitting in his office chair, works on his
latest project intently.">
<figcaption>Bubbles at work</figcaption>
</figure>
http://dev.w3.org/html5/spec/grouping-content.html#the-figure-element

42. Examples
<figure>
<p>'Twas brillig, and the slithy toves<br>
Did gyre and gimble in the wabe;<br>
All mimsy were the borogoves,<br>
And the mome raths outgrabe.</p>
<figcaption><cite>Jabberwocky</cite> (first verse).
Lewis Carroll, 1832-98</figcaption>
</figure>
http://dev.w3.org/html5/spec/grouping-content.html#the-figure-element

43. And...
<audio>
<video>
<canvas>
<embed>

44. <dialog>
• dropped !

45. New Inline Elements
<b>, <i>, <small>
<ruby>, <rt>, <rp>
<mark>
<time>
<a>

46. b, i, small redefine
• <b> for typographic presentation is boldened
• <i> for alternate voice or mood
• <small> for small print

47. <ruby>
not on Rails

49. Ruby Markup
<ruby>
<rt> </rt>
<rt> </rt>
</ruby>
http://dev.w3.org/html5/spec/text-level-semantics.html#the-ruby-element

50. <rp>
<ruby>
<rp>(</rp><rt> </rt><rp>)</rp>
<rp>(</rp><rt> </rt><rp>)</rp>
</ruby>
( ) ( )
http://dev.w3.org/html5/spec/text-level-semantics.html#the-rp-element

51. <mark>

52. mark usage
•
•
• highlight
• ...etc

53. Example
<p lang="en-US">Consider the following quote:</p>
<blockquote lang="en-GB">
<p>Look around and you will find, no-one's really
<mark>colour</mark> blind.</p>
</blockquote>
<p lang="en-US">As we can tell from the <em>spelling</em> of the word,
the person writing this quote is clearly not American.</p>
http://dev.w3.org/html5/spec/text-level-semantics.html#the-mark-element

54. <time>

55. Example
<time datetime="2006-09-23">a Saturday</time>
<time pubdate datetime="2009-08-30">today</time>
http://dev.w3.org/html5/spec/text-level-semantics.html#the-time-element

56. Annoying pubdate
• without pubdate : just a time
• with pubdate : page publish time
• with pubdate and inside an <article> :
article’s publish time

57. <a>
• block level link howto ?
• XHTML 2 :
• href is global level attribute
• HTML5 ?

58. Block Level Link in HTML5
<a href="http://blog.othree.net">
<p>I'm block. But I always try to be a link too.</p>
<p>me too.</p>
</a>
a{
display: block;
}

59. Content Models
http://dev.w3.org/html5/spec/content-models.html#flow-content

60. Microdata

61. Remember Microformats ?
<div class="vcard">
<span class="fn">Bob Smith</span>
<span class="nickname">Smithy</span>
<a href="http://www.example.com" class="url">www.example.com</a>.
Albuquerque (NM) <span class="org">ACME Corp</span>.
<span class="title"> </span>
</div>
http://www.google.com/support/webmasters/bin/topic.py?topic=21997

62. Microdata
<div itemscope itemtype="http://data-vocabulary.org/Person">
<span itemprop="name">Bob Smith</span>
<span itemprop="nickname">Smithy</span>.
<a href="http://www.example.com" itemprop="url">www.example.com</a>
Albuquerque (NM) <span itemprop="title"> </span>
<span itemprop="affiliation">ACME Corp</span>
</div>
http://www.google.com/support/webmasters/bin/topic.py?topic=21997

63. attributes
• itemscope :
• itemtype :
• itemprop :

64. APIs
• document . getItems( [ types ] )
• element . properties
• element . itemValue [ = value ]
http://www.w3.org/TR/2010/WD-microdata-20100624/#microdata-dom-api

65. No Browser Supports Now

66. Web Forms 2.0

67. Where is 1.0 ?

68. HTML 4.01 Spec
http://www.w3.org/TR/html401/

69. What’s New
• New Input Types
• New Attributes
• Form Validation

70. New Input Types
url
email
tel
number
range
color
date

71. <input type="datetime" />
<input type="number" min="99" max="101"/>
<input type="email" placeholder="foo@bar.com" />

72. DEMO
http://miketaylr.com/pres/html5/forms2.html

73. And One More Type
search

74. New Form Elements
<output>
<datalist>

75. <output>
<form>
<input name=a type=number step=any> +
<input name=b type=number step=any> =
<output onforminput="value = a.valueAsNumber +
b.valueAsNumber"></output>
</form>
http://dev.w3.org/html5/spec/the-button-element.html#the-output-element

76. <datalist>
<input type="search" autofocus list="search-suggestions"/>
<datalist id="search-suggestions">
<option label="DM" value="Depeche Mode">
<option label="Moz" value="Morrissey">
<option label="NO" value="New Order">
<option label="TC" value="The Cure">
</datalist>
http://miketaylr.com/pres/html5/forms2.html

77. New Attributes
• autofocus: auto focus
• autocomplete: browser’s auto complete
• placeholder: short hint
• multiple for [type=file]: upload multiple file

78. Validation
• support new input types
• pattern attribute for <input>
• novalidate attribute for <form>

79. Opera Supports
http://www.opera.com/docs/specs/presto26/

80. <datagrid>
• dropped !

81. Q&A