HTML5 Semantic Web

1. HTML5 Semantic Web Terry Ryan | Worldwide Developer Evangelist @tpryan

2. Who are you? 2

3. Not Sexy and Adventurous 3

4. It’s everyday stuff 4

5. Agenda Introduction Overview of Semantics New Semantic elements New Semantic attributes New Form Input Types New Form attributes Pitfalls Conclusions 5

6. Overview 6 Semantics

7. Semantic HTML means your markup describes it’s content without Presenting it 7

8. What do we mean by Semantic HTML HTML 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 information HTML where extraneous elements are not misused No <p> for line breaking No <blockquote> for indentation No <h1> for big text HTML without presentation information No <font>, <b>, <i> tags No inline styles 8

9. Semantic HTML is a moving target Not Boolean Not always objective A continuum 9

10. Semantic HTML <body background="css/bg.png"> <font face="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 Unsemantic Relatively Semantic

11. HTML5? 11 What does this have to do with HTML5?

12. HTML5 adds more semantics <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 Awesome Blog of Awesome 13 HTML5 XHTML

14. Elements 14

15. Header 15

16. Header <div id="header"> <h1>The Awesome Blog 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 5 Previously

17. Hgroup? 17 What’s the <hgroup> all about?

18. Hgroup 18 <hgroup> <h1></h1> <h2></h2> </hgroup> It’s for grouping related headers, that don’t spawn their own node in the outline

19. Hgroup? 19 Huh?

21. H2 - Awesome is a State of Mind

22. H2 - Recent Posts

23. H3 I Made a Post Thingie

25. H2 Recent Posts

26. H3 I Made a Post Thingie

27. H3 My Thoughts are made manifest No Hgroup With HGroup

28. Hgroup? 21 Still huh?

29. 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 22

30. Footer 23

32. Navigation 25

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> Previously HTML 5

34. Articles 27

35. Articles <divclass="post”> <divclass="postheader"> <h3><ahref="">I Scream My Thoughts</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> Previously HTML5

36. An article is a piece of content that can stand on it’s own 29

37. Date and Time <time datetime={datetime} pubdate>Human Readable String</time> Datetime Date: 2011-09-20 Datetime: 2011-09-20T20:00Z Datetime: 2011-09-20T20:00+00:00 Pubdate Used with article to denote that this particular time is the publication date. 30

38. Date Time 31 Just the letter T 2011-09-20T20:00Z Z for Zulu Time Hours:Minutes Year-Month-Day Just the letter T 2011-09-20T20:00+00:00 Year-Month-Day Hours:Minutes Time Zone Offset

39. Section? 32 There’s also this thing called “<section>” how does that work.

40. An Article is a piece of stand-alone content 33

41. Blog Post 34

42. Or a comment 35

43. A section is a collection of related pieces of content 36

44. 37

45. Articles can contain Sections 38

46. Blog Post 39 Article Section Section Section

47. Sections can contain Articles 40

48. Articles can contain other articles 41

49. 42 Article Section Section Section Article Article

50. Content 43

51. Content <divclass=”content”> <divclass="post”> ... </div> <divclass="post”> ... </div> <divclass="post”> ... </div> </div> 44 <divclass=”content”> <article> ... </article> <article> ... </article> <article> ... <article> </div> Previously HTML5

52. Also can be correct <divclass=”content”> <divclass="post”> ... </div> <divclass="post”> ... </div> <divclass="post”> ... </div> </div> 45 <section class=”content”> <article> ... </article> <article> ... </article> <article> ... <article> </section> Previously HTML5

53. Umm 46 That’s great, but frankly 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 Elements After

55. Benefit 2 Less monkeying with content hierarchies 48

56. 49 Post Page Main Page Archive Page <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 consectetur fappariatur dolor. Lo-fi nulla whatever mlkshk, banksyamerican apparel carles adipisicingincididunt 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 h1 Article Article Article

57. Benefit 3 No longer bound to one header or one navcan have multiple. 50

58. New Elements work across Modern Browsers without Fail 51

59. What’s you’re definition of Modern? 52

