New elements and abolished elements in the HTML5

Source: Internet
Author: User

First, the new structure element

1. The sectionelement represents a chunk of content in a page, such as a chapter, header, footer, or other part of the page. It can be used in conjunction with H1, H2, H3, H4, H5, H6 and other elements to mark the document structure.

Code Case:<section></section> in H5

Code Case:<div></div> in H4

2. The article element represents a piece of independent content in the page that is irrelevant to the context, such as an article in a blog or an article in a newspaper.

Code Case:<article><article> in H5

Code Case:<div></div> in H4

3. The aside element represents the auxiliary information related to the content of the article element, other than the contents of the article element.

Code Case:<aside></aside> in H5

Code Case:<div></div> in H4

4. Header element represents the title of a content block or an entire page in a page.

Code Case:

Code Case:<div></div> in H4

5. The footer element represents a footnote to the entire page or to a content area in the page. In general, it contains the creator's name, date of creation, and author contact information.

Code Case:<footer></footer> in H5

Code Case:<div></div> in H4

6. The nav element represents the navigation link information in the page.

Code Case:<nav></nav> in H5

Code Case:<ul></ul> in H4

7. The figure element represents a separate stream content, which generally represents a separate unit in the content of the document body flow. Use the Figcaption element to add a caption to the group of figure elements.

Code Case:<figure> in H5

<figcaption> here is the title </figcaption>

<p> here is the content </p>

</figure>

Code Case:<dl> in H4

<p> here is the content </p>

</dl>

8. The main element represents the primary content of the Web page. The main content area means content that is directly related to or extended to the title of the page or to the main features of the page in the application.

Code Case:<main></main> in H5

Code Case:<div></div> in H4

Second, the other elements of the new

1. The video element is used to define videos, such as clips in a movie or other video streams.

Code examples in H5: <video src= "Movie.ogg" controls= "controls" >video elements </video>

Example of code in H4: <object type= "Video/ogg" Data= "MOVIE.OGV" >

<param name= "src" value= "MOVIE.OGV" >

</object>

2. The audio element is used to define sounds, such as music or other audio streams.

Code case in H5: <audio src= "someaudio.wav" >audio elements </audio>

Example of code in H4: <object type= "Application/ogg" Data= "Someadio.wav" >

<param name= "src" value= "someaudio.wav" >

</object>

12. The canvas element represents a graph, a table or other image. The element itself has no behavior and only provides a single canvas, but presents a drawing API to client-side JavaScript so that the script can draw what it wants to draw onto this canvas.

Example of code in H5: <canvas id= "MyCanvas" width= "$" height= "></canvas>"

Example of code in H4: <object data= "Inc/hdr.svg" type= "Image/svg+xml" width= "$" height= "$" ></object>

New elements and abolished elements in the HTML5

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.