Introduction of New Elements in HTML5

Introduction

In this article, you will see new elements in HTML5. These elements have enhanced the functionality of HTML. HTML5 also includes new elements for drawing graphics, adding media content, better page structure, better form handling, and several APIs to drag/drop elements, Geolocation, include web storage, application cache, web workers and so on.

<canvas>

Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to those of other common 2D APIs, thus allowing for dynamically generated graphics. The markup looks like this: <canvas id="Mycanvas" width="300px" height="300px"></canvas>

New Media Elements

Tag	Description
<audio>	Represents sound content in documents.
<video>	Specifies video in an HTML document.
<source>	Specifies multiple media resources on media elements (such as <audio> and<video>).This element allows you to specify alternative video and audio files that the browser may choose from based on its media type or codec support.
<embed>	Embeds an external application or interactive content into an HTML document. Note that the <embed> element is an empty element (no closing tag is used).
<track>	Specifies external timed text tracks for media elements (in other words the <video> element and the <audio> element). The text tracks specified with the <track> tag could include subtitles, captions, descriptions, chapters, and metadata.

New Structural Elements

<article>

The HTML <article> Element represents a self-contained composition in a document, page, application, or site, that is intended to be independently distributable or reusable, e.g., in syndication.

The markup looks like this:

<article>
<h4>Introducing of new elements of HTML5</h4>
<p>Content of article</p>
</article>

<aside>

Represents content related to the surrounding content within an article or web page, but could still stand alone in its own right. This type of content is often represented in sidebars.

The markup look like this:

<aside>
<h4>C# Corner</h4>
<p>Web Design page.</p>
</aside>

<bdi>

Used on a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting. This can be useful when displaying right-to-left text (such as Arabic) inside left-to-right text (such as English) when the text-direction is unknown.

The markup look like this:

<ul>
<li>User <bdi>Suraj</bdi>: 8 points</li>
<li>User <bdi>vipin</bdi>: 9 points</li>
<li>User <bdi>إيان</bdi>: 6 points</li>
</ul>

<command>

Used for specifying a command that the user can invoke. A command is an abstraction behind menu items, buttons, and links. Once a command is defined, other parts of the interface can refer to the same command, allowing many access points to a single feature to share aspects such as the disabled state.

The markup look like this:

<command type="command" label="Save" icon="icons/save.png" onclick="save()"/>

<details>

Specifies additional details that the user can view or hide on demand. It can be used in conjunction with the HTML5 <summary> tag to provide a heading that can be clicked on to expand/collapse the details as required.

The markup looks like this:

<details>
<summary>Some details</summary>
<p>More info about the details.</p>
</details>
<dialog>

Indicates a dialog among a number of people. Examples of a dialog could include a conversation, meeting minutes, a chat transcript, a dialog in a screenplay or an instant message log. To present a dialog, this element must include an <dt> element to represent the speaker and a <dd> to represent the quote from the speaker.

The markup look like this:

<dialog>
<dt>Name</dt>
<dd>Text Here.</dd>
</dialog>

<footer>

Used for defining the footer of an HTML document or section. Footers usually contain information such as the author of the document, copyright information, links to terms of use, privacy policy, and so on. Contact information within a <footer> tag should be marked up using the <address> tag.

The markup looks like this:

<footer>
<ul>
<li>copyright</li>
<li>sitemap</li>
<li>contact</li>
<li>to top</li>
</ul>
</footer>

<header>

Represents a group of introductory or navigational aids. Headers can contain headings, subheadings, version information, navigational controls, and so on. The <header> element is intended to usually contain the section's heading (an <h1>-<h6> element or an <hgroup> element), but this is not required. The <header> element can also be used to wrap a section's table of contents, a search form, or any relevant logos. The <header> tag cannot be placed within a <footer>, <address> or another <header> element.

The markup look like this:

<header>
<h1>The most important heading on this page</h1>
<p>With some supplementary information</p>
</header>

<mark>

Used for indicating text as marked or highlighted for reference purposes, due to its relevance in another context.

The markup looks like this:

<p>used of mark for
<mark>highlight</mark> document.
</p>

<meter>

Used for indicating a scalar measurement within a known range, or a fractional value. Also known as a gauge, usage could include displaying disk usage, the amount raised during fundraising activities, or the relevance of a search query result. It is important to note that the <meter> element represent a range.

The markup look like this:

<p>Your score is: <meter min="0" max="10">2 out of 10</meter></p>

<nav>

Used for declaring a navigational section of the HTML document. Websites typically have sections dedicated to navigational links; links that enable the user to navigate within the site. These links should be placed inside a <nav> tag.

The markup looks like this:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

<progress>

Represents the progress of a task. This element could be used in conjunction with JavaScript to display the progress of a task or process as it is underway.

The markup looks like this:

<progress value="70" max="100">70 %</progress>

<section>

Represents a section within an article. Any given web page or article could have many sections.

The markup look like this:

<section>
<h1>Any level of heading</h1>
rest of the content
</section>

<time>

Declares the date and/or time within an HTML document.

The markup look like this

<p>The concert took place on <time datetime="2013-07-10 17:00">July 10</time>.</p>