HTML5 New Elements Tutorial

The HTML5 is for most better then HTML4.1. HTML5 includes all html new elements like- graphics, audio and visual effects, several APIs and reduce the error handling and lot more features.

Some of the elements  briefly describe below:

The aside element:

It defines some content aside from the content it is placed in, aside content is related to surrounding content.

Example:

<p>My Family going to Jammu and Kashmir this summer</p><aside><h3>Kashmir</h3><p>Kashmir is a beautiful place, also called Heaven. </p></aside>

The canvas element:

This element is used to draw graphics using scripting.It is also used to draw graphs, make photo compositions or do simple animations.

Example:

<canvas id=”myCanvas” width=”150″  height=”150″></canvas> <script type=”text/javascript”> var canvas=document.getElementById(‘myCanvas’); var ctx=canvas.getContext(‘2d’); ctx.fillStyle=’#000000′; ctx.fillRect(10,30,0,70); </script>

The Datagrid element:

This element is employed to set row or colmn grid and split number of individual column grid.

Example:

<datagrid> <ol style=”list-style-type:decimal”> <li> (Line 1) </li> <ol style=”list-style-type:lower-alpha;”> <li> (Line 1,0) </li> <li> (Line 1,1) </li> </ol> <li> (Line 2) <ol style=”list-style-type:lower-alpha;”> <li> (Line 2,1) </li> <li> (Line 2,2) </li> </ol> </li> </ol> </datagrid>

The ruby elements:

The ruby tag is employed to indicates a ruby annotation. It display the pronunciation of East Asian characters.

Example:

<ruby> 金<rt>Gold</rt> 銀<rt>Silver</rt> 銅<rt>copper</rt> 碳<rt>carbon</rt> </ruby>

All other elements given below in table:

HTML 5 tags	Description
<article>	It determines article.
<audio>	It determines a sound content.
<aside>	It determines the content aside from the page content.
<bdi>	It indicates Isolates a part of text that might be formatted in a different direction from other text outside it.
<canvas>	It determines Used to draw graphics, on the fly, via scripting.
<data>	It indicates data of the document.
<datagrid>	It determines to set row or colmn grid and split number of individual column grid.
<datalist>	It indicates list of pre-defined options for input controls.
<datails>	It determines the additional information.
<dialog>	It indicates the dialog window of the document.
<embed>	It determines container for an external applications.
<figcaption>	It indicates the Defines a caption for a <figure> element.
<figure>	It determines the self contain content.
<footer>	It indicates the footer of the content.
<header>	It determines the header of the content.
<hgroup>	It indicate the header of an HTML document or section.
<keygen>	It determines key-pair generator field.
<main>	It indicates the main content.
<math>	It determines Helps to include inline cascading style sheet.
<meter>	It indicates scalar measurement within a known range.
<menu>	It determines the list of commands.
<mark>	It display the root of a MathML fragmen.
<nav>	It determines the navigation list.
<output>	It indicates result of calculation.
<progress>	It determines the progress of the task.
<ruby>	It indicates ruby annotation.
<rt>	It determines the explanation of the character .
<rp>	It indicates what to show in the browser if ruby tag is not suported.
<source>	It determines multiple media resources for media elements.
<svg>	It indicates the scalar video graphics.
<section>	It determines the section of the documents.
<summary>	It indicates visible heading for a details element.
<time>	It determines the date and time.
<track>	It indicates text track for media element.
<video>	It determines the video or movie.
<wbr>	It indicates the possible line-break.