List of 25+ New tags introduced in HTML 5 at a glance

 HTML 5 , the new version of HTML brings a lot of changes to the HTML specification.But aside from that, HTML 5 has brought in some cool new features like embedding audio, video, graphics, client-side data storage, and interactive documents in the Web Pages. It is expected to bring Clarity and reduce development costs by making precise rules on how to handle all HTML elements, and how to recover from errors.
 HTML 5 brings in 25 new tags to help build your websites.

Some of these tags are a long time coming to HTML, and others are a bit complicated. But they all serve a purpose.

So here is the list of 25 new tags introduced in HTML 5 :

Layout Tags

The new layout tags in HTML 5 allow you to define sections of your Web page as layout areas without needing a div tag to define them. Your header is surrounded by the header tag, and your navigation is surrounded by the nav tag. Use these tags just like you would a div tag for your layout - only now they are named for you, so you don't need an id unless you want one.

<article> Tag

The tag defines external content. The external content could be a news-article from an external provider, or a text from a web log (blog), or a text from a forum, or any other content from an external source.

<aside> Tag

The tag defines some content aside from the content it is placed in. The aside content should be related to the surrounding content.

<figure> Tag

The <figure> tag is used to group some elements. The content inside a figure element is stand-alone content, typically used to explain parts of a document, but also able to move from the document and put somewhere else.

<footer> Tag

The <footer> tag defines the footer of a section or document. Typically contains the name of the author, the date the document was written and/or contact information.

<header> Tag

The <header> tag defines an  introduction to the document.

<nav> Tag

The <nav> tag defines a section of navigation.

<section> Tag

The <section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document.

Multimedia Content

HTML 5 is attempting to make video and audio easier to add to Web pages. One of the ways that it is doing that is by providing specific tags for audio, video, and the source files.

<audio> Tag

The tag defines sound, such as music or other audio streams.

<source> Tag

The <source> tag defines media resources for media elements, such as <video> and <audio>.

<video> Tag

The <video> tag defines video, such as a movie clip or other video streams.

Web Applications and Ajax or DHTML

HTML 5 adds some tags into the language specifically for Web applications, Ajax, and DHTML. These tags give more hooks to your scripting languages and provide a framework for the browsers to deliver the application data.

<canvas> Tag

The <canvas> tag is used to display graphics. The <canvas> tag is only a container for graphics, you must use a script to actually paint graphics.

<command> Tag

The <command> tag defines a command button, like a radiobutton, a checkbox, or a button. The command element must be inside a menu element. If not, it will not be displayed.

<datalist> Tag

The <datalist> tag defines a list of options. Use this element together with the input element, to define which values the input element can have. The datalist and its options will not be displayed, it is only a list of legal input values. Use the input element’s list attribute to bind it together with a datalist.

<datagrid> Tag

<datagrid> tag references dynamic data in a tree form or tabular data form

<details> Tag

The <details> tag is used to describe details about a document, or parts of a document.

<output> Tag

The <output> tag defines different types of output, such as output written by a script.

<progress> Tag

The <progress> tag defines work-in-progress. Use the progress element to display the progress of a time consuming function in Javascript.

Ruby Annotations

"Ruby" are short runs of text alongside the base text, typically used in East Asian documents to indicate pronunciation or to provide a short annotation. HTML 5 provides access to ruby through three tags:

<rp> Tag

The <rp> tag is used in ruby annotations, to define what to show browsers that do not support the ruby element. A ruby annotation is Chinese notes or characters. Used in East Asia, to show the pronunciation of East Asian characters.

<rt> Tag

The <rt> tag defines an explanation or pronunciation of characters (Chinese notes or characters). Used in East Asia, to show the pronunciation of East Asian characters.

<ruby> Tag

The <ruby> tag defines a ruby annotation (Chinese notes or characters). Used in East Asia, to show the pronunciation of East Asian characters. Use together with the <rt> and/or the <rp> tags:
The ruby element consists of one or more characters (that needs an explanation/pronunciation), and a rt element that gives that information, and optionally a rp element that defines what to show browsers that do not support the “ruby” tag.

Other New Tags

There are also some new tags that help you mark up your HTML more effectively. These help the browsers know exactly what different elements on the page are:

<summary> Tag

The <summary> tag contains a header for the “details” element, which is used to describe details about a document, or parts of a document.

<time> Tag

The <time> tag defines a time or a date, or both.

<source> Tag

The <source> tag defines media resources for media elements, such as <video> and <audio>.

<mark> Tag

The <mark> tag defines marked text. Use the <mark> tag if you want to highlight parts of your text.

<meter> Tag

The <meter> tag defines a measurement. Used only for measurements with a known minimum and maximum value.

<hgroup> Tag

The <hgroup> tag defines the heading of a section or a document. The hgroup element is used to group headers, <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings.

<keygen> Tag

The <keygen> tag defines a generated key.