Explanation and usage of Html5 new labels

Comments: HTML 5 is a new network standard designed to replace the existing HTML 4.01, XHTML 1.0 and DOM Level 2 HTML standards it is expected to reduce the browser's need for plug-ins to enrich the network application service (plug-in-based rich internet application, RIA), such as Adobe Flash, microsoft Silverlight, with Sun JavaFX requirements.

HTML 5 provides some new elements and attributes that reflect typical modern usage websites. Some of them are technically similar to <div> and <span> tags, but they have some meanings, such as <nav> (website navigation block) and <footer>. This type of tag will benefit search engine indexing, small screen devices, and visually impaired users. It also provides new functions for other browsing elements through a standard interface, such as <audio> and <video>.

Some outdated HTML 4 tags will be removed, including those that are purely used for display effects, such as <font> and <center> because they have been replaced by CSS. There are also some network behaviors (via) Through DOM ).

Next, let's take a look at some of the new tag usages provided by HTML 5 and their differences with HTML 4.
<Article> A tag defines external content. For example, a new article from an external news provider, text from a blog, or text from a forum. Or from other external sources.
HTML5: <article> </article>
HTML4: <div> </div>

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

<Audio> tags define sounds, such as music or other audio streams.
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> labels define images, such as tables and other images. This HTML element is designed for vector graphics on the client side. It does not act on its own, but presents a drawing API to the client JavaScript so that the script can draw everything you want to draw on 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> the tag defines command buttons, such as single-choice buttons, check boxes, or buttons.
HTML5: <command onclick = cut () "label =" cut ">
HTML4: none

<Datalist> A tag defines a list of optional data. With the input element, you can create a drop-down list of input values.
HTML5: <datalist> </datalist>
HTML4: see combobox.

<Details> A tag defines the details of an element. You can view the details or click to hide them. Used with <legend> to create the detail title. This title is visible to users. When you click on it, you can open or close detail.
HTML5: <details> </details>
HTML4: <dl style = "display: hidden"> </dl>

<Embed> labels define embedded content, such as plug-ins.
HTML5: <embed src = "horse.wav"/>
HTML4: <object data = "flash.swf" type = "application/x-shockwave-flash"> </object>

<Figcaption> the label defines the title of the figure element ." The figcaption element should be placed at the first or last child element of the figure element.
HTML5: <figure> <figcaption> PRC </figcaption> </figure>
HTML4: none

<Figure> tags are used to combine elements. Use the <figcaption> element to add a title to the element group.
HTML5: <figure> <figcaption> PRC </figcaption> <p> The People's Republic of China was born in 1949... </p> </figure>
HTML4: <dl>
<Footer> the label defines the footer of a section or document. Typically, it contains the Creator's name, document creation date, and/or contact information.
HTML5: <footer> </footer>
HTML4: <div> </div>

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

<Hgroup> A tag is used to combine the titles of a webpage or section.
HTML5: HTML4: <div> </div>

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

<Mark> it is mainly used to visually present the words that need to be highlighted to the user. <Mark> A typical tag application is to highlight search keywords in the search results.
HTML5: <mark> </mark>
HTML4: <span> </span>

<Meter> the label defines the metric. It is used only for measurements with the largest and minimum values known. The measurement range must be defined, either in the element text or in the min/max attribute.
HTML5: <meter> </meter>
HTML4: none

<Nav> the tag defines the navigation link.
HTML5: <nav> </nav>
HTML4: <ul> </ul>

<Output> labels define different types of output, such as the output of scripts.
HTML5: <output> </output>
HTML4: <span> </span>

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

<Rp> labels are used in ruby annotations to define the content displayed by browsers that do not support ruby elements.
HTML5: <ruby> callback <rt> <rp> (</rp> callback <rp>) </rp> </rt> </ruby>
HTML4: none

<Rt> A tag defines the interpretation or pronunciation of a character (Chinese phonetic alphabet or character.
HTML5: <ruby> runtime <rt> runtime environment </rt> </ruby>
HTML4: none

<Ruby> the tag defines ruby annotations (Chinese phonetic symbols or characters ).
HTML5: <ruby> callback <rt> <rp> (</rp> callback <rp>) </rp> </rt> </ruby>
HTML4: none

<Section> label defines sections (sections and sections) in the document ). For example, a section, header, footer, or other part of the document.
HTML5: <section> </section>
HTML4: <div> </div>

<Source> tags define media resources for media elements (such as <video> and <audio>.
HTML5: <source>
HTML4: <param>

<Summary> the label contains the title of the details element. The "details" element is used to describe detailed information about a document or a document fragment ." The summary element should be the first child element 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> the tag defines the date or time, or both.
HTML5: <time> </time>
HTML4: <span> </span>

<Video> tags define videos, such as movie clips or other video streams.
HTML5: <video src = "movie.ogg" controls = "controls"> your browser does not support video tags. </Video>
HTML4: <object type = "video/ogg" data = "movie. ogv"> <param name = "src" value = "movie. ogv"> </object>