What are the new elements in HTML5 and how to use them?

In this issue, the editor will bring you about the newly added elements in HTML5 and how to use them. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

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 page.

two。 Design the appearance of the page-CSS: this process is to use CSS to improve the appearance of the page.

3. Design the behavior of the page-Javascript: this process is to assign certain behavior to the elements of the page.

In addition to CSS, HTML5 has been expanded to varying degrees in two other aspects. This series focuses on the first aspect. Previously, we have learned about the complex canvas and svg elements, and the following sections summarize the other elements added to HTML5.

Structural element

New structural elements have been added to HTML5, such as header header, footer footer, navigation nav, content article, chapter section and so on. The meaning is shown in the following figure:

In addition to this structural element of the entire page, html5 also adds block-level semantic elements, such as auxiliary element aside, image element figure, detail description element details and so on. In addition to showing the layout meaning of the page, these elements are no different from ordinary div, and you still need to rely on CSS to show these elements. Here is a brief look at a small example:

The code is as follows:

Dxy blog