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!
<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.
<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.
<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.
<audio src="horse.ogg" controls="controls"> Your browser does not support the audio element. </audio>
The <canvas> tag is used to display graphics, and only a container for graphics, you must use a script to actually paint graphics.
<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.
<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.
<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.
<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>.
<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.
<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.
<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.
<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.
<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.
<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
<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.
<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.
<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.
<form action="form_action.asp" method="get" name="sumform"> <output name="sum"></output> </form>
<progress>(Defines progress of a task of any kind)
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.
<ruby> 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> </ruby>
<ruby>(Defines ruby annotations)
The <ruby> tag defines a ruby annotation (Chinese notes or characters).
<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.
<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.
<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.
<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.
<video src="movie.ogg" controls="controls"> your browser does not support the video tag </video>