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