HTML 5 Structure

In the overall layout of the time, the specific method can be used.

1. Outline: The structure of each content block in the document.

Content blocks can use heading elements to show the titles of content blocks at all levels.

The layout of content blocks can be divided into "show orchestration" and "implicit orchestration".

Display Orchestration: explicitly use elements such as sections to create a document structure, using headings (H1-H6, hgroup) within each content chunk. clearer and easier to read.

Implicit orchestration: not explicitly using elements such as sections, but based on the headings of each level written in the page (H1-h6, Hgroup) the content blocks are created automatically. (it's easy to make the auto-generated structure different from what you want, easily cause structural confusion, and use display orchestration as much as possible.) )

Title Rating:H1 is the highest level and the H6 level is the lowest. implicit orchestration automatically generates content chunks as follows: If the newly-appearing caption is lower than the previous heading level, a sub-content chunk is generated, and if the newly-appearing caption is higher or level equal than the previous heading level, a new content chunk is generated.

Different content chunks can use the same level of title: The same level of headings can be used for both parent content chunks and child content chunks, and the benefit is that each level of headings can be individually designed for the "title of the entire page" and "title of the article" (such as when writing a document) to be very convenient.

2. Use styles for new structural elements

Add the following declaration to the CSS to notify the browser page that the new HTML 5 element is displayed in block mode:

Article,aside,dialog,figure,footer,header,legend,nav,section{display:block;}

In IE 8 and before the browser, you need to use JS script to enable the browser to use these structures normally:

<script>

Document.createelement ("header");
Document.createelement ("Nav");
Document.createelement ("article");
Document.createelement ("footer");
</script>

HTML 5 Structure