There are several new features that accompany the new HTML5 standards, and with those, a host of new tags that you’ll be using to add new functionality to your websites, as well as in place of older, now deprecated methods.

This list comprises the new tags that appear in HTML5. As of this writing, not all of these have been implemented across browsers equally, and some may require different browser-by-browser implementation methods.  While the vast majority are at present support, each should be further researched before inclusion in your project.

New Markup Elements

<article>

For external content, like text from a news-article, blog, forum, or any other content from an external source

<aside>

For content aside from the content it is placed in. The aside content should be related to the surrounding content

<command>

A button, or a radiobutton, or a checkbox

<details>

For describing details about a document, or parts of a document

<summary>

A caption, or summary, inside the details element

<figure>

For grouping a section of stand-alone content, could be a video

<figcaption>

The caption of the figure section

<footer>

For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information

<header>

For an introduction of a document or section, could include navigation

<hgroup>

For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings

<mark>

For text that should be highlighted

<meter>

For a measurement, used only if the maximum and minimum values are known

<nav>

For a section of navigation

<progress>

The state of a work in progress

<ruby>

For ruby annotation (Chinese notes or characters)

<rt>

For explanation of the ruby annotation

<rp>

What to show browsers that do not support the ruby element

<section>

For a section in a document. Such as chapters, headers, footers, or any other sections of the document

<time>

For defining a time or a date, or both

New Media Elements

HTML 5 provides a new standard for media content:

Tag

Description

<audio>

For multimedia content, sounds, music or other audio streams

<video>

For video content, such as a movie clip or other video streams

<source>

For media resources for media elements, defined inside video or audio elements

<embed>

For embedded content, such as a plug-in


The Canvas Element

The canvas element uses JavaScript to make drawings on a web page.

Tag

Description

<canvas>

For making graphics with a script


New Form Elements

HTML5 offers more form elements, with more functionality:

Tag

Description

<datalist>

A list of options for input values

<keygen>

Generate keys to authenticate users

<output>

For different types of output, such as output written by a script

New Input Type Attribute Values

Also, the input element’s type attribute has many new values, for better input control before sending it to the server:

Type

Description

tel

The input value is of type telephone number

search

The input field is a search field

url

The input value is a URL

email

The input value is one or more email addresses

datetime

The input value is a date and/or time

date

The input value is a date

month

The input value is a month

week

The input value is a week

time

The input value is of type time

datetime-local

The input value is a local date/time

number

The input value is a number

range

The input value is a number in a given range

color

The input value is a hexadecimal color, like #FF8800

HTML5 also has a new DocType, and a blank template for an HTML5-compliant document has been attached at the bottom of this tutorial. Without this inclusion, the markup will likely not be recognized, and may render some elements inactive. 

Download Source Files