Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

HTML5 The Missing Part

othree
September 26, 2011

HTML5 The Missing Part

TOSSUG HTML5 Meetup

othree

September 26, 2011
Tweet

More Decks by othree

Other Decks in Programming

Transcript

  1. (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 (ᄻ૝)
  2. How ? • ͍ᆽٙԴ͜ᅺᜀ • <table> for ڌࣸ༟ࣘ not રو

    • <p> for ݬໝ • <h1> ~ <h6> for ᅺᕚ not ɽο᜗ • <blockquote> for ˏԊ not ᐵર • ʔԴ͜ <b>, <i>, <u>, <big>, <small>
  3. HTML <div> Ң݊ Bob Smithd ʔཀ؃ʾே̣Ң Smithyf ˸ɨ݊Ңٙ࠯ࠫၣѧj <a href="http://www.example.com">www.example.com</a>.

    ҢИί Albuquerque (NM)dͦۃ؂ਕ׵ACME Corp.d ዄ΂ʈ೻ࢪɓᔖf </div> http://www.google.com/support/webmasters/bin/topic.py?topic=21997
  4. 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
  5. RDFa <div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person"> Ң݊ <span property="v:name">Bob Smith</span>d ʔཀ؃ʾே̣Ң <span

    property="v:nickname">Smithy</span>f ˸ɨ݊Ңٙ࠯ࠫၣѧj <a href="http://www.example.com" rel="v:url">www.example.com</a>. ҢИί Albuquerque (NM)dͦۃ؂ਕ׵ <span property="v:affiliation">ACME Corp</span>.d ዄ΂<span property="v:title">ʈ೻ࢪ</span>ɓᔖf </div> http://www.google.com/support/webmasters/bin/topic.py?topic=21997
  6. Microformats <div class="vcard"> Ң݊ <span class="fn">Bob Smith</span>d ʔཀ؃ʾே̣Ң <span class="nickname">Smithy</span>f

    ˸ɨ݊Ңٙ࠯ࠫၣѧj <a href="http://www.example.com" class="url">www.example.com</a>. ҢИί Albuquerque (NM)dͦۃ؂ਕ׵ <span class="org">ACME Corp</span>.d ዄ΂<span class="title">ʈ೻ࢪ</span>ɓᔖf </div> http://www.google.com/support/webmasters/bin/topic.py?topic=21997
  7. 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
  8. <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
  9. Outline • My Weblog • Travel day • I'm going

    to Prague! http://diveintohtml5.org/semantics.html
  10. 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
  11. Outline • My Weblog • A lot of effort went

    into making this effortless • Travel day • I'm going to Prague! http://diveintohtml5.org/semantics.html
  12. Mixin • Is <article> in <article> valid ? • Is

    <article> in <section> valid ? • How about <header> in <article> ?
  13. 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
  14. <article> </article> <header> </header> <p>Centent</p> <section> </section> <h1>Title</h1> <p><time pubdate></p>

    <h1>Comments</h1> <article> </article> <footer> </footer> <p></p> <p>Posted by</p> <p><time pubdate></p>
  15. 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
  16. 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
  17. b, i, small redefine • <b> for typographic presentation is

    boldened • <i> for alternate voice or mood • <small> for small print
  18. Ruby Markup <ruby> ဏ <rt> 㗋㘓 </rt> ο <rt> 㗘c

    </rt> </ruby> http://dev.w3.org/html5/spec/text-level-semantics.html#the-ruby-element
  19. <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
  20. 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
  21. Annoying pubdate • without pubdate : just a time •

    with pubdate : page publish time • with pubdate and inside an <article> : article’s publish time
  22. <a> • block level link howto ? • XHTML 2

    : • href is global level attribute • HTML5 ?
  23. 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; }
  24. Remember Microformats ? <div class="vcard"> Ң݊ <span class="fn">Bob Smith</span>d ʔཀ؃ʾே̣Ң

    <span class="nickname">Smithy</span>f ˸ɨ݊Ңٙ࠯ࠫၣѧj <a href="http://www.example.com" class="url">www.example.com</a>. ҢИί Albuquerque (NM)dͦۃ؂ਕ׵ <span class="org">ACME Corp</span>.d ዄ΂<span class="title">ʈ೻ࢪ</span>ɓᔖf </div> http://www.google.com/support/webmasters/bin/topic.py?topic=21997
  25. Microdata <div itemscope itemtype="http://data-vocabulary.org/Person"> Ң݊ <span itemprop="name">Bob Smith</span> ʔཀ؃ʾே̣Ң <span

    itemprop="nickname">Smithy</span>. ˸ɨ݊Ңٙ࠯ࠫၣѧj <a href="http://www.example.com" itemprop="url">www.example.com</a> ҢИί Albuquerque (NM)dዄ΂ <span itemprop="title">ʈ೻ࢪ</span> ɓᔖ ͦۃ؂ਕ׵ <span itemprop="affiliation">ACME Corp</span>f </div> http://www.google.com/support/webmasters/bin/topic.py?topic=21997
  26. APIs • document . getItems( [ types ] ) •

    element . properties • element . itemValue [ = value ] http://www.w3.org/TR/2010/WD-microdata-20100624/#microdata-dom-api
  27. <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
  28. <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
  29. New Attributes • autofocus: auto focus • autocomplete: browser’s auto

    complete • placeholder: short hint • multiple for [type=file]: upload multiple file
  30. Validation • support new input types • pattern attribute for

    <input> • novalidate attribute for <form>
  31. Q&A