60. Use the HTML 5 Shiv 53 http://code.google.com/p/html5shiv/

61. Attributes 54

63. Uses?

64. Scritping

65. Microformats

66. Perhaps future Search Engine hints.<p data-firstname=“Terry” data-lastname=“Ryan”>Terry Ryan</p>

67. These next things aren’t semantic, just kinda cool 56

69. Uses

70. Better CMS systems

71. Comment previews<p contenteditable="true” class="comment">Comment</p>

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. <p contenteditable="true" spellcheck="spellcheck" class="comment">Comment</p>

76. Form 59 Input

77. HTML5 includes lots of new Input types 60

78. They aren’t supported on every browser 61

79. All browsers default to showing unknown input types as Text 62

81. Browser vendors tend to round, add magnifying glass, etc. <input type=“search” name=“search” />

83. Provides email keyboard on iOS devices.<input type=“email” name=“email” />

85. Provides url keyboard on iOS devices.<input type=“url” name=“url” />

87. Provides a stepper on desktops

88. Takes attributes:

89. Min/Max

90. Step<input type=“number” name=“cost” />

92. Not well supported, but have potential 68

94. The slider allows you to pick one

95. Not terribly precise

96. Takes attributes:

97. Min/Max

98. Step<input type=“range” name=“volume” />

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<input type=“date” name=“dob” />

106. Form Elements 71

107. Output Semantically correct placeholder for calculated values. Can also be used a label for input type=“slider” <output />

108. Output in Action 73 <form class="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. meter 74 Basically a Bar Chart of results <meter min=“0” max=“20” value=“12”>12cm</meter>

110. progress 75 Could be used to indicate progress through a multistep form Could be programmatically changed to indicate progress of program <progress min=“100” value=“20”>20%</progress>

111. Pitfalls 76

112. Remember 10 years ago? 77

113. On Tableless designs 78 Don’t use tables for layout, use CSS. Tables are for tabular data. They are just one of the tools in your toolkit. Holzschlag Shea Icons by: http://www.ngenworks.com/ Zeldman

114. What people heard 79 Don’t use tables for layout, use CSS. Tables are for tabular data. They are just one of the tools in your toolkit. Holzschlag Shea Icons by: http://www.ngenworks.com/ Zeldman

115. I’m not saying 80 Don’t use div’swhen there are semantic elements that make sense. Div’s are stillgood fordenoting thingsthat have no semantic equivalent

116. I’m not saying 81 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

117. You are not requiredto do any of what I just said 82

118. Article vs. Section 83

119. Nav vs. Menu 84

120. A lot of this stuff is in Flux 85

121. Conclusions 86

122. Can you use it? 87

123. On Desktops 88

124. The most common browsers have crappy HTML 5 support 89 Source: https://netaverages.adobe.com

125. New Elements Supported on most browsers If they are not supported, can be enabled using the HTML 5 Shiv 90

126. New Attributes Supported on most browsers If they are not supported, they have no impact. 91

127. New Form Inputs Support wildly varies If they are not supported, they have no impact. 92

128. New Form Elements Support wildly varies Mimic things that have been provided by JavaScript for years 93

129. On Mobile 94

130. 95

131. Big Question: Why use this stuff?? 96

132. 97 It’s Also about the Annoyed Reader Used to be about the “Blind Billionaire

133. All They Care About is this 98 Content

134. More Content here More Content here More Content here We can tell them 99 Content

135. And increase the understandability of your code 100

136. For Future Reference HTML 5 General http://diveintohtml5.org http://html5doctor.com HTML5 Semantics http://diveintohtml5.org/semantics.html HTML 5 Forms http://wufoo.com/html5 http://diveintohtml5.org/forms.html 101

137. Follow up? Feel free to contact me terry.ryan@adobe.com http://terrenceryan.com Twitter: @tpryan

HTML5 Semantic Web

Recommandé

Recommandé

Contenu connexe

Similaire à HTML5 Semantic Web

Similaire à HTML5 Semantic Web (20)

Plus de Terry Ryan

Plus de Terry Ryan (20)

Dernier

Dernier (20)

HTML5 Semantic Web