New Features of HTML5

Contact Us or call 1-877-932-8228
New Features of HTML5

New Features of HTML5

The table below shows the new elements that HTML5 has introduced. We will cover most of these in this course.

New HTML5 Elements
# Tag Description
1 <article> For a standalone article on a page. Articles can be nested within other articles; for example, a blog post would be contained in <article> tags and each comment would be contained within a nested <article> tag.
2 <aside> For content contained in an aside. Often used for navigation elements or for a list of articles or categories (e.g., in a blog).
3 <audio> For embedding audio files.
4 <bdi> For identifying part of text content that might be formatted in a different direction that neighboring text.
5 <canvas> For creating drawings natively in the browser.
6 <command> For command buttons similar to what you might see in the Microsoft Office 2010 ribbon. <command> must be nested in <menu>.
7 <datalist> For a dropdown list providing built-in functionality similar to a JavaScript autocomplete boxes.
8 <details> For expandable (usually initially hidden) content to provide more information about an element.
9 <embed> For backwards compatibility with the non-standard (but well supported)<embed> tag in HTML 4.
10 <figcaption> Used with <figure> for captions on images and other elements. (In HTML 4, there was no way to semantically associate a caption with any element except a table.
11 <figure> For wrapping embedded content (e.g., an image) with a <figcaption>.
12 <footer> For the footer of a page or a section.
13 <header> For the header of a page or a section.
14 <hgroup> For grouping <h1>...<h6> tags on a page. For example, the title and subtitle of a page could be an <h1> and <h2> grouped in an <hgroup> tag.
15 <keygen> For a generated key in a form
16 <mark> For showing marked (or highlighted) text. Unlike <strong> or <em>, <mark> doesn't give the text any special meaning. The best example is marking a word or phrase that a user has searched on within the search results.
17 <meter> For a measurement within a set range.
18 <nav> For holding a group of navigation links.
19 <output> For holding output (e.g., produced by a script).
20 <progress> For a progress indicator (e.g., for a loading).
21 <rp> Used within <ruby> tags to tell browsers that cannot render the East Asia characters properly what extra characters (usually parentheses) to display.
22 <rt> Used within <ruby> tags to show how to pronounce East Asia characters.
23 <ruby> For ruby annotations. (See for examples.)
24 <section> For creating a <section> on the page. This helps the browser (user agent) determine the page outline.
25 <source> For indicating media sources within <video> and <audio>.
26 <summary> For the header of a <detail> element (must be its first child element). The <summary> would show by default.
27 <time> For holding a machine-readable date and/or time while displaying a friendly date and/or time.
28 <video> For embedding video files.
29 <wbr> An opportunity to insert a line break within a word. (e.g., super<wbr>califragilistic<wbr>expialidocious)

HTML5 and JavaScript

The HTML5 specifications show an API for each HTML5 element, which gives instructions on how to access an elements methods and properties via JavaScript.

JavaScript Cowpaths

Some JavaScript practices long supported by browsers but not officially in the HTML 4 specification have been specified in HTML5:

  1. innerHTML
  2. XMLHttpRequest
  3. JSON
  4. element.getElementsByClassName()

Additional Changes

  1. Native audio and video - covered in HTML5 Audio and Video.
  2. Huge advances with forms - covered in HTML5 Forms.
  3. New ways to store data in the client - covered in HTML5 Web Storage.
  4. Canvas for creating drawings natively in the browser - covered in HTML5 Canvas.
  5. HTML5 introduces the new contenteditable attribute, which makes the content of a tag editable in the browser:
    1. Open html5-how-we-got-here/Demos/html5-layout.html in your browser.
    2. Click on the content in the HTML5 Training section and start editing.


Modernizr is a relatively small JavaScript file that checks the user's browser for HTML5 feature support. The name is a bit of a misnomer as it doesn't actually modernize the browser. It doesn't add any missing features, it just gives developers an easy way of figuring out if the browser supports a given feature, so they can write conditional code like this:

if (Modernizr.canvas) { //use canvas to create awesome drawing application } else { alert("Go get yourself a browser that supports canvas."); }

We use Modernizr in this course (see html5-common/modernizr.min.js in your class files. For the latest version, check

If you are curious what features your browser supports, check out