Post on 12-Jan-2016
The New Elements
© 2012
Main Menu
Structure Media
Canvas Form
Click on one of the categories below to view information about the new HTML5 elements in that category.
STRUCTURE
Sitemap
MEDIA CANVAS FORM
<audio>
<source>
<video>
<embed>
<canvas> <datalist>
<output>
MAIN MENU
<article>
<section>
<header>
<hgroup>
<nav>
<footer>
<time>
<details>
<figure>
TITLE
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 Click
Lost?
Want to start over? Confused?
Click Clickor
New Structure ElementsThese useful tags can provide additional structure to our HTML, and will often be used in place of the semantically-void <div> element.
<article>
<section>
<header>
<hgroup>
<nav>
<footer> <time>
<details>
<figure>
<article>
• 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.
<section>
• To distinguish sections in your content — often separated thematically
• This could include chapters, topical separations, and may contain individual headings
<header>
• 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
<hgroup>
• Used to group a section of headings (h1-h6)
• Allows for groups of headings with only the main heading of the <hgroup> being contributed to the outline of the document
<nav>
• Marks a section of navigation, usually the main navigation
• A site can have multiple <nav> elements (ex: global navigation and intra-page navigation)
<footer>
• Used for footers of entire pages, sections, articles, etc.
• Might contain copyright information, date, contact information, etc.
<time>
• Used for time (on a 24 hour clock) and dates
• Optional attributes datetime and pubdate (publication date) can also be used with this element
<details>
• This element allows the user to toggle details of a topic on demand
• <summary> is used within <details> to provide a summary of the contents to be revealed
View Demo
<figure>
• Often used for images, diagrams or code snippets, <figure> represents self-contained content that could be independent of surrounding text
• Sometimes <figcaption> is used to provide a caption
End of new Structure elements
Structure Menu
Main Menu
New Media ElementsThese media elements provide support for interactive content, audio, video and other forms of media.
<audio>
<source>
<video>
<embed>
<audio>
• Used for sound content (sound clips, music, audio streams, etc.)
• Includes several optional attributes
• Need to check media formats against browser compatibility!
<source>
• Defined inside video or audio elements
• Used to provide multiple media resources for <video> and <audio> elements
• src is a required attribute
<video>
• 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)
<embed>
• 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
End of new Media elements
Media Menu
Main Menu
The Canvas ElementThe canvas element stands in a class of its own! Continue on to read more about this new element.
<canvas>
<canvas>
• Used to draw graphics using some type of scripting (usually JavaScript)
• Can also be used to implement 3D graphics with WebGL
End of new Canvas element
Canvas Menu
Main Menu
New Form ElementsThese useful elements provide additional support within forms.
<datalist>
<output>
<datalist>
• 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!
<output>
• This element is used to represent the result of a calculation (usually performed by a script)
End of new Form elements
Form Menu
Main Menu
More InformationKeep 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 Networkhttps://developer.mozilla.org/en/HTML/HTML5
W3.org – Working Drafthttp://www.w3.org/TR/2012/WD-html-markup-20120329/elements.html