HTML5 New Elements

HTML5 includes bunch of new elements for drawing graphics, adding media content, better page structure, better form handling, and several APIs to drag/drop elements, find Geolocation, include web storage, application cache, web workers, etc. HTML5 brings many new elements to allow developers to make their web page more easily understood by search engines, display data in different sections such as header, footer, navigation, artical, section etc.

In earlier version of HTML, in order to add media contents such as video or play audio clips you require to write complex JavaScript code or browser plug-ins like Flash and Silverlight to handle them. With the help of new HTML5 tags you can achieve all this without writing complex Javascript code. Here are new tags in HTML5 that will make it easier for you to write your Web Sites.

HTML5 Elements List

Tag NameDescription
<article>This is used to represent text as article.
<aside>This is used to represent content aside from the page content.
<audio>This is used to represent sound content in web page.
<bdi>This is used to represent an isolated text that might be formatted in a different direction from other text outside it.
<canvas>This is used to represent graphics on the fly, via scripting (usually JavaScript).
<command>This is used to represent a command button that a user can invoke.
<datalist>This is used to represent a list of pre-defined options for input controls.
<details>This is used to represent additional details that the user can view or hide.
<embed>This is used to represent a container for an external application or interactive content (a plug-in).
<figure>This is used to represent self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption>This is used to represent a caption for a <figure> element.
<footer>This is used to represent a footer for a document or footer section.
<header>This is used to represent a header for a document or header section.
<hgroup>This is used to represent a heading groups, a set of <h1> to <h6> elements when a heading has multiple levels.
<keygen>This is used to represent a key-pair generator field (for forms).
<mark>This is used to represent marked or highlighted text.
<meter>This is used to represent a scalar measurement within a known range (a gauge).
<nav>This is used to represent navigation links of web page.
<output>This is used to represent the result of a calculation.
<progress>This is used to represent the progress of a task in a progress bar.
<ruby>This is used to represent a ruby annotation (for East Asian typography).
<rt>This is used to represent an explanation or pronunciation of characters (for East Asian typography).
<rp>This is used to represent what to show in browsers that do not support ruby annotations.
<section>This is used to represent a section in a document.
<source>This is used to represent multiple media resources for <video> and <audio>.
<summary>This is used to represent a visible heading for a <details> element.
<track>This is used to represent text tracks for <video> and <audio>.
<time>This is used to represent a date and time.
<video>This is used to represent a video or movie.
<wbr>This is used to represent a possible line-break.