HTML5's HTML Element Extension (Part 1) - Newly added elements and usage overview

Author：Eve Cole Update Time：2025-04-17 23:32:03

Consider our process of developing a page :

1. Design the structure of the page - HTML: This process is to use various HTML elements to build the structure of the web page.

2. Design the appearance of the page - CSS: This process is to use CSS to improve the appearance of the web page.

3. Design page behavior - Javascript: This process is to give certain behavior to elements of the web page.

In addition to CSS, HTML5 has been expanded to varying degrees in two other aspects. This series is focused on the first aspect. In the previous section, we have learned the complex canvas and svg elements, and the following chapters will summarize other HTML5 added elements.

Structural elements

HTML5 has added new structural elements, such as header, footer, navigation nav, content article, chapter section, etc. The meaning is shown in the figure below:

In addition to the structural elements of the entire page, html5 also adds block-level semantic elements, such as auxiliary elements aside, image elements figure, detailed description elements details, etc. In addition to better displaying the layout meaning of the page, these elements are no different from ordinary divs, and they still need to rely on CSS to display these elements. Here is a brief example:

<html>

<head>

</head>

<body>

</header>

<h2><a href="http://www.VeVb.com/dxy1982/">Article 1</a></h2>

<p>Introduction</p>

</article>

<h2><a href="http://www.VeVb.com/dxy1982/">Article 2</a></h2>

<p>Introduction</p>

</article>

<nav>

</nav>

</section>

<nav>

<ul>

<li><h2>Information</h2>

<ul>

<li><a href="http://www.VeVb.com/dxy1982/">Policy</a></li>

</ul></li>

<li><h2>Article</h2>

<ul>

<li><a href='/blog/2007/04/'>January</a></li>

<li><a href='/blog/2007/03/'>February</a></li>

</ul>

</li>

</ul>

</nav>

</footer>

</body>

</html>

Although these elements are relatively simple to use, there are still some points to note :

1. Do not use section as a substitute for div

section is not a style container. The section element represents the semantic part of the content used to help build a document summary. It should contain a header. It usually exists as the most article (of course, it is also possible for the article as its part). If you want to find an element that is used as a page container or need an additional style container, please continue to use div.

2. Only use header and hgroup when needed

It is meaningless to write labels that don't need to be written. The usage scenarios of header and hgroup are usually as follows:

• The header element represents a set of introductory or navigational auxiliary text, often used as the header of the section.

• When the head has a multi-layer structure, such as subheading, subtitles, various logo texts, etc., use hgroup to combine h1-h6 elements as the head of the section.

Here, if the header or hgroup only has a few head elements, it is better to remove these two useless tags, for example:

</header>

</article>

Modify directly to:

</article>

The same goes for:

</hgroup>

<p>by Rich Clark</p>

</header>

Change it directly to:

<p>by Rich Clark</p>

</header>

3. Don't abuse nav

The nav element represents a block in the page that links to other pages or other parts of this page; a block containing navigation links.

But not all links on the page need to be placed in the nav element - this element is intended to be used as the main navigation block. To give a specific example, there are often many links in footer, such as terms of service, homepage, copyright notice page, etc. The footer element itself is enough to cope with these situations. Although the nav element can also be used here, it is usually considered unnecessary.

4. Don't abuse figure

Figure should be some fluid content, and sometimes there will be a title description contained in it. Generally, it will be referenced as an independent unit in the document stream. This is the best scenario for figure - it can be moved from the main content page to the sidebar without affecting the document flow. Figure should only be referenced in the document, or surrounded by section elements.

If you are purely for the rendering of the image (such as the logo), not cited elsewhere in the document, and there is no need to move the location, then do not use figure.

5. Do not use unnecessary type attributes

In HTML5, script and style elements no longer require type attributes. Of course there is no problem with writing, but from the perspective of best practice, there is no need to write.

Audio elements

