5. Agenda Introduction Overview of Semantics New Semantic elements New Semantic attributes New Form Input Types New Form attributes Pitfalls Conclusions 5
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
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
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
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
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
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>
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>
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
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