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

HTML5 Semantic Elements

0d877f80c535471ede57c7a4c0f487de?s=47 Idan Gazit
October 25, 2011

HTML5 Semantic Elements

An introduction to HTML5's new semantic elements, including webforms 2.0. Delivered at the ISOC HTML5fest 2011 (www.w3c.org.il/HTML5fest/)

0d877f80c535471ede57c7a4c0f487de?s=128

Idan Gazit

October 25, 2011
Tweet

Transcript

  1. HTML5 SEMANTIC ELEMENTS @idangazit HTML5Fest • 25th October 2011

  2. http://ic.kr/p/7Efy5K I COME FROM HELLO!

  3. djangoproject.com skilsapp.com

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

  5. PRESENTATION CSS CONTENT HTML

  6. your audience

  7. HI! I’M A DESIGNER.

  8. HI! I’M A DEVELOPER.

  9. HI! I’M GOOGLEBOT.

  10. None
  11. PRESENTATION CONTENT

  12. PRESENTATION CONTENT SEMANTIC STRUCTURE provides MEANING

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

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

  15. 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>
  16. 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
  17. <BR> vs. <br> vs. <BR/>

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

    BRIEF!
  19. NEW SEMANTIC ELEMENTS STRUCTURE

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

  21. <DIV> generic block-level

  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"> <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>
  24. div class= HEADER HEADING PAGEHEAD MAINHEADER etc…

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

  26. <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>
  27. <DIV> vs. <SECTION> vs. <ARTICLE>

  28. <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>
  29. • 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
  30. <HEADER> and <FOOTER> go inside <ARTICLE> <SECTION> <NAV> <ASIDE> SECTIONING

    CONTENT
  31. YUMMY! bit.ly/html5-seo-google

  32. YUMMY!

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

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

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

  36. DEHACKIFYING UR FORMS IM IN UR MARKUP

  37. now we have css :hover pseudoclass JS ROLLOVERS

  38. GRACEFUL DEGRADATION SIMPLIFYING COMMON USAGE WEBFORMS 2.0

  39. ATTRIBUTES

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

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

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

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

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

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

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

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

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

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

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

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

  52. <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
  53. ONLY OPERA SUPPORTS IT COLOR PICKER

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

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

  56. LEARN YOU SOME HTML5 RESOURCES

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

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

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

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

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

    YOUR SITE USE IT NOW!
  62. @idangazit THANK YOU!