1. The New Elements © 2012

2. Main Menu Structure Media Canvas Form Click on one of the categories below to view information about the new HTML5 elements in that category.

3. STRUCTURE Sitemap MEDIA CANVAS FORM MAIN MENU TITLE

4. Need Help? Learn more information about new HTML5 elements Visit a sitemap with links to each element discussed in this app Home takes you back to the beginning title. Main Menu takes you to the main element categories Brings you here for navigational guidance Want more information? Click Lost? Want to start over?Confused? Click or

5. New Structure Elements These useful tags can provide additional structure to our HTML, and will often be used in place of the semantically-void element.

6. For stand-alone content that could be independently reusable or distributed This might include a blog post, an article, a stand-alone widget of some kind, etc.

7. To distinguish sections in your content — often separated thematically This could include chapters, topical separations, and may contain individual headings

8. Used to mark the header of a page or section of content Can also contain navigation, logos, a search form or other elements typically found in a header

9. Used to group a section of headings (h1-h6) Allows for groups of headings with only the main heading of the being contributed to the outline of the document

10. Marks a section of navigation, usually the main navigation A site can have multiple elements (ex: global navigation and intra- page navigation)

11. Used for footers of entire pages, sections, articles, etc. Might contain copyright information, date, contact information, etc.

12. Used for time (on a 24 hour clock) and dates Optional attributes datetime and pubdate (publication date) can also be used with this element

13. This element allows the user to toggle details of a topic on demand is used within to provide a summary of the contents to be revealed View Demo

14. Often used for images, diagrams or code snippets, represents self- contained content that could be independent of surrounding text Sometimes is used to provide a caption

15. End of new Structure elements Structure Menu Main Menu

16. New Media Elements These media elements provide support for interactive content, audio, video and other forms of media.

17. Used for sound content (sound clips, music, audio streams, etc.) Includes several optional attributes Need to check media formats against browser compatibility!

18. Defined inside video or audio elements Used to provide multiple media resources for and elements src is a required attribute

19. For video content Includes several optional attributes Need to check media formats against browser compatibility! (Can offer an option to download the file if format not supported)

20. Used to embed interactive content (ex. plug-ins/Flash content) Attributes include src, height, width and type A “/” may or may not be present at the end

21. End of new Media elements Media Menu Main Menu

22. The Canvas Element The canvas element stands in a class of its own! Continue on to read more about this new element.

23. Used to draw graphics using some type of scripting (usually JavaScript) Can also be used to implement 3D graphics with WebGL

24. End of new Canvas element Canvas Menu Main Menu

25. New Form Elements These useful elements provide additional support within forms.

26. Can be used to provide suggestions to the user for the values of other form elements Can mimic a simple “autocomplete” feature in a form field Check browser compatibility before use!

27. This element is used to represent the result of a calculation (usually performed by a script)

28. End of new Form elements Form Menu Main Menu

29. More Information Keep in mind this presentation does not contain all of the new HTML5 elements, and that the HTML5 spec is still a work in progress! In addition to the new additions, there are also revisions to some of the older elements, and some attributes have been deprecated. For more information check out: Mozilla Developer Network https://developer.mozilla.org/en/HTML/HTML5 Mozilla Developer Network https://developer.mozilla.org/en/HTML/HTML5 W3.org – Working Draft http://www.w3.org/TR/2012/WD-html-markup-20120329/elements.html W3.org – Working Draft http://www.w3.org/TR/2012/WD-html-markup-20120329/elements.html