Explanation and usage of HTML5 new labels

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 for rich network application services (plug-in-based rich Internet application, RIA), such as Adobe Flash, Microsoft Silverlight, and Sun javafx.

HTML 5 provides some new elements and attributes that reflect typical modern usage websites. Some of them are technically similar.<Div>And<Span>Label, but it has a certain meaning, such<Nav>(Website navigation block) and<Footer>. This type of tag will benefit search engine indexing, small screen devices, and visually impaired users. At the same time, it provides new functions for other browsing elements through a standard interface, such<Audio>And<Video>Mark.

Previous Article: HTML5 Shiv-Let's let the damn ie series support HTML5. It introduces how to make all browsers support HTML5 labels, so you can use them with confidence!

Some outdated HTML 4 tags will be removed, including those that are purely used as display effects, such<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>The tag defines external content. For example, a new article from an external news providerArticleOr the text from the blog or from the Forum. Or from other external sources.
HTML5:<Article> </Article>
Html4:<Div> </div>

<Aside>Label defines content other than article. The content of aside should be related to the content of article.
HTML5:<Aside> the content of aside is independent, but should be related to the content of the document. </Aside>
Html4:<Div> the content of aside is independent, but 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 graphs, 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>The tag defines the details of the 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>Tags 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 the section or document.
HTML5:<Header>
Html4:<Div> </div>

<Hgroup>Tags are used to combine the titles of a webpage or section.
HTML5:<Hgroup>
Html4:<Div> </div>

<Keygen>Tag definition to generate a 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>Label-defined 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>Tags define different types of output, such as the output of scripts.
HTML5:<Output> </output>
Html4:<Span> </span>

<Progress>Processes in the tag running. 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> protocol <RT> <rp> (</rp> Protocol definition <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> protocol <RT> <rp> (</rp> Protocol definition <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, and the "details" element is used to describe detailed information about the document or 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>

Loading: big front-end» explanation and usage of HTML5 new labels