All Html5 tags....You are welcome


New tags in HTML5



<article>

Defines an article

Example

<article>

<a href="http://blog.netscape.com/2007/12/28/

end-of-support-for-netscape-web-browsers">

Netscape is dead</a><br />

AOL has a long history on the internet, being one of

the first companies to really get people online.....

</article>



Definition and Usage

The <article> tag specifies independent, self-contained content.

An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

Examples of possible articles:

• forum post

• newspaper article

• blog entry

• user comment









<aside>

Defines content aside from the page content



Example

<p>My family and I visited The Epcot center this summer.</p>

<aside>

<h4>Epcot Center</h4>

The Epcot Center is a theme park in Disney World, Florida.

</aside>

Definition and Usage

The <aside> tag defines some content aside from the content it is placed in.

The aside content should be related to the surrounding content.



<audio>

Defines sound content



Example

<audio src="horse.ogg" controls="controls">

Your browser does not support the audio element.

</audio>



Definition and Usage

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



<canvas>

Defines graphics



Example

How to display a red square, with the canvas element:

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



Definition and Usage

The <canvas> tag is used to display graphics.

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

You can specify height and width of the canvas by using height and width attributes





<command>

Example

A button is marked up as follows:

<menu>

<command onclick="alert('Hello World')">

Click Me!</command>

</menu>



Definition and Usage

The <command> tag defines a command button, like a radiobutton, a checkbox, or a button.

The command element is only visible if it is inside a menu element. If not, it will not be displayed, but can be used to specify a keyboard shortcut.

Attributes

New

: New in HTML5.

Attribute

Value

Description

checkedNew

checked

Defines if the command is checked or not. Use only if type is radio or checkbox

disabledNew

disabled

Defines if the command is available or not

iconNew

url

Defines the url of an image to display as the command

labelNew

name

Defines a name for the command. The label is visible

radiogroupNew

radiogroup

Defines the name of the radiogroup this command belongs to. Use only if type is radio

typeNew

checkbox

command

radio

Defines the type of command. Default value is command



<datalist>



Example

An input element with possible values described in a datalist:

<input list="cars" />

<datalist id="cars">

<option value="BMW">

<option value="Ford">

<option value="Volvo">

</datalist>



Definition and Usage

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.

Use the input element's list attribute to bind it together with a datalist.

<details>

Example

Details about the document:

<details>

<summary>Copyright 1999-2011.</summary>

<p>All pages and graphics on this web site are the property of the company Refsnes Data.</p>

</details>

Definition and Usage

The <details> tag specifies additional details or controls which can be hidden or shown on demand.

The content of the <details> tag should not be visible unless the open attribute is set.

Attributes

New

: New in HTML5.

Attribute

Value

Description

openNew

open

Specifies that the details should be visible



<datalist>

Example

An input element with possible values described in a datalist:

<input list="cars" />

<datalist id="cars">

<option value="BMW">

<option value="Ford">

<option value="Volvo">

</datalist>

Definition and Usage

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.

Use the input element's list attribute to bind it together with a datalist.



<embed>

Example

<embed src="helloworld.swf" />

Definition and Usage

The <embed> tag defines embedded content, such as a plug-in.

Attributes

New

: New in HTML5.

Attribute

Value

Description

heightNew

pixels

Specifies the height of the embedded content

srcNew

url

Specifies the URL of the embedded content

typeNew

type

Specifies the MIME type of the embedded content

widthNew

pixels

Specifies the width of the embedded content



<figcaption>

Example

An image used as a figure in a document, with a caption:

<figure>

<figcaption>A view of the pulpit rock in Norway</figcaption>

<img src="img_pulpit.jpg" width="304" height="228" />

</figure>

Definition and Usage

The <figcaption> tag contains a caption for the <figure> tag.

The "figcaption" element should be placed as the first or the last child of the "figure" element.



<figure>



Example

An image used as a figure in a document:

<figure>

<p>A view of the pulpit rock in Norway</p>

<img src="img_pulpit.jpg" width="304" height="228" />

</figure>



Definition and Usage

The <figure> tag specifies self-contained flow content (like images, diagrams, photos, code, etc).

The content of the figure element should be relevant to the main content, but if removed it should not affect the flow of the document.



<footer>

Example

A section in a document that will be displayed in green:

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

Definition and Usage

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.





<header>

Example

Introduction to my homepage:

<header>

<h1>Welcome to my homepage</h1>

<p>My name is Donald Duck</p>

</header>



<p>The rest of my home page...</p>



Definition and Usage

The <header> tag specifies an introduction, or a group of navigation elements for the document.



<hgroup>

Example

Use <hgroup> to group the heading of a section or a web page:

<hgroup>

<h1>Welcome to my WWF</h1>

<h2>For a living planet</h2>

</hgroup>



<p>The rest of the content...</p>

Definition and Usage

The <hgroup> tag specifies 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.





<keygen>

Example

A form with a keygen field:

<form action="demo_keygen.asp" method="get">

Username: <input type="text" name="usr_name" />

Encryption: <keygen name="security" />

<input type="submit" />

</form>

Definition and Usage

The <keygen> tag specifies a key pair generator field used for forms.

When the form is submitted, the private key is stored locally, and the public key is sent to the server.

Attributes

New

: New in HTML5.

Attribute

Value

Description

autofocusNew

disabled

Makes the input field focused on page load

challengeNew

challenge

Specifies that the value of the keygen is set to be challenged when submitted.

disabledNew

disabled

Disables the keytag field

formNew

formname

Defines one ore more forms the input field belongs to.

keytypeNew

rsa

other

Specifies the security algorithm of the key.

rsa generates a RSA key.

nameNew

fieldname

Defines a unique name for the input element. The name attribute is used to collect the fields value when submitted.





