Define the main text or a complete piece of content;

Define supplementary or related content;

The best way to learn these tags is of course to try using them. Although there are many ready-made web page layout templates that can be easily used, for beginners, it is absolutely necessary to implement a simple page layout by yourself. Here is a simple page layout example to demonstrate the use of the above tags.

Example: Imitate the blog homepage layout

Implement the web page structure as shown in Figure 2-1, which is a very typical blog page: header, tail, horizontal navigation bar, sidebar navigation and content.

Figure 2-1

As you can see in Figure 2-1, the areas implemented by the corresponding tags are marked with names, such as Header

Before writing the page, it is necessary to say that the page elements are implemented by HTML5, and the display effect of the elements is rendered by CSS3. The CSS3 code can be placed in the same file as the HTML5 code, or it can be independent files, as long as they are referenced in HTML5 files. It is recommended that each be an independent file. The benefits are:

1) Comply with the single responsibility principle: the HTML5 page is responsible for managing elements, while the CSS3 file is only responsible for rendering the display effect of the corresponding HTML5 file, independent of each other. , do not intersect with each other.
2) Reduce the complexity of the page and facilitate maintenance: Just imagine, when the number of elements on the page increases to a lot, how bad the readability will be if the elements and the display attributes of the elements are managed on one page at the same time. Maintenance will be a pain in the ass.
3) Speed up the loading speed of the browser: Another benefit of point 2) is that simple pages will naturally load faster.
Of course, if you are used to putting HTML5+CSS3 in one file, it is not a bad idea. This is just a suggestion.
Let’s implement Figure 2-1 in detail.

1.HTML5 document declaration
Create a new index.html file. If the web page writing tool used already supports the HTML5 file type, then the following HTML5 template should be generated:

    Layout TEST

It doesn’t matter if the web page writing tool does not support HTML5 for the time being. It is very simple to write these lines of code yourself.
Description: The first line: is HTML5’s simplification of document types, simplifying the complex; (The role of the document type: the validator uses it to determine which rules to use to verify the code; mandatory The browser renders the page in standard mode)
2. Header

tag implementation

Header

Note: 1) The header cannot be confused with h1, h2, and h3 titles.

can contain everything from your company logo to a search box. The example contains only the title.
2) The same page can contain multiple

elements. Each independent block or article can contain its own

. Therefore, in the example, a unique id attribute is added to

to facilitate flexible rendering in CSS3. You will see the role of the id tag in the CSS file.
3. Tail

tag implementation

 Footer

Description: The position is the tail of the page or block. The usage is basically the same as

, and it will also include other elements. , the id is also specified here.
4. Navigation

tag implementation

  Home
 One
 Two
 Three

Description: The importance of navigation is crucial to a web page, it is fast and convenient Good navigation is necessary to retain visitors.
1) Can be included in

HTML5 new elements