Your SlideShare is downloading. ×
0
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
HTML5 Semantic Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 Semantic Web

1,943

Published on

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,943
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
3
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

Transcript

  • 1. HTML5 Semantic Web<br />Terry Ryan | Worldwide Developer Evangelist<br />@tpryan<br />
  • 2. Who are you?<br />2<br />
  • 3. Not Sexy and Adventurous<br />3<br />
  • 4. It’s everyday stuff<br />4<br />
  • 5. Agenda<br />Introduction<br />Overview of Semantics<br />New Semantic elements <br />New Semantic attributes <br />New Form Input Types<br />New Form attributes<br />Pitfalls<br />Conclusions<br />5<br />
  • 6. Overview<br />6<br />Semantics <br />
  • 7. Semantic HTML means your markup describes it’s content without Presenting it <br />7<br />
  • 8. What do we mean by Semantic HTML<br />HTML where proper elements are used<br /><p> denotes paragraph<br /><ul> denotes an list of items, where the order is not important <br /><address> contains address information<br /><div> and <span> are used to describe information<br />HTML where extraneous elements are not misused<br />No <p> for line breaking<br />No <blockquote> for indentation<br />No <h1> for big text<br />HTML without presentation information<br />No <font>, <b>, <i> tags<br />No inline styles<br />8<br />
  • 9. Semantic HTML is a moving target<br />Not Boolean<br />Not always objective<br />A continuum<br />9<br />
  • 10. Semantic HTML<br /><body background="css/bg.png"><br /><font face="Calibri”><center><br /><table width="800" bgcolor="#FFFFFF" border="10" bordercolor="#FFFFFF"><br /><tr><td><br /><tablewidth="100%" bgcolor="#f0f0f0" border="0“><br /><tr><br /><td><h1><br /><fontface="Palatino Linotype">The Awesome Blog ofAwesome</font><br /></h1><br /></td><br /></tr><br /><tr> <br /><td align="right"><p><i>Awesome is a State of Mind</i></p></td><br /></tr><br /></table><br />10<br /><body><br /><div id="header"><br /><h1>The Awesome Blog of Awesome</h1><br /><p class="tagline">Awesome is a State of Mind</p><br /></div><br />Relatively Unsemantic<br />Relatively Semantic<br />
  • 11. HTML5?<br />11<br />What does this have to do with HTML5?<br />
  • 12. HTML5 adds more semantics<br /><body><br /><header><br /><h1>The Awesome Blog of Awesome</h1><br /><p>Awesome is a State of Mind</p><br /></header><br /><nav><br /><ul><br /><li><ahref="">Home</a></li><br /><li><ahref="">Blog</a></li><br /><li><ahref="">About</a></li><br /><li><ahref="">Contact</a></li><br /></ul><br /></nav><br />12<br />
  • 13. Introducing The Awesome Blog of Awesome<br />13<br />HTML5<br />XHTML<br />
  • 14. Elements<br />14<br />
  • 15. Header<br />15<br />
  • 16. Header<br /><div id="header"><br /><h1>The Awesome Blog of Awesome</h1><br /> <p class="tagline">Awesome is a State of Mind</p><br /></div><br />16<br /><header><br /><hgroup><br /><h1>The Awesome Blog of Awesome</h1><br /><h2>Awesome is a State of Mind</h2><br /></hgroup><br /></header><br />HTML 5<br />Previously<br />
  • 17. Hgroup?<br />17<br />What’s the <hgroup> all about?<br />
  • 18. Hgroup<br />18<br /><hgroup><br /><h1></h1><br /> <h2></h2><br /></hgroup><br />It’s for grouping related headers, that don’t spawn their own node in the outline<br />
  • 19. Hgroup?<br />19<br />Huh?<br />
  • 20. Effect of hgroup<br /><ul><li>H1 – Awesome Blog of Awesome
  • 21. H2 - Awesome is a State of Mind
  • 22. H2 - Recent Posts
  • 23. H3 I Made a Post Thingie
  • 24. H3 My Thoughts are made manifest </li></ul>20<br /><ul><li>H1 – Awesome Blog of Awesome
  • 25. H2 Recent Posts
  • 26. H3 I Made a Post Thingie
  • 27. H3 My Thoughts are made manifest </li></ul>No Hgroup<br />With HGroup<br />
  • 28. Hgroup?<br />21<br />Still huh?<br />
  • 29. Outlines<br />Outlines seem really important to the people who push semantic HTML 5<br />Are they really important?<br />Today: No<br />Tomorrow: Who knows?<br />But this is a semantically correct way of reducing classes and extraneous divs<br />22<br />
  • 30. Footer<br />23<br />
  • 31. Footer<br /><div id="footer”><br /><p>Copyright 2011 - Terry Ryan</p><br /></div><br />24<br /><footer><br /><p>Copyright 2011 - Terry Ryan</p><br /></footer><br />HTML 5<br />Previously<br />
  • 32. Navigation<br />25<br />
  • 33. Navigation<br /><div id="nav"><br /> <ul><br /> <li><a href="">Home</a></li><br /> <li><a href="">Blog</a></li><br /> <li><a href="">About</a></li><br /> <li><a href="">Contact</a></li><br /> </ul><br /></div><br />26<br /><nav><br /><ul><br /> <li><a href="">Home</a></li><br /> <li><a href="">Blog</a></li><br /> <li><a href="">About</a></li><br /> <li><a href="">Contact</a></li><br /> </ul><br /></nav><br />Previously<br />HTML 5<br />
  • 34. Articles<br />27<br />
  • 35. Articles<br /><divclass="post”><br /><divclass="postheader"><br /><h3><ahref="">I Scream My Thoughts</a></h3><br /><pclass="date">August 10, 2011</p><br /></div><br /><p>You probably haven't heard of them duis</p><br /></div><br />28<br /><article><br /> <header><br /> <h1><ahref="">I Scream My Thoughts</a></h1><br /> <time>August 10, 2011</time><br /> </header><br /> <p>You probably haven't heard of them duis</p><br /></article><br />Previously<br />HTML5<br />
  • 36. An article is a piece of content that can stand on it’s own<br />29<br />
  • 37. Date and Time<br /><time datetime={datetime} pubdate>Human Readable String</time><br />Datetime<br />Date: 2011-09-20<br />Datetime: 2011-09-20T20:00Z<br />Datetime: 2011-09-20T20:00+00:00<br />Pubdate<br />Used with article to denote that this particular time is the publication date. <br />30<br />
  • 38. Date Time<br />31<br />Just the <br />letter T<br />2011-09-20T20:00Z<br />Z for <br />Zulu Time<br />Hours:Minutes<br />Year-Month-Day<br />Just the <br />letter T<br />2011-09-20T20:00+00:00<br />Year-Month-Day<br />Hours:Minutes<br />Time Zone Offset<br />
  • 39. Section?<br />32<br />There’s also this thing called “<section>” how does that work. <br />
  • 40. An Article is a piece of stand-alone content<br />33<br />
  • 41. Blog Post<br />34<br />
  • 42. Or a comment<br />35<br />
  • 43. A section is a collection of related pieces of content<br />36<br />
  • 44. 37<br />
  • 45. Articles can contain Sections<br />38<br />
  • 46. Blog Post<br />39<br />Article<br />Section<br />Section<br />Section<br />
  • 47. Sections can contain Articles<br />40<br />
  • 48. Articles can contain other articles<br />41<br />
  • 49. 42<br />Article<br />Section<br />Section<br />Section<br />Article<br />Article<br />
  • 50. Content<br />43<br />
  • 51. Content<br /><divclass=”content”><br /> <divclass="post”><br /> ...<br /> </div><br /> <divclass="post”><br /> ...<br /> </div><br /> <divclass="post”><br /> ...<br /> </div><br /></div><br />44<br /><divclass=”content”><br /> <article><br /> ...<br /> </article><br /><article><br /> ...<br /> </article><br /><article><br /> ...<br /> <article><br /></div><br />Previously<br />HTML5<br />
  • 52. Also can be correct<br /><divclass=”content”><br /> <divclass="post”><br /> ...<br /> </div><br /> <divclass="post”><br /> ...<br /> </div><br /> <divclass="post”><br /> ...<br /> </div><br /></div><br />45<br /><section class=”content”><br /> <article><br /> ...<br /> </article><br /><article><br /> ...<br /> </article><br /><article><br /> ...<br /> <article><br /></section><br />Previously<br />HTML5<br />
  • 53. Umm<br />46<br />That’s great, but frankly not that much of a different, how is that better?<br />
  • 54. Benefit 1<br /> </div><br /> </div> <br /></div><br /><div id=“footer”><br /></div><br /></body><br />47<br /> </div><br /> </article> <br /></div><br /><footer><br /></footer><br /></body><br />Before these Elements<br />After<br />
  • 55. Benefit 2<br />Less monkeying with content hierarchies<br />48<br />
  • 56. 49<br />Post Page<br />Main Page<br />Archive Page<br /><article><br /> <header><br /> <h1><a href="">I Made a Post Thingie</a></h1><br /> <time datetime="2011-09-02">September 2, 2011</time><br /> </header><br /> <imgsrc="img/captain-awesome.jpg" width="300" height="200" alt="Image of Captain Awesome" /><br /> <p>DIY eanulla photo booth temporoccaecat, velitnihilmixtapescenester. <br /> Irony laboris echo park, wolf officia vice cupidatatlabore butcher freegan<br /> farm-to-table nisi velitaliqua gluten-free. Aliquipnesciuntassumenda, <br /> wayfarers seitan wolf reprehenderitnulla twee sartorial dolore food truck <br />voluptateex vinyl. Aliquip ex enim, irony terry richardson trust fund consectetur<br />fappariatur dolor. Lo-fi nulla whatever mlkshk, banksyamerican apparel carles<br />adipisicingincididunt wolf photo booth hipster. Wayfarers four loko ex cosby sweater, <br />adipisicingsartorial non cardigan craft beer cillumreprehenderit terry richardson<br /> 3 wolf moon mollit. Ethical utlabore beard, 3 wolf moon duis readymade assumenda<br /> hipster tofu mcsweeney's master cleanse.</p><br /></article><br />article header h1<br />Article<br />Article<br />Article<br />
  • 57. Benefit 3<br />No longer bound to one header or one navcan have multiple. <br />50<br />
  • 58. New Elements work across Modern Browsers without Fail<br />51<br />
  • 59. What’s you’re definition of Modern?<br />52<br />
  • 60. Use the HTML 5 Shiv<br />53<br />http://code.google.com/p/html5shiv/<br />
  • 61. Attributes<br />54<br />
  • 62. data<br />55<br /><ul><li>Add “data-” to anything to make your content contain data
  • 63. Uses?
  • 64. Scritping
  • 65. Microformats
  • 66. Perhaps future Search Engine hints.</li></ul><p data-firstname=“Terry” data-lastname=“Ryan”>Terry Ryan</p><br />
  • 67. These next things aren’t semantic, just kinda cool<br />56<br />
  • 68. contenteditable<br />57<br /><ul><li>Allows any text to be user editable, not just input and textareas.
  • 69. Uses
  • 70. Better CMS systems
  • 71. Comment previews</li></ul><p contenteditable="true” class="comment">Comment</p><br />
  • 72. spellcheck<br />58<br /><ul><li>Allows any field that is user editable to trigger the browser’s spellcheck interface
  • 73. Uses:
  • 74. No one spellchecks anything they post on the web
  • 75. But you will have the moral high ground to point out on your site they could have. </li></ul><p contenteditable="true" spellcheck="spellcheck" class="comment">Comment</p><br />
  • 76. Form<br />59<br />Input<br />
  • 77. HTML5 includes lots of new Input types<br />60<br />
  • 78. They aren’t supported on every browser<br />61<br />
  • 79. All browsers default to showing unknown input types as Text<br />62<br />
  • 80. Search<br />63<br /><ul><li>Support is spotty
  • 81. Browser vendors tend to round, add magnifying glass, etc. </li></ul><input type=“search” name=“search” /><br />
  • 82. Email<br />64<br /><ul><li>Provides validation
  • 83. Provides email keyboard on iOS devices.</li></ul><input type=“email” name=“email” /><br />
  • 84. Url<br />65<br /><ul><li>Provides validation
  • 85. Provides url keyboard on iOS devices.</li></ul><input type=“url” name=“url” /><br />
  • 86. Number<br />66<br /><ul><li>Provides keypad on iOS and Android devices.
  • 87. Provides a stepper on desktops
  • 88. Takes attributes:
  • 89. Min/Max
  • 90. Step</li></ul><input type=“number” name=“cost” /><br />
  • 91. Tel<br />67<br /><ul><li>Provides keypad on iOS and Android devices.</li></ul><input type=“tel” name=“cell” /><br />
  • 92. Not well supported, but have potential<br />68<br />
  • 93. Range<br />69<br /><ul><li>Provides a set of values
  • 94. The slider allows you to pick one
  • 95. Not terribly precise
  • 96. Takes attributes:
  • 97. Min/Max
  • 98. Step</li></ul><input type=“range” name=“volume” /><br />
  • 99. Date<br />70<br /><ul><li>Provides validation
  • 100. On Opera
  • 101. Displays a data picker
  • 102. On Safari/Chrome
  • 103. Displays ticker
  • 104. IE
  • 105. Dashes your hopes and dreams the way only IE can</li></ul><input type=“date” name=“dob” /><br />
  • 106. Form Elements<br />71<br />
  • 107. Output<br />Semantically correct placeholder for calculated values.<br />Can also be used a label for input type=“slider”<br /><output /><br />
  • 108. Output in Action<br />73<br /><form class="order"><br /><label for="quantity">Quantity:</label><br /><input id="quantity" name="quantity" type="number" value="1" onChange="calc()" /><br /><br/><br /><label for="price">Price: </label><br /><input id="price" name="price" type="number" value="19.99" disabled /><br /><br/><br /><label for="total">Total: </label><br /><output id="total" name="total" /><br /><br/><br /></form><br /><script type="application/javascript"><br />function calc(){<br />varquantity = document.getElementById("quantity").value;<br />varprice = document.getElementById("price").value; <br />vartotal = document.getElementById("total");<br />total.value= Math.round(quantity * price * 100)/100; <br />}<br /></script><br />
  • 109. meter<br />74<br />Basically a Bar Chart of results<br /><meter min=“0” max=“20” value=“12”>12cm</meter><br />
  • 110. progress<br />75<br />Could be used to indicate progress through a multistep form<br />Could be programmatically changed to indicate progress of program<br /><progress min=“100” value=“20”>20%</progress><br />
  • 111. Pitfalls<br />76<br />
  • 112. Remember 10 years ago?<br />77<br />
  • 113. On Tableless designs<br />78<br />Don’t use tables for layout, use CSS.<br />Tables are for tabular data. They are just one of the tools in your toolkit. <br />Holzschlag<br />Shea<br />Icons by:<br />http://www.ngenworks.com/<br />Zeldman<br />
  • 114. What people heard<br />79<br />Don’t use tables for layout, use CSS.<br />Tables are for tabular data. They are just one of the tools in your toolkit. <br />Holzschlag<br />Shea<br />Icons by:<br />http://www.ngenworks.com/<br />Zeldman<br />
  • 115. I’m not saying<br />80<br />Don’t use div’swhen there are semantic elements that make sense. Div’s are stillgood fordenoting thingsthat have no semantic equivalent<br />
  • 116. I’m not saying<br />81<br />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<br />
  • 117. You are not requiredto do any of what I just said<br />82<br />
  • 118. Article vs. Section<br />83<br />
  • 119. Nav vs. Menu<br />84<br />
  • 120. A lot of this stuff is in Flux<br />85<br />
  • 121. Conclusions<br />86<br />
  • 122. Can you use it?<br />87<br />
  • 123. On Desktops<br />88<br />
  • 124. The most common browsers have crappy HTML 5 support <br />89<br />Source: https://netaverages.adobe.com<br />
  • 125. New Elements<br />Supported on most browsers<br />If they are not supported, can be enabled using the HTML 5 Shiv<br />90<br />
  • 126. New Attributes<br />Supported on most browsers<br />If they are not supported, they have no impact.<br />91<br />
  • 127. New Form Inputs<br />Support wildly varies<br />If they are not supported, they have no impact.<br />92<br />
  • 128. New Form Elements<br />Support wildly varies<br />Mimic things that have been provided by JavaScript for years<br />93<br />
  • 129. On Mobile<br />94<br />
  • 130. 95<br />
  • 131. Big Question: Why use this stuff??<br />96<br />
  • 132. 97<br />It’s Also about the Annoyed Reader<br />Used to be about the “Blind Billionaire<br />
  • 133. All They Care About is this<br />98<br />Content<br />
  • 134. More Content here<br />More <br />Content here<br />More <br />Content here<br />We can tell them<br />99<br />Content<br />
  • 135. And increase the understandability of your code<br />100<br />
  • 136. For Future Reference<br />HTML 5 General <br />http://diveintohtml5.org<br />http://html5doctor.com<br />HTML5 Semantics<br />http://diveintohtml5.org/semantics.html<br />HTML 5 Forms<br />http://wufoo.com/html5<br />http://diveintohtml5.org/forms.html<br />101<br />
  • 137. Follow up?<br />Feel free to contact me<br />terry.ryan@adobe.com<br />http://terrenceryan.com<br />Twitter: @tpryan<br />

×