TOSSUG HTML5 讀書會 新標籤與表單
14 likes1,255 views
The document discusses new features in HTML5 including semantic elements, form elements, and microdata. Some key points: 1. HTML5 introduces new semantic elements like <header>, <footer>, <nav>, <article>, and <section> to define different parts of a page and improve semantics and accessibility. 2. New form input types are added like email, url, tel, number, date to support validation and new UI widgets. Attributes like placeholder, autofocus, and autocomplete improve the form experience. 3. Microdata builds on microformats to embed structured data using attributes like itemscope, itemtype, and itemprop to identify items, properties and values for search engines and APIs
![APIs
• document . getItems( [ types ] )
• element . properties
• element . itemValue [ = value ]
http://www.w3.org/TR/2010/WD-microdata-20100624/#microdata-dom-api](https://image.slidesharecdn.com/tossughtml5-100720105527-phpapp02/85/TOSSUG-HTML5-64-320.jpg)
![New Attributes
• autofocus: auto focus
• autocomplete: browser’s auto complete
• placeholder: short hint
• multiple for [type=file]: upload multiple file](https://image.slidesharecdn.com/tossughtml5-100720105527-phpapp02/85/TOSSUG-HTML5-77-320.jpg)
TOSSUG HTML5 讀書會 新標籤與表單
- 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>
- 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
- 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>
- 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>
- 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
- 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
- 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; }
- 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" />
- 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>
- 81. Q&A