This document provides an overview of HTML5 including browser support, new elements, and features such as audio, video, and forms. It discusses how HTML5 aims to standardize error handling, accessibility, and client-side validation. Deprecated elements like <font> are still supported for backward compatibility but presentational elements should now be handled by CSS. New elements like <header>, <footer>, <nav> and <article> provide more semantic structure. The <canvas> and multimedia elements like <audio> and <video> offer new capabilities without plugins. HTML5 also introduces new form field types and validation. The document recommends using the HTML5 doctype and class names to future-proof websites while the specification is still in development.

1. HTML5One spec to rule them all

2. About MeWho: Stu King – User Experience DesignerWhere: Magenic Studios – Magenic Technologies, Inc.Focused on Design, User Experience Analysis and RIA developmentWhat: Designer and Front-end DeveloperOn the web: www.thedesigndrifter.comOn the twitter: @designdrifter

3. About this presentationHow this presentation is going to work

4. Browser Support for HTML5A browser’s ability to support the features of HTML5 is based on the layout engine it usesLayout Engines

5. Gecko – All Mozilla software, Fire Fox

6. WebKit – Chrome and Safari

7. Trident – Internet Explorer

8. Presto – Opera

9. For this presentation – If a feature of HTML5 is supported, or partially supported by a browser, the browser logo will be displayed on the slide

10. If there is NO support for the feature the browser’s logo will not appear at allBrowser Support for HTML5Indicates full support for the HTML5 elementIndicates partial support for the HTML5 element

11. Why do we need HTML5?What’s in it and why is it so important

12. The HTML5 spec strives to…Establish official rules regarding the use of older HTML elements and support existing contentEstablish standards for error handling that all browsers will followEstablish clearer rules regarding proper document structure for the benefit of accessibility and screen readersProvide client side form validation right in the browser

13. Obsolete vs. DeprecatedTerms and conditions

14. Obsolete vs. DeprecatedMany elements have been retired but that doesn’t mean you will never see them again. In order to be backward compatible the specification still supports old elements.Deprecated – a term used to describe those elements of HTML that we were not supposed to use anymore.

15. <center>

16. <dir>

17. <font>

18. <u>

19. <s>

20. <menu>

21. Etc.Obsolete vs. DeprecatedAre they crazy? Some deprecated elements have been added back into the specification and re-labeled “Obsolete”. This distinction acknowledges that use of these elements is not recommended but must be supported anyway. Obsolete – some elements that are considered obsolete in the new specification.

22. <frame>, <frameset> and <noframes>

23. <big>

24. <font>

25. <center>

26. <strike>Obsolete vs. DeprecatedThe rule is that all elements dealing with “presentational” effects should now be handled by CSS. This includes things like <i>, <b> and <u>.In addition, some presentational attributes are also out.

27. bgcolor

28. cellpadding

29. cellspacing

30. valign

31. alignObsolete vs. DeprecatedNot all presentational elements are out but in most cases their meaning has changed to something semantic.<small>

32. Used to mean – “small font size”

33. Now means – “the small print”

34. <b>

35. Used to mean – “render the text bold”

36. Now means – “this text is stylistically different but with no extra importance”. In a case where the text is important <strong> would be used instead.

37. <i>

38. Used to mean – “render this text in italics”

39. Now means – “in an alternate voice or mood”Document MarkupIt’s the content that matters

40. What does it all mean?HTML5 gives browsers a new way to understand your content.New tags can be used to replace some of those <div> tags.Better content models mean better accessibility and more efficiency for screen readers.More granular outlines mean more flexible use of standard HTML headers such as <h1>

41. <section></section>Group together thematically related content<section> <h1>Code Camp</h1> <p>This event is awesome!</p> <p>so says Stu</p></section>

42. <header></header>Header has nothing to do with position. Markup header content within a section.<section> <header> <h1>Code Camp</h1> </header> <p>This event is awesome!</p> <p>so says Stu</p></section>

43. <footer></footer>Footer has nothing to do with position. Markup footer content within a section.<section> <header> <h1>Code Camp</h1> </header> <p>This event is awesome!</p> <footer> <p>so says Stu</p> </footer></section>

44. <aside></aside>Aside can be used for related but non-essential content. Pull quotes a good example of “aside” content.<aside> “Code Camp was a great experience, I plan to come back next year.”</aside>

45. <article></article>Article is an alternate to section, intended for use with syndicated content<article> <header> <h1>Code Camp</h1> </header> <p>This event is awesome!</p> <footer> <p>so says Stu</p> </footer></article>

46. <nav></nav>Nav is designed to contain major navigation elements.<nav> <ul> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> <li>Link 4</li> </ul></nav>