New and abolished elements in html5

1. New structural elements

1. The section element represents a block of content in a page, such as a chapter, header, footer, or other part of the page. It can be used in combination with h1, h2, h3, h4, h5, h6 and other elements to indicate the document structure.

    Code example in h5: <section></section>

    Code example in h4: <div></div>

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

    Code example in h5: <article><article>

    Code example in h4: <div></div>

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

     Code example in h5: <aside></aside>

     Code example in h4: <div></div>

4. The header element represents the title of a content block in the page or the entire page.

    Code example in h5: <header></header>

    Code example in h4: <div></div>

5. The footer element represents the footnote of the entire page or a content area in the page. Typically, it will contain the creator's name, creation date, and creator contact information.

     Code example in h5: <footer></footer>

     Code example in h4: <div></div>

6. The nav element represents the information of the navigation links in the page.

     Code example in h5: <nav></nav>

     Code example in h4: <ul></ul>

7. The figure element represents an independent stream content, generally representing an independent unit in the main stream content of the document. Use the figcaption element to add a caption to the figure element group.    

    Code example in h5: <figure>

                            <figcaption>Here is the title</figcaption>

                            <p>This is the content</p>

                            </figure>

    Code example in h4: <dl>

                            <h1>Here is the title</h1>

                            <p>This is the content</p>

                            </dl>

8. The main element represents the main content of the web page. The main content area means the content that is directly related to or expands on the page title or the main function of the page in the application.

     Code example in h5: <main></main>

     Code example in h4: <div></div>

2. Other elements added

1. The video element is used to define a video, such as a clip in a movie or other video stream.

     Code example in h5: <video src="movie.ogg" controls="controls">video element</video>

     Code example in h4: <object type="video/ogg" data="movie.ogv">

                             <param name="src" value="movie.ogv">

                             </object>

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

     Code example in h5: <audio src="someaudio.wav">audio element</audio>

     Code example in h4: <object type="application/ogg" data="someadio.wav">

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

                             </object>

12. The canvas element represents graphics, such as charts or other images. This element itself has no behavior, only provides a canvas, but exposes a drawing API to client-side Javascript, so that the script can draw what it wants to draw onto the canvas.

      Code example in h5: <canvas id="myCanvas" width="200" height="200"></canvas>

      h4中的代码事例:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325071823&siteId=291194637