The List Of New Features(Tag) In HTML 5

apple-icon 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!

Please notice, it is only a list for quick reference, you can also refer HTML5 differences from HTML4 or HTML 5 Tag Reference for more details.

<article> (Defines an article)


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.

Example code:

<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById(‘myCanvas’);
var ctx=canvas.getContext(‘2d’);
ctx.fillStyle=’#FF0000′;
ctx.fillRect(0,0,80,100);
</script>

 

<command>(Defines a command button)


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.

Example code:

<input list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>

 

<details>(Defines details of an element)


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.

Example code:

<footer>This document was written in 2009</footer>

 

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


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

Example code:

<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>
<p>The rest of my home page…</p>

 

<hgroup>(Defines information about a section in a document)


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.

Example code:

<meter min="0" max="10">2</meter><br />
<meter>2 out of 10</meter><br />
<meter>20%</meter>

 

<nav>(Defines navigation links)


The <nav> tag defines a section of navigation. If you have "previous" and "next" buttons in your document, they should be placed inside the <nav> element.

Example code:

<nav>
<a href="default.asp">Home</a>
<a href="tag_meter.asp">Previous</a>
<a href="tag_noscript.asp">Next</a>
</nav>

 

<output>(Defines some types of output)


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

Example code:

<form action="form_action.asp" method="get" name="sumform">
<output name="sum"></output>
</form>

 

<progress>(Defines progress of a task of any kind)


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

Example code:

The object’s downloading progress:
<progress>
<span id="objprogress">76</span>%
</progress>

 

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

Example code:

<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

 

<ruby>(Defines ruby annotations)


The <ruby> tag defines a ruby annotation (Chinese notes or characters).

Example code:

<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>

 

<section>(Defines a section)


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

Example code:

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

 

<source>(Defines media resources)


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

 

<summary>(Defines the header of a "detail" element)


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

Example code:

<details>
<summary>HTML 5</summary>
This document teaches you everything you have to learn about HTML 5.
</details>

 

<time>(Defines a date/time)


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

Example code:

<p>
We open at <time>10:00</time> every morning.
</p>
<p>
I have a date on <time datetime="2008-02-14">Valentines day</time>
</p>

 

<video>(Defines a video)


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

Example code:

<video src="movie.ogg" controls="controls">
your browser does not support the video tag
</video>
Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • Reddit
  • Technorati
  • StumbleUpon
  • Twitter
RSS Enjoy this Post? Subscribe to Ntt.cc

RSS Feed   RSS Feed     Email Feed  Email Feed Follow us Follow us
You can leave a response, or trackback from your own site.

One Response to “The List Of New Features(Tag) In HTML 5”

  1. freesoft says:

    Thank you..really informative!!

Leave a Reply