<mark>

Example

Highlight parts of a text:

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

Definition and Usage

The <mark> tag defines marked text.

Use the <mark> tag if you want to highlight parts of your text

<meter>

Example

Use the meter element to measure data within a given range:

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

<meter value="0.6">60%</meter>

Definition and Usage

The <meter> tag defines a measurement. Used only for measurements with a known minimum and maximum value. This is also known as a gauge.

The <meter> tag should not be used as a progress bar. For progress bars, use the <progress> tag.



Differences Between HTML 4.01 and HTML5

Attributes

New

: New in HTML5.

Attribute

Value

Description

formNew

number

Specifies which form this meter belongs to

highNew

number

Specifies at which point the measurement's value is consider a high value

lowNew

number

Specifies at which point the measurement's value is consider a low value

maxNew

number

Specifies the maximum value. Default value is 1.0

minNew

number

Specifies the minimum value. Default value is 0

optimumNew

number

Specifies what measurement's value is the best value

valueNew

number

Required. Specifies the measurement's current or "measured" value



<nav>

The nav element defines a section intended for navigation:

<nav>

<a href="default.asp">Home</a>

<a href="tag_meter.asp">Previous</a>

<a href="tag_noscript.asp">Next</a>

</nav>

Definition and Usage

The <nav> tag defines a section of navigation.



<output>

Example

How to use the output element in a form:

<input name="numa" type="number"> +

<input name="numb" type="number"> =

<output name="result"

onforminput="value=numa.valueAsNumber + numb.valueAsNumber"></output>



Definition and Usage

The <output> tag represents the result of a calculation (like one performed by a script).

Attributes

New

: New in HTML5.

Attribute

Value

Description

forNew

id

Specifies one or more elements the output field relates to

formNew

formid

Specifies one or more forms the output field belongs to

nameNew

name

Specifies a name for the object (to use when a form is submitted)





<progress>

Example

Mark up "Downloading in progress":

The object's downloading progress:

<progress>

<span id="objprogress">76</span>%

</progress>

Definition and Usage

The <progress> tag defines work-in-progress.

Use the progress element to display the progress of a time consuming function in JavaScript.

Attributes

New

: New in HTML5.

Attribute

Value

Description

maxNew

number

Defines the value of completion

valueNew

number

Defines the current value of the progress



<rp>

Example

A ruby annotation:

<ruby>

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

</ruby>

Definition and Usage

The <rp> tag is used in ruby annotations, to define what to show browsers that do not support the ruby element.

Ruby annotations are 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.



<rt>

Example

A ruby annotation:

<ruby>

漢 <rt> ㄏㄢˋ </rt>

</ruby>

Definition and Usage

The <rt> tag defines an explanation or pronunciation of characters (for East Asian typography).

Ruby annotations are used in East Asia, to show the pronunciation of East Asian characters.

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

Example

A ruby annotation:

<ruby>

漢 <rt> ㄏㄢˋ </rt>

</ruby>

Definition and Usage

The <ruby> tag specifies a ruby annotation (for East Asian typography).

Ruby annotations are used in East Asia, to show the pronunciation of East Asian characters.

Use together with the <rt> and/or the <rp> 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.



<section>

Example

A section in a document, explaining what WWF is:

<section>

<h1>WWF</h1>

<p>The World Wildlife Foundation was born in 1961...</p>

</section>



Definition and Usage

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



<source>

Example

An audio player with 2 different source files:

<audio controls="controls">

<source src="song.ogg" type="audio/ogg" />

<source src="song.mp3" type="audio/mpeg" />

Your browser does not support the audio element.

</audio>

Definition and Usage

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

Attributes

New

: New in HTML5.

Attribute

Value

Description

mediaNew

media query

Specifies what media/device the media resource is optimized for. Default value: all.

srcNew

url

The URL of the media

typeNew

MIME_type

Specifies the MIME type of the media resource



<summary>

Example

Details about the document:

<details>

<summary>Copyright 1999-2011.</summary>

<p>All pages and graphics on this web site are the property of the company Refsnes Data.</p>

</details>

Definition and Usage

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





<time>



Example

How to define a time and a date:

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

Definition and Usage

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

Attributes

New

: New in HTML5.

Attribute

Value

Description

datetimeNew

datetime

Specifies the date or time for the time element. This attribute is used if no date or time is specified in the element's content.

pubdateNew

pubdate

Specifies that date and time in the time element is the publication date and time of of the document, or the nearest ancestor article element







<video>

Example

A simple HTML5 video:

<video src="movie.ogg" controls="controls">

your browser does not support the video tag

</video>

Definition and Usage

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



Optional Attributes

New

: New in HTML5.

Attribute

Value

Description

audioNew

muted

Specifies the default state of the the audio. Currently, only "muted" is allowed

autoplayNew

autoplay

If present, then the video will start playing as soon as it is ready

controlsNew

controls

If present, controls will be displayed, such as a play button

heightNew

pixels

Sets the height of the video player

loopNew

loop

If present, the video will start over again, every time it is finished

posterNew

url

Specifies the URL of an image representing the video

preloadNew

preload

If present, the video will be loaded at page load, and ready to run. Ignored if "autoplay" is present

srcNew

url

The URL of the video to play

widthNew

pixels

Sets the width of the video player







<wbr>

Example

A text with a line-break opportunity:

<p>

To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.

</p>

Definition and Usage

The <wbr> tag defines where in a word it would be ok to add a line-break.

When a word is to long, or you are afraid that the browser will break your lines at the wrong place, use the <wbr> element as a line-break opportunity.





These tags are not supported in html5

<acronym>

<applet>

<basefont>

<big>

<center>

<dir>

<font>

<frame>

<frameset>

<noframes>

<strike>

<tt>

<u>

<xmp>