HTML5 new elements

HTML 5 is a new web standard that aims to replace the existing HTML 4.01, XHTML 1.0 and DOM Level 2 HTML standards. It hopes to reduce the browser's need for plug-in-based rich internet applications (RIA), such as Adobe Flash, Microsoft Silverlight, and Sun JavaFX.

HTML 5 provides a number of new elements and attributes that reflect typical modern usage of websites. Some of them are technically similar to <div> and <span> tags, but have a certain meaning, such as <nav> (site navigation block) and <footer>. Such tags will facilitate search engine indexing, small screen devices, and use by the visually impaired. It also provides new functionality for other browsing elements, such as the <audio> and <video> tags, through a standard interface.

Let’s take a look at some of the new tag usage provided by HTML 5 and the differences from HTML.

<article> tag defines external content. For example, a new article from an external news provider, or text from a blog, or text from a forum. Or content from other external sources.
HTML5:<article></article>
HTML4:<div></div>

<aside>The tag defines content other than article. The content of aside should be related to the content of article.
HTML5:<aside>Aside content is independent content, but should be related to the document content. </aside>
HTML4:<div>The content of Aside is independent content, but should be related to the document content. </div>

<audio> tag defines a sound, such as music or other audio stream.
HTML5:<audio src="someaudio.wav">Your browser does not support the audio tag. </audio>
HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object> ;

<canvas> tag defines graphics, such as charts and other images. This HTML element is designed for client-side vector graphics. It has no behavior of its own, but exposes a drawing API to client JavaScript so that the script can draw whatever it wants to a canvas.
HTML5:<canvas id="myCanvas" width="200" height="200"></canvas>
HTML4:<object data="inc/hdr.svg" type=" image/svg+xml" width="200" height="200"></object>

<command> tag defines command buttons, such as radio buttons, check boxes, or buttons.
HTML5: <command onclick=cut()" label="cut">
HTML4: none

<datalist> The label defines a list of optional data. Used in conjunction with the input element , you can create a drop-down list of input values.
HTML5: <datalist></datalist>
HTML4: see combobox.

<details> Tag definition element details, user Can be viewed, or clicked to hide. Used with <legend> to make a title for the detail that is visible to the user and opens or closes the detail when clicked on. ;details></details>
HTML4: <dl style="display:hidden"></dl>

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

<figcaption> tag defines the title of the figure element. The "figcaption" element should be placed as the first or last child element of the "figure" element.

HTML4: none

<figure> tag is used to combine elements. Use the <figcaption> element to add a caption to a group of elements.
HTML5: <figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure>
HTML4: < ;dl><h1>PRC</h1><p>The People's Republic of China was born in 1949...</p></dl>

<footer> Tag Definition The footer of a section or document. Typically, it will contain the name of the author, the date the document was created, and/or contact information.
HTML5: <footer></footer>
HTML4: <div></div>

<header> tag defines the header of a section or document.
HTML5: <header></header>
HTML4: <div></div>

<hgroup> tag is used to mark a web page or section. Titles are combined.
HTML5: <hgroup></hgroup>
HTML4: <div></div>

<keygen> tag defines the generated key.
HTML5: <keygen>
HTML4: none

<mark>It is mainly used to visually present text that needs to be highlighted to the user. A typical application of the <mark> tag is to highlight search keywords to users in search results.
HTML5: <mark></mark>
HTML4: <span></span>

<meter> tag defines weights and measures. Use only for measurements with known maximum and minimum values. The range of the measure must be defined, either in the element's text or in the min/max attributes.
HTML5: <meter></meter>
HTML4: none

<nav> The tag defines the part of the navigation link.
HTML5: <nav></nav>
HTML4:<ul></ul>

<output> tag defines different types of output, such as script output.
HTML5: <output></output>
HTML4: <span></span>

<progress> The process in which the tag is running. You can use the <progress> tag to display the progress of time-consuming functions in JavaScript.
HTML5: <progress></progress>
HTML4: none

<rp> tag is used in ruby ​​comments to define content displayed by browsers that do not support ruby ​​elements .
HTML5: <ruby>汉<rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4 : none

<rt> The tag defines the interpretation or pronunciation of the character (Chinese phonetic phonetic or character).
HTML5: <ruby>汉<rt> ㄏㄢˋ </rt></ruby>
HTML4: none

<ruby> Tag definition ruby ​​comment (Chinese phonetic notation) or characters).
HTML5: <ruby>汉<rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4 : none

<section> tag defines a section (section, section) in the document. Such as chapters, headers, footers, or other parts of the document.
HTML5: <section></section>
HTML4: <div></div>The ;

<source> tag defines media resources for media elements such as <video> and <audio>.
HTML5: <source>
HTML4: <param>

<summary> The tag contains the title of the details element. The "details" element is used to describe detailed information about the document or document fragment. . The "summary" element should be the first child of the "details" element.
HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>
HTML4: none

< ;time> tag defines date or time, or both.
HTML5: <time></time>
HTML4: <span></span>

<video> tag defines a video, such as a movie clip or other video stream.
HTML5: <video src="movie.ogg" controls="controls">Your browser does not support the video tag. </video>
HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object> ;

Removed elements

The following HTML 4.01 elements have been removed in HTML5:

<acronym>

<applet>

<basefont>

<big>

<center>

<dir>

<font>

<frame>

<frameset>

<noframes>

<strike>

<tt>