The List Of New Features(Tag) In HTML 5

April 12th, 2010 Ntt.cc

Although HTML 5 is not a W3C recommendation yet, AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and many hundreds of other vendors have been supporting HTML 5. There are also many sounds discussing like Will HTML5 Be Flash And Silverlight Killer, however, do you really know what are the new features in HTML 5 ? The following is the list of new tags in HTML 5. Enjoy!

The <article> 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.

Example code:

<article>
<a href=http://ntt.cc/2010/03/15/will-html5-css-javascript-really-be-flash-and-silverlight-killer.html>Will HTML5 + CSS + JavaScript Really Be Flash And Silverlight Killer?</a><br />
Before HTML5, although the dynamic user experiences can be done with with Javascript and AJAX…..
</article>

<aside> (Defines content aside from the page content)

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

Example code:

<p>Me and my family visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>

<audio> (Defines sound content)

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

Example code:

<audio src="horse.ogg" controls="controls">
Your browser does not support the audio element.
</audio>

<canvas>(Defines graphics)

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

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.

Example code:

<menu>
<command type="command">Click Me!</command>
</menu>

<datalist>(Defines a dropdown list)

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.

The <details> tag is used to describe details about a document, or parts of a document. Use it together with the <summary> tag to make your own header for the details. The header is visible, and could show the details when the user clicks on the header.

Example code:

<details>This document was written in 2009.</details>

<embed>(Defines external interactive content or plugin)

The <embed> tag defines embedded content, such as a plug-in. You can NOT write text between the start and end tags, to show older browser that they do not support this tag, like for <audio> and <video>.

Example code:

<embed src="helloworld.swf" />

<figcaption>(Defines the caption of a figure element)

The <figcaption> tag contains a caption for the "figure" element. The "figcaption" element should be placed as the first or the last child of the "figure" element.

Example code:

<figure>
<figcaption>WWF</figcaption>
<p>The World Wildlife Foundation was born in 1961…</p>
</figure>

<figure>(Defines a group of media content, and their caption)

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.

Example code:

<figure>
<h1>WWF</h1>
<p>The World Wildlife Foundation was born in 1961…</p>
</figure>

<footer>(Defines a footer for a section or page)

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.

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.

Example code:

<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
<p>The rest of the content…</p>

<keygen>(Defines a generated key in a form)

The <keygen> tag defines a generated key.

<mark>(Defines marked text)

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

Example code:

<p>Do not forget to buy <mark>milk</mark> today.</p>

<meter>(Defines measurement within a predefined range)

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

<rp>(Used in ruby annotations to define what to show browsers that to not support the ruby element.)

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. Use together with the <ruby> and the <rt> 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.