Downloaded 34 times
Uploaded byTerry Ryan
HTML5 Semantic Web
The document discusses HTML5 semantic elements and attributes that help improve the semantics and accessibility of web pages. It introduces several new semantic elements like <header>, <footer>, <nav>, <article>, and <section> that more accurately describe page content than generic <div> elements. It also discusses new attributes like <time> for publishing dates and "data-" custom attributes for storing metadata. While browser support for new HTML5 features is still evolving, these elements and attributes can help improve the structure and meaning of web pages.
More Related Content
![HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://cdn.slidesharecdn.com/ss_thumbnails/html5smartmarkupforsmarterwebsites-futureofwebappslasvegas2011-110628193453-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
HTML5 Semantic Web
- 1. HTML5 Semantic WebTerryRyan | Worldwide Developer Evangelist@tpryan
- 2.
- 3. Not Sexy andAdventurous3
- 4.
- 5. AgendaIntroductionOverview of SemanticsNewSemantic elements New Semantic attributes New Form Input TypesNew Form attributesPitfallsConclusions5
- 6.
- 7. Semantic HTML meansyour markup describes it’s content without Presenting it 7
- 8. What do wemean by Semantic HTMLHTML where proper elements are used<p> denotes paragraph<ul> denotes an list of items, where the order is not important <address> contains address information<div> and <span> are used to describe informationHTML where extraneous elements are not misusedNo <p> for line breakingNo <blockquote> for indentationNo <h1> for big textHTML without presentation informationNo <font>, <b>, <i> tagsNo inline styles8
- 9. Semantic HTML isa moving targetNot BooleanNot always objectiveA continuum9
- 10. Semantic HTML<body background="css/bg.png"><fontface="Calibri”><center><table width="800" bgcolor="#FFFFFF" border="10" bordercolor="#FFFFFF"><tr><td><tablewidth="100%" bgcolor="#f0f0f0" border="0“><tr><td><h1><fontface="Palatino Linotype">The Awesome Blog ofAwesome</font></h1></td></tr><tr> <td align="right"><p><i>Awesome is a State of Mind</i></p></td></tr></table>10<body><div id="header"><h1>The Awesome Blog of Awesome</h1><p class="tagline">Awesome is a State of Mind</p></div>Relatively UnsemanticRelatively Semantic
- 11. HTML5?11What does thishave to do with HTML5?
- 12. HTML5 adds moresemantics<body><header><h1>The Awesome Blog of Awesome</h1><p>Awesome is a State of Mind</p></header><nav><ul><li><ahref="">Home</a></li><li><ahref="">Blog</a></li><li><ahref="">About</a></li><li><ahref="">Contact</a></li></ul></nav>12
- 13. Introducing The AwesomeBlog of Awesome13HTML5XHTML
- 14.
- 15.
- 16. Header<div id="header"><h1>The AwesomeBlog of Awesome</h1> <p class="tagline">Awesome is a State of Mind</p></div>16<header><hgroup><h1>The Awesome Blog of Awesome</h1><h2>Awesome is a State of Mind</h2></hgroup></header>HTML 5Previously
- 17. Hgroup?17What’s the <hgroup>all about?
- 18. Hgroup18<hgroup><h1></h1> <h2></h2></hgroup>It’s for groupingrelated headers, that don’t spawn their own node in the outline
- 19.
- 20. Effect of hgroupH1– Awesome Blog of Awesome
- 21. H2 - Awesomeis a State of Mind
- 22. H2 - RecentPosts
- 23. H3 I Madea Post Thingie
- 24. H3 My Thoughtsare made manifest 20H1 – Awesome Blog of Awesome
- 25.
- 26. H3 I Madea Post Thingie
- 27. H3 My Thoughtsare made manifest No HgroupWith HGroup
- 28.
- 29. OutlinesOutlines seem reallyimportant to the people who push semantic HTML 5Are they really important?Today: NoTomorrow: Who knows?But this is a semantically correct way of reducing classes and extraneous divs22
- 30.
- 31. Footer<div id="footer”><p>Copyright 2011- Terry Ryan</p></div>24<footer><p>Copyright 2011 - Terry Ryan</p></footer>HTML 5Previously
- 32.
- 33. Navigation<div id="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></div>26<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>PreviouslyHTML 5
- 34.
- 35. Articles<divclass="post”><divclass="postheader"><h3><ahref="">I Scream MyThoughts</a></h3><pclass="date">August 10, 2011</p></div><p>You probably haven't heard of them duis</p></div>28<article> <header> <h1><ahref="">I Scream My Thoughts</a></h1> <time>August 10, 2011</time> </header> <p>You probably haven't heard of them duis</p></article>PreviouslyHTML5
- 36. An article isa piece of content that can stand on it’s own29
- 37. Date and Time<timedatetime={datetime} pubdate>Human Readable String</time>DatetimeDate: 2011-09-20Datetime: 2011-09-20T20:00ZDatetime: 2011-09-20T20:00+00:00PubdateUsed with article to denote that this particular time is the publication date. 30
- 38. Date Time31Just theletter T2011-09-20T20:00ZZ for Zulu TimeHours:MinutesYear-Month-DayJust the letter T2011-09-20T20:00+00:00Year-Month-DayHours:MinutesTime Zone Offset
- 39. Section?32There’s also thisthing called “<section>” how does that work.
- 40. An Article isa piece of stand-alone content33
- 41.
- 42.
- 43. A section isa collection of related pieces of content36
- 44.
- 45. Articles can containSections38
- 46.
- 47. Sections can containArticles40
- 48. Articles can containother articles41
- 49.
- 50.
- 51. Content<divclass=”content”> <divclass="post”> ...</div> <divclass="post”> ... </div> <divclass="post”> ... </div></div>44<divclass=”content”> <article> ... </article><article> ... </article><article> ... <article></div>PreviouslyHTML5
- 52. Also can becorrect<divclass=”content”> <divclass="post”> ... </div> <divclass="post”> ... </div> <divclass="post”> ... </div></div>45<section class=”content”> <article> ... </article><article> ... </article><article> ... <article></section>PreviouslyHTML5
- 53. Umm46That’s great, butfrankly not that much of a different, how is that better?
- 54. Benefit 1 </div> </div> </div><div id=“footer”></div></body>47 </div> </article> </div><footer></footer></body>Before these ElementsAfter
- 55. Benefit 2Less monkeyingwith content hierarchies48
- 56. 49Post PageMain PageArchivePage<article> <header> <h1><a href="">I Made a Post Thingie</a></h1> <time datetime="2011-09-02">September 2, 2011</time> </header> <imgsrc="img/captain-awesome.jpg" width="300" height="200" alt="Image of Captain Awesome" /> <p>DIY eanulla photo booth temporoccaecat, velitnihilmixtapescenester. Irony laboris echo park, wolf officia vice cupidatatlabore butcher freegan farm-to-table nisi velitaliqua gluten-free. Aliquipnesciuntassumenda, wayfarers seitan wolf reprehenderitnulla twee sartorial dolore food truck voluptateex vinyl. Aliquip ex enim, irony terry richardson trust fund consecteturfappariatur dolor. Lo-fi nulla whatever mlkshk, banksyamerican apparel carlesadipisicingincididunt wolf photo booth hipster. Wayfarers four loko ex cosby sweater, adipisicingsartorial non cardigan craft beer cillumreprehenderit terry richardson 3 wolf moon mollit. Ethical utlabore beard, 3 wolf moon duis readymade assumenda hipster tofu mcsweeney's master cleanse.</p></article>article header h1ArticleArticleArticle
- 57. Benefit 3No longerbound to one header or one navcan have multiple. 50
- 58. New Elements workacross Modern Browsers without Fail51
- 59. What’s you’re definitionof Modern?52
- 60. Use the HTML5 Shiv53http://code.google.com/p/html5shiv/
- 61.
- 62. data55Add “data-” toanything to make your content contain data
- 63.
- 64.
- 65.
- 66. Perhaps future SearchEngine hints.<p data-firstname=“Terry” data-lastname=“Ryan”>Terry Ryan</p>
- 67. These next thingsaren’t semantic, just kinda cool56
- 68. contenteditable57Allows any textto be user editable, not just input and textareas.
- 69.
- 70.
- 71. Comment previews<p contenteditable="true”class="comment">Comment</p>
- 72. spellcheck58Allows any fieldthat is user editable to trigger the browser’s spellcheck interface
- 73.
- 74. No one spellchecksanything they post on the web
- 75. But you willhave the moral high ground to point out on your site they could have. <p contenteditable="true" spellcheck="spellcheck" class="comment">Comment</p>
- 76.
- 77. HTML5 includes lotsof new Input types60
- 78. They aren’t supportedon every browser61
- 79. All browsers defaultto showing unknown input types as Text62
- 80.
- 81. Browser vendors tendto round, add magnifying glass, etc. <input type=“search” name=“search” />
- 82.
- 83. Provides email keyboardon iOS devices.<input type=“email” name=“email” />
- 84.
- 85. Provides url keyboardon iOS devices.<input type=“url” name=“url” />
- 86. Number66Provides keypad oniOS and Android devices.
- 87. Provides a stepperon desktops
- 88.
- 89.
- 90.
- 91. Tel67Provides keypad oniOS and Android devices.<input type=“tel” name=“cell” />
- 92. Not well supported,but have potential68
- 93. Range69Provides a setof values
- 94. The slider allowsyou to pick one
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101. Displays a datapicker
- 102.
- 103.
- 104.
- 105. Dashes your hopesand dreams the way only IE can<input type=“date” name=“dob” />
- 106.
- 107. OutputSemantically correct placeholderfor calculated values.Can also be used a label for input type=“slider”<output />
- 108. Output in Action73<formclass="order"><label for="quantity">Quantity:</label><input id="quantity" name="quantity" type="number" value="1" onChange="calc()" /><br/><label for="price">Price: </label><input id="price" name="price" type="number" value="19.99" disabled /><br/><label for="total">Total: </label><output id="total" name="total" /><br/></form><script type="application/javascript">function calc(){varquantity = document.getElementById("quantity").value;varprice = document.getElementById("price").value; vartotal = document.getElementById("total");total.value= Math.round(quantity * price * 100)/100; }</script>
- 109. meter74Basically a BarChart of results<meter min=“0” max=“20” value=“12”>12cm</meter>
- 110. progress75Could be usedto indicate progress through a multistep formCould be programmatically changed to indicate progress of program<progress min=“100” value=“20”>20%</progress>
- 111.
- 112. Remember 10 yearsago?77
- 113. On Tableless designs78Don’tuse tables for layout, use CSS.Tables are for tabular data. They are just one of the tools in your toolkit. HolzschlagSheaIcons by:http://www.ngenworks.com/Zeldman
- 114. What people heard79Don’tuse tables for layout, use CSS.Tables are for tabular data. They are just one of the tools in your toolkit. HolzschlagSheaIcons by:http://www.ngenworks.com/Zeldman
- 115. I’m not saying80Don’tuse div’swhen there are semantic elements that make sense. Div’s are stillgood fordenoting thingsthat have no semantic equivalent
- 116. I’m not saying81Don’tuse div’s when there are semantic elements that make sense. Div’s are still good for denoting things that have no semantic equivalent
- 117. You are notrequiredto do any of what I just said82
- 118.
- 119.
- 120. A lot ofthis stuff is in Flux85
- 121.
- 122. Can you useit?87
- 123.
- 124. The most commonbrowsers have crappy HTML 5 support 89Source: https://netaverages.adobe.com
- 125. New ElementsSupported onmost browsersIf they are not supported, can be enabled using the HTML 5 Shiv90
- 126. New AttributesSupported onmost browsersIf they are not supported, they have no impact.91
- 127. New Form InputsSupportwildly variesIf they are not supported, they have no impact.92
- 128. New Form ElementsSupportwildly variesMimic things that have been provided by JavaScript for years93
- 129.
- 130.
- 131. Big Question: Whyuse this stuff??96
- 132. 97It’s Also aboutthe Annoyed ReaderUsed to be about the “Blind Billionaire
- 133. All They CareAbout is this98Content
- 134. More Content hereMoreContent hereMore Content hereWe can tell them99Content
- 135. And increase theunderstandability of your code100
- 136. For Future ReferenceHTML5 General http://diveintohtml5.orghttp://html5doctor.comHTML5 Semanticshttp://diveintohtml5.org/semantics.htmlHTML 5 Formshttp://wufoo.com/html5http://diveintohtml5.org/forms.html101
- 137. Follow up?Feel freeto contact meterry.ryan@adobe.comhttp://terrenceryan.comTwitter: @tpryan