The difference between HTML5 and HTML4 (2)-new elements and abolished elements

Source: Internet
Author: User

New structure elements

In HTML5, the following structure-related elements have been added:

Section element

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

code examples in HTML5:
<section>....</section>

code examples in HTML4:
<div>...</div>

article Elements

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 examples in HTML5:
<article>...</article>

code examples in HTML4:
<div>...</div>

aside elements

The aside element represents the secondary information that is outside the content of the article element and related to the content of the article element.

code examples in HTML5:
<aside>...</aside>

code examples in HTML4:
<div>...</div>

Header Element

Header elements represent the title of a content block or an entire page in a page.

code examples in HTML5:

code examples in HTML4:
<div>...</div>

Hgroup Elements

The Hgroup element is used to group the title of a chunk of content across a page or page.

code examples in HTML5:

code examples in HTML4:
<div>...</div>

Footer Elements

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

code examples in HTML5:
<footer>...</footer>

code examples in HTML4:
<div>...</div>

nav Element

The Nav element represents the part of the navigation link in the page.

code examples in HTML5:
<nav>...</nav>

code examples in HTML4:
<ul>...</ul>

Figure Element

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 examples in HTML5:
<figure>
<figcaption> New structural elements </figcaption>
<p> in HTML5, the following structure-related elements have been added:</p>
</figure>

code examples in HTML4:
<dl>
<p> in HTML5, the following structure-related elements have been added:</p>
</dl>

Additional elements to add

In addition to the structural elements, in HTML5, the following elements have been added:

Video Element

Video elements define videos, such as movie clips or other video streams.

code examples in HTML5:
<video src= "Movie.ogg" controls= "controls" >video elements </video>

code examples in HTML4:
<object type= "Video/ogg" Data= "MOVIE.OGV" >
<param name= "src" value= "MOVIE.OGV" >
</object>

Audio Element

The audio element defines sounds, such as music or other audio streams.

code examples in HTML5:
<audio src= "Someaudio.wav" >audio elements </audio>

code examples in HTML4:
<object type= "Application/ogg" Data= "Someaudio.wav" >
<param name= "src" value= "someaudio.wav" >
</object>

Embed elements

Embed elements are used to insert various multimedia formats, such as MIDI, WAV, AIFF, AU, mp3, etc.

code examples in HTML5:
<embed src= "Horse.wav"/>

code examples in HTML4:
<object data= "flash.swf" type= "Application/x-shockwave-flash" ></object>

Mark Element

The mark element is used primarily to visually present to users the text that needs to be highlighted or highlighted.
A more typical application of the Mark element is to highlight search keywords to the user in the search results.

code examples in HTML5:
<mark>...</mark>

code examples in HTML4:
<span>...</span>

The difference between HTML5 and HTML4 (2)-new elements and abolished elements

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.