Importance of HTML5 region (Sectioning-

No matter how you call them in the web page layout-"area" or "Block", we have always divided the page into different visible areas. But the real problem is that we didn't use any correct tools for implementation. In general, we use a typical grid to draw paging headers, pages ...,. No matter how you call them in the web page layout-"area" or "Block", we have always divided the page into different visible areas. But the real problem is that we didn't use any correct tools for implementation. In general, we use a typical grid to draw paging headers, page themes, end pages, and other areas to achieve the so-called page layout.

In the past many years, we have used DIV to help us divide page areas. Therefore, we have defined many classes to help us effectively define every layer on the page, the latest HTML5 finally helped us solve this problem-using the section element, many people like this new HTML Member very much, because I finally gave us accurate development suggestions in the HTML standard, Section enhances the readability of the entire DOM. In this article, we will introduce these new elements, it helps us understand what problems can be solved, what important functions are provided, and what contribution has been made to the semantic Web!

Develop websites

You may still remember the days when using dreamweaver to develop websites. we drag and drop to generate a typical page, as shown below:

For better illustration, let's look at the following code snippet:

Heading
Some content...
Another heading
Some other content...

Here we have slightly modified the content and added two p to show the parent-child relationship. The p. child tag belongs to p. parent. We can use CSS to make the relationship between the two elements look like this. However, you must know that the description of p in the standard is "nothing special ". It does not mean any semantic meaning, but does not mean anything for the web page computing architecture. And p is invisible to us. Therefore, we should delete all of them and use the following four elements to display the parent-child relationship on the page, as shown below:

Heading
Some content...
Another heading
Some other content...

For the correct structure, here is the element that actually forms the content.

The title hierarchy is not very useful.

Many may think that

It may help us solve the problem. In this case, we may get the following:

• A header (h2)

• Another header (h3)

This method seems more reasonable. But actually? Does h3 actually belong to h2? It is hard to say clearly here. Let's look at another example:

On this HTML4 page, we use h1 to generate a page content Introduction title. h2 is used as the main content title and h3 is used to mark the sidebar, p # footer is used to generate the content at the end of the page. But the question is, what exactly does footer belong?

Which title does Footer belong?

The following figure shows the document structure clearly. We can see that footer actually belongs

Or the end of the page.

Some experts may think that the code can be changed to the following style:

• H1 (page)

• H2 (main)

• H3 (sidebar)

• H2 (footer)

This is an hack, but it is not very correct.

Area Division

HTML5 provides

, And . See the following regions:

Section is used to define a structured area. Let's look at the following example:

  
   
    Section title
   
  

Here we use section to generate a box mode. If we run our outliner, we get the following warning:

[Untitled Section]

• Section title

If p is used here, it can effectively help us divide the region:

The result is as follows:

• Section title

No warning or prompt is displayed!

Summary

HTML is not a canvas of an SDK or graphic designer. It is a Meta language and a language that helps you understand special information. Sometimes we use a parser to obtain the body, time, source, or popular content. This is the main function of microdata and RDF. In addition, context, hierarchy, and related importance and code relationships must be considered. This is the correct use of regional elements and syntax needs to be considered.

Some people may tell you not to think too much about the region. It may be meaningless. However, the HTML structure is improved by using the region definition, which is well described above.

I personally think that Section is not only good for optimizing the document structure, but will eventually make the entire DOM reasonable. At the same time, for us to adapt to this change, we need to optimize and change our development processes and habits, but I believe that for the web development trend and direction, in the end, the entire process will be more professional and standardized. The change should be worthwhile.

The preceding section describes the importance of the HTML5 region (Sectioning). For more information, see PHP Chinese website (www.php1.cn )!