• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,946
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
98
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 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