Audio elements are used to identify sound content, such as music or any other audio stream. The formats supported by this element are shown in the following table:

	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

The audio tag has some attributes used to control the content, when and how the audio is played, etc. These attributes are: src (file name), preload (load when the page is loaded), controls (display control), loop (loop) and autoplay (autoplay). In the following example, the page will play as soon as the audio is loaded, and it will continue to play. The provided controls can allow the user to stop or restart the playback of the audio:

Your browser does not support audio elements.

</audio>

If the browser does not support the element, the text information of the element is displayed.

If the autoplay element is set, the preload property is automatically ignored. If preload=auto is set, the audio will be loaded after the page is loaded.

The audio element allows specifying multiple source elements to be compatible with the browser. The source element can link different audio files. The browser will use the first recognizable format:

<audio>

Your browser does not support audio elements.

</audio>

Video elements

The video element allows you to play video clips or stream visual media. The formats supported by this element are shown in the following table:

Format	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

It has all the attributes of the audio element, plus: muted, poster (waiting for image), width and height. Needless to say, the last two meanings. When the video is loading or the video is in a state of no loading, the poster attribute (specifying an absolute or relative URL) allows you to find an image to deal with it first; muted means muted.

Video also supports the use of source elements to solve compatibility issues. See a small example:

Your browser does not support video elements.

</video>

If you want to not play the video sound, set muted=muted.

In addition, the video element also provides some methods, properties and events to support the process of controlling the playback in DOM operations. For example, calling elements to play, pause, load and other methods. There are also properties such as volume and playback time that can be directly read or set. In addition, there are events that start playback, pause, end, etc. that can be used. See the following example:

<!DOCTYPE html>

<html>

<body>

<button onclick="playPause()">Play/Pause</button>

<button onclick="makeSmall()">Small</button>

<button onclick="makeNormal()">Normal</button>

Your browser does not support video elements.

</video>

</div>

var myVideo=document.getElementById("video1");

function playPause()

{

if (myVideo.paused)

myVideo.play();

else

myVideo.pause();

}

function makeBig()

{

myVideo.width=560;

}

function makeSmall()

{

myVideo.width=320;

}

function makeNormal()

{

myVideo.width=420;

}

</script>

</body>

</html>

In fact, we need to pay attention to a new way of writing: in the above example we write audio elements like this:

Your browser does not support audio elements.

</audio>

In fact, many item controls, autoplay, and loop are introduced in html5. These properties are fine for you to write them like the above, but the recommended way is to write them as follows:

Your browser does not support audio elements.

</audio>

Because the browser encounters these properties, it means that these properties are enabled. That is to say, if you write these properties and forcefully set to false, the effect is still equivalent to true, so it is generally recommended to only write the attribute name.

This writing problem also exists in form. Many new properties of form and input are boolean properties, and the recommended writing method should be used.

Elements indicating the metric

Not every browser supports the following elements, but you can basically see the effects on Chrome.

Progress bar element

Use this element to display the downloaded progress bar, with only two attributes: value and max, which is very simple. Chrome and FireFox are supported.

<p>Download progress:

</p>

Metric elements

Use this element to display the given value in the standard range class indicating the indication diagram, and values within different ranges will show different colors. Some websites use this thing to display the user's current experience value. When the browser does not support this element, the text in the middle of the element will be displayed directly. Chrome is currently supported.

<p>Your score is:

<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.

</p>

Run it and you will see a yellow scrollbar-like thing; if you change the value to 50, you will find that the color of the indicator bar is programmed red.

There are so many new element introductions. For more element descriptions, please refer to the complete Tag list in W3C.

Practical reference:

W3C tutorial: http://www.w3schools.com/html5/default.asp

Official HTML5 guidance: http://dev.w3.org/html5/html-author/

A pretty good guide website: http://html5doctor.com/

HTML5 Chinese tutorial: http://www.html5china.com/

A good front-end blog: http://www.pjhome.net/default.asp?cateID=1