Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 Semantic Elements: A Deeper Dive

HTML5 Semantic Elements: A Deeper Dive

An overview of the new semantic elements in HTML5, with a greater focus on the outlining algorithm.

0d877f80c535471ede57c7a4c0f487de?s=128

Idan Gazit

October 31, 2011
Tweet

Transcript

  1. HTML5 SEMANTIC ELEMENTS @idangazit PyWeb-IL 32 • 31st October 2011

  2. djangoproject.com skilsapp.com

  3. WHY SHOULD YOU CARE? WHAT DO THEY DO?

  4. PRESENTATION CSS CONTENT HTML

  5. your audience

  6. HI! I’M A DESIGNER.

  7. HI! I’M A DEVELOPER.

  8. HI! I’M GOOGLEBOT.

  9. None
  10. PRESENTATION CONTENT

  11. PRESENTATION CONTENT SEMANTIC STRUCTURE provides MEANING

  12. a good semantic structure makes it EASY for eveybody TO

    CONSUME YOUR CONTENT
  13. <!DOCTYPE html> quirks mode amost-standards mode standards mode

  14. Q: quirks mode A: amost-standards mode S: standards mode http://hsivonen.iki.fi/doctype/

    S S S S S IE8+ A IE6/7 <!DOCTYPE html>
  15. http://html5doctor.com/html-5-xml-xhtml-5/ http://mathiasbynens.be/notes/xhtml5 DON’T BOTHER, IT WON’T WORK IN IE “Content-Type:

    application/xhtml+xml” XHTML5
  16. <BR> vs. <br> vs. <BR/>

  17. <!DOCTYPE html> <html lang="en"> <meta charset="utf-8"> <link rel="stylesheet" href="my.css"> <script>

    BRIEF!
  18. NEW SEMANTIC ELEMENTS STRUCTURE

  19. <H1> <P> <A> heading paagaph link

  20. <DIV> generic block-level

  21. <div class="header"> <h1>BEST BLOG IN THE WORLD</h1> <div class="nav"> <ul>

    ... </ul> </div> </div> <div class="maincontent"> <h2>My Posts</h2> <div class="post"> <h3>A post</h3> ... </div> </div> <div class="footer"> <p>&copy; Natan Alterman</p> </div>
  22. <div class="header"> <h1>BEST BLOG IN THE WORLD</h1> <div class="nav"> <ul>

    ... </ul> </div> </div> <div class="maincontent"> <h2>My Posts</h2> <div class="post"> <h3>A post</h3> ... </div> </div> <div class="footer"> <p>&copy; Natan Alterman</p> </div>
  23. div class= HEADER HEADING PAGEHEAD MAINHEADER etc…

  24. <HEADER> <FOOTER> <NAV> <ASIDE> <ARTICLE> <SECTION>

  25. <header> <h1>BEST HTML5 BLOG IN THE WORLD</h1> <nav> <ul> ...

    </ul> </nav> </header> <section class="maincontent"> <header><h1>My Posts</h1></header> <aticle> <h1>A post title!</h1> ... </aticle> </section> <footer> <p>&copy; Natan Alterman</p> </footer>
  26. <DIV> vs. <SECTION> vs. <ARTICLE>

  27. <header> <h1>BEST HTML5 BLOG IN THE WORLD</h1> <nav> <ul> ...

    </ul> </nav> </header> <section class="maincontent"> <header><h1>My Posts</h1></header> <aticle> <h1>A post title!</h1> ... </aticle> </section> <footer> <p>&copy; Natan Alterman</p> </footer>
  28. • BEST HTML5 BLOG IN THE WORLD • My Posts

    - A post title! - Another post title! - A really old post. http://gsnedders.html5.org/outiner/ http://dev.w3.org/html5/spec/Oveview.html#outine
  29. <h1>My Awesome Site</h1> <h1>About me</h1> <p>I like bananas</p> <h1>My Day

    Job</h1> <p>I eat bananas</p> <h1>Contact</h1> <p>me@gmail.com</p> •My Awesome Site •About Me •My Day Job •Contact
  30. <h1>My Awesome Site</h1> <section> <h1>About me</h1> <p>I like bananas</p> <section>

    <h1>My Day Job</h1> <p>I eat bananas</p> </section> </section> <section> <h1>Contact</h1> <p>me@gmail.com</p> </section> •My Awesome Site •About Me •My Day Job •Contact
  31. <aside> <section> <h2>Foo</h1> … </section> <section> <h2>Bar</h1> … </section> </aside>

    •Untitled Aside •Foo •Bar
  32. <HGROUP>

  33. <h1>My Awesome Blog</h1> <aticle> <h1>I Love Cake!</h1> <h2>I love it

    so so much.</h2> … </aticle> <aticle> <h1>The Cake is a Lie!</h1> <h2>Don’t believe them!</h2> … </aticle> •My Awesome Blog •I Love Cake •I love it so so much. •The Cake is a Lie! •Don’t believe them!
  34. <h1>My Awesome Blog</h1> <aticle> <hgroup> <h1>I Love Cake!</h1> <h2>I love

    it so so much.</h2> </hgroup> … </aticle> <aticle> <hgroup> <h1>The Cake is a Lie!</h1> <h2>Don’t believe them!</h2> </hgroup> <div class=aticle_body> … </aticle> •My Awesome Blog •I Love Cake •The Cake is a Lie!
  35. SECTIONING ROOTS <BLOCKQUOTE> <FIGURE> <DETAILS> <FIELDSET> <TD>

  36. <HEADER> and <FOOTER> go inside <ARTICLE> <SECTION> <NAV> <ASIDE> …but

    don’t affect the outine SECTIONING CONTENT
  37. YUMMY! bit.ly/html5-seo-google

  38. YUMMY!

  39. http://en.wikipedia.org/wiki/HTML5_Shiv JS FIX FOR IE6-8 HTML5 SHIV

  40. <MARK> <TIME> <METER> <PROGRESS> <B>, <STRONG> <I>, <EM>

  41. http://dev.w3.org/html5/spec/Oveview.html THE FINAL WORD HTML5 SPEC

  42. DEHACKIFYING UR FORMS IM IN UR MARKUP

  43. now we have css :hover pseudoclass JS ROLLOVERS

  44. GRACEFUL DEGRADATION SIMPLIFYING COMMON USAGE WEBFORMS 2.0

  45. ATTRIBUTES

  46. <input placeholder="name"> PLACEHOLDER TEXT

  47. <input name="searchbox" autofocus> AUTOFOCUS

  48. <input name="name" required> <input name="nickname"> <style> input[required] { background: #cfc;

    } </style> REQUIRED
  49. <input required pattern="[0-9]{5}" placeholder="5-digit code"> <style> :invalid { background: #cfc;

    } </style> PATTERN pattern is a regex
  50. <input list="suggestions"> <datalist id="suggestions"> No datalist suppot! <option value="foo"></option> <option

    value="bar"></option> <option value="baz"></option> </datalist> DATALIST
  51. INPUT TYPES

  52. <input type="email" placeholder="email"> <input type="url" placeholder="http://…"> <input type="tel" placeholder="telephone"> CONTACT

    INFO
  53. http://bit.ly/html5-iphone-forms

  54. http://bit.ly/html5-iphone-forms EMAIL URL TEL

  55. <input type="search" placeholder="search"> SEARCH

  56. <input type="slider" min="1" max="10"> SLIDERS discrete min="1" max="10" continuous

  57. <input type="number"> SPINNERS aso suppots min/max

  58. <input type="date"> <input type="time"> <input type="datetime"> <input type="datetime-local"> <input type="month">

    <input type="week"> DATE AND TIME visit with a webkit browser, ike chrome: http://bit.ly/html5-input-tests
  59. ONLY OPERA SUPPORTS IT COLOR PICKER

  60. http://www.modernizr.com FEATURE DETECTION MODERNIZR

  61. http://bit.ly/polyfils FALLBACKS FOR OLDER BROWSERS POLYFILLS

  62. LEARN YOU SOME HTML5 RESOURCES

  63. http://diveintohtml5.info/ FREE ONLINE DIVE INTO HTML5

  64. http://html5doctor.com “WHEN SHOULD I...” HTML5 DOCTOR

  65. http://www.abookapat.com/products/html5-for-web-designers IT’S SHORT AND SWEET HTML5 BOOK

  66. http://dev.w3.org/html5/spec/Oveview.html THE FINAL WORD HTML5 SPEC

  67. ALL BENEFITS • NO DRAWBACKS EASY FIXES FOR IE6-8 FUTURE-PROOF

    YOUR SITE USE IT NOW!
  68. @idangazit THANK YOU! Sides: http://bit.ly/pyweb32-html5-semantic