Semantic HTML5

14 535 vues

Publié le

Updated version of my Semantic HTML5 preso.

Publié dans : Technologie, Formation
  • Soyez le premier à commenter

Semantic HTML5

  1. Semantic HTML 5Terry Ryan | Developer EvangelistTwitter: @tpryan
  2. Who are you?
  3. OVERVIEW
  4. Semantic HTML means your markup describes it’s contentwithout presenting it
  5. Definition• HTML where specific elements are used• HTML where elements are not misused• HTML with no presentation information
  6. Semantic HTML is a• Not Boolean• Not always objective• A continuum Text
  7. ExampleUnsemantic Semantic <body><body background="css/bg.png"> <div id="header"><font face="Calibri”><center> <h1>The Awesome Blog of Awesome</<table width="800" bgcolor="#FFFFFF" border="10" h1>bordercolor="#FFFFFF"><tr><td><table width="100%" bgcolor="#f0f0f0" Text Text Text <p class="tagline"> Awesome is a State of Mind </p>border="0“> </div> <tr> <td><h1> <font face="Palatino Linotype">The Awesome Blog of Awesome</font> </h1></td> </tr> <tr> <td align="right"><p> <i>Awesome is a State of Mind</i> </p></td> </tr></table>
  8. HTML5 ? What does this have to do with HTML5?
  9. HTML5 adds more <body><header> <h1>The Awesome Blog of Awesome</h1> <p>Awesome is a State of Mind</p></header><nav><ul> <li><a href="">Home</a></li> <li><a href="">Blog</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> </ul></nav>
  10. HTML5XHTML
  11. ELEMENTS
  12. Head
  13. HeaderPreviously<div id="header"> <h1>The Awesome Blog of Awesome</h1> <p class="tagline">Awesome is a State of Mind</p></div> Text Text TextHTML 5<header> <hgroup> <h1>The Awesome Blog of Awesome</h1> <h2>Awesome is a State of Mind</h2> </hgroup></header>
  14. <hgroup> ? What’s the <hgroup> all about?
  15. Hgroup<hgroup> <h1></h1> <h2></h2></hgroup>It’s for grouping related headers, that don’t spawn theirown node in the outline
  16. <hgroup> ? <huh>?
  17. Effect of hgroupWithout WithH1 – Awesome Blog of Awesome H1 – Awesome Blog of Awesome H2 - Awesome is a State of Mind H2 - Recent Posts H2 - Recent Posts TextH3 I Made a Post Thingie Text Text H3 I Made a Post Thingie H3 My Thoughts are made manifest H3 My Thoughts are made manifest
  18. <hgroup> ? Still with the <huh>?
  19. Outlines• Outlines seem really important to the people who push semantic HTML 5• Are they really important? • Today: No • Tomorrow: Who knows?• But this is a semantically correct way of reducing classes and extraneous divs
  20. Foot
  21. FooterPreviously<div id="footer”> <p>Copyright 2011 - Terry Ryan</p></div> Text Text TextHTML 5<footer> <p>Copyright 2011 - Terry Ryan</p></footer>
  22. Nav
  23. NavPreviously HTML 5<div id="nav"> <nav> <ul> <ul> <li><a href="">Home</a></li> <li><a href="">Home</a></li> <li><a href="">Blog</a></li> <li><a href="">Blog</a></li> <li><a href="">About</a></li> Text Text Text <li><a href="">About</a></li> <li><a href="">Contact</a></li> <li><a href="">Contact</a></li> </ul> </ul></div> </nav>
  24. Artic
  25. NavPreviously HTML 5<div class="post”> <article><div class="postheader"> <header> <h3><a href="">I Scream My Thoughts</a></h3> <h1><a href="">I Scream My Thoughts</a></h1> <p class="date">August 10, 2011</p></div> Text Text Text <time>August 10, 2011</time> </header><p>You probably havent heard of them duis</p> <p>You probably havent heard of them duis </p></div> </article>
  26. ArticlePREVIOUSLY<div class="post”><div class="postheader"> <h3><a href="">I Scream My Thoughts</a></h3> <p class="date">August 10, 2011</p></div> Text Text<p>You probably havent heard of them duis</p> Text</div>HTML5<article><header> <h1><a href="">I Scream My Thoughts</a></h1> <time>August 10, 2011</time></header><p>You probably havent heard of them duis </p></article>
  27. a piece ofcontent that can
  28. Section There’s also this thing called “<section>” how does that work?
  29. An <article> is a piece of stand- alone
  30. Blog Post
  31. Comment
  32. A <section> is a collection of related pieces of
  33. Related Entries
  34. <articles>can contain<sections>
  35. Article
  36. ArticleSectionSectionSection
  37. <sections>can contain <articles>
  38. <articles>can contain other <articles>
  39. ArticleSectionSectionSection
  40. ArticleSectionSectionSectionArticleArticle
  41. Conte
  42. ContentPreviously HTML 5<div class=”content”> <div class=”content”><div class="post”> <article>... ...</div> </article><div class="post”>... Text <article> Text Text ...</div> </article><div class="post”> <article>... ...</div> <article></div> </div>
  43. Also correctPreviously HTML 5<div class=”content”> <section class=”content”><div class="post”> <article>... ...</div> </article><div class="post”>... Text <article> Text Text ...</div> </article><div class="post”> <article>... ...</div> <article></div> </section>
  44. Umm That’s great, but frankly not that much of a difference. How is this better?
  45. Benefit 1Before HTML 5 </div> </div></div> </article></div> Text </section> Text Text<div id=“footer”> <footer></div> </footer></body> </body>
  46. Benefit 2 Less monkeying with content hierarchies
  47. ArchiMain Post ve
  48. ArchiMain Post ve Artic Artic Artic le le le
  49. ArchiMain Post ve Artic Artic Artic le le le
  50. ArchiMain Post ve article header h1 Artic Artic Artic le le le
  51. Benefit 3 No longer bound to one header or one nav can have multiple.
  52. New elementswork across modern browsers
  53. What’s yourdefinition ofModern?
  54. Use theHTML 5 Shiv http://code.google.com/p/html5shiv/
  55. ATTRIBUTES
  56. Data<p data-firstname=“Terry” data-lastname=“Ryan”>Terry Ryan</p>Add “data-” to anything to make your content contain dataUses? •Scritping •Microformats •jQuery Mobile •Perhaps future Search Engine hints.
  57. These nextthings aren’t semantic, just kinda
  58. contenteditable<p contenteditable="true” class="comment">Comment</p>Allows any text to be user editable, not just input and textareas.Uses? •Better CMS systems •Comment previews
  59. spellcheck<p contenteditable="true" spellcheck="spellcheck" class="comment">Comment</p>Allows user editable field to trigger the browser’s spellcheck interfaceUses? •No one spellchecks anything they post on the web •But you will have the moral high ground to point out on your site they could have.
  60. FORMSelements
  61. HTML5 includes lots ofnew <input>
  62. They aren’tsupported on every browser
  63. All browsers default to showing unknowninput types
  64. Search<input type=“search” name=“search” />Support is spottyBrowser vendors tend to round, add magnifying glass, etc. Chart from - http://wufoo.com/html
  65. Email<input type=“email” name=“email” />Provides validationProvides email keyboard on iOS devices. Chart from - http://wufoo.com/html
  66. URL<input type=“url” name=“url” />Provides validationProvides url keyboard on iOSdevices. Chart from - http://wufoo.com/html
  67. Number<input type=“number” name=“cost” />Provides keypad on iOS and Androiddevices.Provides a stepper on desktopsTakes attributes: Min/Max Step Chart from - http://wufoo.com/html
  68. Tel<input type=“tel” name=“cell” />Provides keypad on iOS and Android devices. Chart from - http://wufoo.com/html
  69. Not wellsupported, but have potential
  70. Range<input type=“range” name=“volume” />Provides a set of valuesThe slider allows you to pick oneNot terribly preciseTakes attributes: Min/Max Step Chart from - http://wufoo.com/html
  71. Date<input type=“date” name=“dob” />Provides validationOn Opera Displays a data pickerOn Safari/Chrome Displays tickerIE Dashes your hopes and dreams the way only IE can Chart from - http://wufoo.com/html
  72. FORMSattributes
  73. Output<output />Semantically correct placeholder for calculated values.Can also be used a label for input type=“slider” Chart from - http://wufoo.com/html
  74. Meter<meter min=“0” max=“20” value=“12”>12cm</meter>Basically a Bar Chart of results Chart from - http://wufoo.com/html
  75. Progress<progress min=“100” value=“20”>20%</progress>Could be used to indicate progressthrough a multistep formCould be programmatically changed toindicate progress of program Chart from - http://wufoo.com/html
  76. PITFALLS
  77. Remember 10 Years ago?
  78. On Tableless designs Don’t use tables for layout, use CSS. Tables are for tabular Zeldman data. They are just one of the tools in your toolkit. Holzschlag SheaIcons by:http://www.ngenworks.com/
  79. What people heard Don’t use tables Tables are for Zeldman tools. Holzschlag SheaIcons by:http://www.ngenworks.com/
  80. I’m not saying Don’t use div’s when there are semantic elements that make sense. Div’s are still good for denoting things that have no semantic equivalent
  81. I’m not saying Don’t use div’s when there are semantic elements that make sense. Div’s are still good for denoting things that have no semantic equivalent
  82. <article> vs.<section>
  83. <nav> vs.<menu>
  84. A lot of this stuff is in Flux
  85. You arenot requiredto do any of what I just
  86. CONCLUSIONS
  87. Can you use it?
  88. On desktops
  89. The most common browsers have crappy HTML 5 supportSource: https://netaverages.adobe.com
  90. Actually, not so much anymoreSource: https://netaverages.adobe.com
  91. New Elements• Supported on most browsers• If they are not supported, can be enabled using the HTML 5 Shiv
  92. New Attributes• Supported on most browsers• If they are not supported, they have no impact.
  93. New Form Inputs• Support wildly varies• If they are not supported, they have no impact.
  94. New Form Elements• Support wildly varies• Mimic things that have been provided by JavaScript for years
  95. On mobile
  96. Big Question:Why use this stuff??
  97. Used to be about the “Blind Billionaire
  98. It’s Also about the Annoyed Reader
  99. Andincrease theunderstandability of your
  100. For Future Reference• HTML 5 General • http://www.diveintohtml5.net • http://html5doctor.com• HTML5 Semantics • http://www.diveintohtml5.net/semantics.html• HTML 5 Forms • http://wufoo.com/html5 • http://www.diveintohtml5.net/forms.html• HTML Status • http://caniuse.com
  101. Follow up?• Preso will be up at: - http://slideshare.net/tpryan• Feel free to contact me - terry.ryan@adobe.com Text - http://terrenceryan.com - Twitter: @tpryan - github: tpryan

×