Home > Developer > Web Develop
In the previous section, we introduced the new structure tags in HTML5 and how they are defined and used. Next, let's take a look at the overall layout of the page in HTML5, how to use these structural tags in a comprehensive way.
Outline
By using the new structure tag, HTML5 's document structure is much clearer and clearer than a large number of HTML4 document structures using div tags. If you plan the outline of the document structure again, you can create a document structure that is clear and readable for readers or screen readers.
The so-called outline, simply speaking, is the structure of the content blocks in the document. Content blocks can use the title tag (H1~H6) to display the title of each level of content block. Comprehensive use of the titles of all levels of content blocks after you create a catalog of documents, the directory is an outline.
The layout of content blocks can be divided into "show orchestration" and "implicit orchestration" two ways.
1. Display the contents of the layout block
Display orchestration means explicitly creating a document structure using tags such as section, using headings (h1~16, Hgroup, and so on) within each content chunk, as shown in the following code:
<Body> <H1>Page level content Chunk title</H1> <P>The body of a page-level content chunk</P> < Section> <H2>Title of section-level content block</H2> <P>The body of a section-level content chunk</P> </ Section></Body>
2. Implicitly arranging content chunks
The so-called implicit arrangement refers to the non-explicit use of the section and other tags, but based on the page written in the headings (H1~h6, Hgroup) and other content blocks automatically created. Because the HTML5 parser can only see that a certain level of title is written, it will determine the existence of a relative chunk of content. The following code is an example of an implicitly-organized content chunk:
<Body> <H1>Page level content Chunk title</H1> <P>The body of a page-level content chunk</P> <!--Analyzer generates chunks of content based on tags such as H2 - <H2>Title of section-level content block</H2> <P>The body of a section-level content chunk</P></Body>
Comparing these two choreography patterns, it is obvious that the choreography is clearer and more heterogeneous.
3. Title Grading
Different headings have different levels, H1 have the highest level, and the H6 level is the lowest. Implicit orchestration creates a content block automatically when the following rules are generated:
if the newly-appearing title is lower than the previous heading level, a subordinate content chunk is generated.
If the newly-appearing caption is higher or equal than the previous heading level, a new content chunk is generated.
The example of the first rule is the same as before, so let's look at an example of the second rule:
<Body> < Section> <H2>Title of a section-level content chunk</H2> <P>The body of a section-level content chunk</P> <!--because the heading level below is higher than the previous heading level, new content chunks are created automatically - <H1>Title of the new section level content chunk</H1> <P>The body of a new section level content chunk</P> </ Section></Body>
If you change the previous example to a display orchestration, the following code looks like this:
<Body> < Section> <H2>Title of a section-level content chunk</H2> <P>The body of a section-level content chunk</P> </ Section> < Section> <H1>Title of the new section level content chunk</H1> <P>The body of a new section level content chunk</P> </ Section></Body>
Because implicit orchestration makes it easy to create an entire document structure that is not the same as the document structure you want, and it can easily cause confusion in the document structure, use the display orchestration as much as possible.
4. Different content blocks can use the same level of title
In addition, different content blocks can use the same level of title. For example, parent content chunks and child content chunks can use the same level of H1. The advantage of this is that each level of the title can be individually designed, if you need both "the title of the entire page", but also the "title of the article", this will bring great convenience, as shown in the following code:
<Body> <H1>The title of the page</H1> <article> <Header> <Hgroup> <H1>Article title</H1> <H2>Article Sub-title</H2> </Hgroup> </Header> <P>Article text</P> </article></Body>
Comprehensive example
Based on the previously mentioned knowledge points, let's take a sample to see how the content of the page should be formatted, the following code is a standard blog page example, in this example, with a standard blog page has the basic elements.
<!DOCTYPE HTML><HTML><Head> <title>Page Layout Examples</title> <MetaCharSet= "Utf-8" /></Head><Body> <!--Head - <Header> <!--Page Title - <H1>Page title</H1> <!--Navigation links - <nav> <ul> <Li><ahref= "Index.html">Home</a></Li> <Li><ahref= "help.html">Help</a></Li> </ul> </nav> </Header> <!--article - <article> <!--article title - <Hgroup> <H1>Article Main Title</H1> <H2>Article Sub-title</H2> </Hgroup> <!--article text - <P>Article text ...</P> <!--Article Comments - < Sectionclass= "Comments"> <article> <h5>Comment Title</h5> <P>Comment Text</P> </article> </ Section> </article> <!--Copyright - <Footer> <P>All rights reserved: XXX</P> </Footer></Body></HTML>
In this example, nested article tags are used to nest article tags about comments in the main article tag, which is recommended in HTML5.
The beauty of HTML5 structure (3)-the comprehensive application of structural labels
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
