HTML5 new label meaning, usage and its difference from HTML4

1.<article>:

Define independent content such as forum posts, blog entries, user reviews, and more.

HTML5:<article></article>
HTML4:<div></div>

Browser support:

Ie9+,firefox,chorme,safari,opera.

2.<aside>:

Define two or more columns of sidebar content, such as contact us, customer service, website announcements, advertising and other content.

HTML5:<aside>aside content is independent, but should be relevant to the content of the document. </aside>
HTML4:<div>aside content is independent, but should be relevant to the content of the document. </div>

Browser support:

Ie9+,firefox,chorme,safari,opera.

3.<audio>:

Define audio content, such as music or other audio streams.

HTML5:

<audio src= "Audio.wav" >

Your browser does not support the audio tag. (Note: You can add this text between the start and end tags so that if the browser does not support this element, you can display this information.) ）

</audio>

HTML4:<object type= "Application/ogg" Data= "someaudio.wav" ><param name= "src" value= "someaudio.wav "></object>

Browser support:

Ie9+,firefox,chorme,safari,opera.

4.<canvas>:

Define graphics, tables, or other images. (canvas is just a graphics container and we have to use scripting (JavaScript) to draw graphics )

HTML5:

<canvas id= "MyCanvas" ></canvas>

<script type= "Text/javascript" >

var Canvas=document.getelementbyid (' MyCanvas ');

var ctx=canvas.getcontext (' 2d ');

Ctx.fillstyle= ' #FFFF00;

Ctx.fillrect (0,0,20,30);

</script>

HTML4:<object data= "inc/hdr.svg" type= "Image/svg+xml" width= "$" height= "></object>"

Browser support:

Ie9+,firefox,chorme,safari,opera.

5.<datalist>:

Defines the list of options, which need to be used in conjunction with the INPUT element and is bound by the list property of the input element to define an optional value for input. (DataList and its options will not be displayed, he is only a valid input list)

HTML5:

<input id= "fruits" list= "fruits"/>

<datalist id= "Fruits" >

<option value= "Apple" >

<option value= "Banana" >

</datalist>
HTML4: See ComboBox.

6.<details>:

Used to describe a document or document for a local detail.

HTML5:

<details>

<summary>some title.</summary>

<p>some details about the title.</p>

</details>
HTML4: <dl style= "Display:hidden" ></dl>

Browser support:

Chorme,safari.

7.<embed>:

Define external, interoperable content or plug-ins.

HTML5:

<embed src= "someone.swf"/>

HTML4: <object data= "flash.swf" type= "Application/x-shockwave-flash" ></object>

8.<figure>:

Define a set of media content (images, charts, photos, code, etc.) as well as their titles. ( if deleted, it should not affect document leaving )

HTML5:

<figure>

<p>the title of the Image.</p>

</figure>

HTML4: <dl>

Browser support:

Ie9+,firefox,chorme,safari,opera.

9.<footer>:

A script that defines a page or a region. Can include the author name of the document, the date of creation, or contact information.

HTML5: <footer></footer>
HTML4: <div></div>

Browser support:

Ie9+,firefox,chorme,safari,opera.

10.

Defines the head of a page or an area.

HTML5: HTML4: <div></div>

Browser support:

Ie9+,firefox,chorme,safari,opera.

11.

Defines information about a chunk in a document, using the

HTML5:

HTML4: <div></div>

12.<keygen>:

Defines the key values that are generated within a form. Specifies the key pair generator field used for the form, when the form is submitted, the private key is stored locally, and the public key is sent to the server.

HTML5:

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

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

Encryption: <keygen name= "Security"/>

<input type= "Submit"/>

</form>
HTML4: None

Browser support:

Firefox,chorme,safari,opera.

13.<mark>:

Define tagged text, highlighting the text you want to display.

HTML5:

<p>i like <mark>apple</mark> most.</p>

HTML4: <span></span>

Browser support:

Ie9+,firefox,chorme,safari,opera.

14.<meter>:

Define weights and measures. Measures that are used only for the known maximum and minimum values. ( the scope of the measure must be defined, either in the text of the element or in the Min/max property )

HTML5:

<meter min= "0″max=" 10″>2</meter>

<meter>2 out of 5</meter>

<meter>10%</meter>

Html4:none

Browser support:

Firefox,chorme,safari,opera.

15.<nav>:

Defines the navigation link. ( If there is a "front and back" button in the document, place it in the <nav> element )

HTML5:

<nav>

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

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

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

</nav>

HTML4:<ul></ul>

Browser support:

Ie9+,firefox,chorme,safari,opera.

16.<output>:

Defines different types of output, such as the output of a script.

HTML5: <output></output>
HTML4: <span></span>

Browser support:

Ie9+,firefox,chorme,safari,opera.

17.<progress>:

The process of defining tasks, such as downloads, can be used to display the progress of time-consuming functions in JavaScript.

HTML5:

<progress>

<span id= "Progress" >15</span>%

</progress>
HTML4: None

Browser support:

Ie9+,firefox,chorme,safari,opera.

18.<section>:

Define the sections (section, section) in the document. such as chapters, headers, footers, or other parts of the document.

HTML5: <section></section>
HTML4: <div></div>

19.<source>:

Define media resources for media elements such as <vodeo> and <audio>.

HTML5: <source>
HTML4: <param>

Browser support:

Ie9+,firefox,chorme,safari,opera.

20.<time>:

Defines a date/time that can encode a date or time in a machine-readable manner, for example, a user agent can add birthday reminders or scheduled events to a user's calendar, and search engines can generate smarter search results.

HTML5:

<p> Everyone is in the morning <time>9:00</time> work. </p>

<p><time datetime= "2012-01-01″> New Year's Day </time> party. </p>

HTML4: <span></span>

Browser support:

Ie9+,firefox,chorme,safari,opera.

21.<video>:

Define videos, such as movie clips or other video streams.

HTML5:

<video src= "Movie.ogg" controls= "Controls" >

Your browser does not support the video tag. ( Note: You can add this text between the start and end tags so that if the browser does not support this element, you can display this information.) )

</video>

HTML4:<object type= "Video/ogg" Data= "MOVIE.OGV" ><param name= "src" value= "MOVIE.OGV" ></ Object>

Browser support:

Ie9+,firefox,chorme,safari,opera.

HTML5 new label meaning, usage and its difference from HTML4