Section 64th, HTML Document layout elements

HTML document layout elements

Learning Essentials:

1. Document elements

2. Document ELEMENT parsing

This chapter mainly discusses the HTML5 Chinese document elements, The main function of documentation elements is to divide the various content, so that the entire layout clear and crisp. Let the entire layout element have semantics and further replace the Div.

A Document Element Summary

Document elements have little practical effect and are primarily designed to differentiate between topics and concepts when the page is laid Out.

Element name Description

H1~h6 for title

Header indicates header

Footer means tail

Nav represents a navigation element that is intended to be lumped together

section denotes an important concept or topic

Article represents a separate piece of content

Address represents the contact information for a document or article

Aside says there are few things involved with the surrounding content

Hgroup organize a group of headings together

Details generate a region where the user expands to get more details

Summary is used in the details element to represent the title or description of the Element's content

Two Document layout Element Resolution

Most of the tags in the document element are not effective, and are entirely intended to be used in conjunction with semantics to emphasize its structure. You can only use CSS in later chapters to work with layouts and styles.

1.

< Header >     This section is usually the head of the page, including: LOGO, title, navigation and other content </header>

Explains the:

2.<footer> means tail

< Footer >     Here is the end of the page, generally include: copyright notice, links and other content </footer>

Explains the tail of the main settings page of the:<footer> Element.

3.

< Header >    < H1 > title section </H1>     <h4> Small title section </ h4 > </ Header >

Explaining the actual effect of:

4.

<Header>    <Hgroup>        <H1>Title Section</H1>        <h4>Small title Section</h4>    </Hgroup></Header>

Explaining the role of the:

5.<section> Document Topics

<  section > this is usually the subject of the Document.  </section>

Explaining the role of the:<section> element is to define the subject content of a Document.

6.<nav> Adding navigation

<Header>    <H1>Title Section</H1>    <h4>Small title Section</h4>    <nav>The navigation of the document is stored here</nav></Header>

Explains the:<nav> element to add a navigation to a document Page.

7.<article> Add a separate document

<article> <!--add a document that is separate into an article -    <Header> <!--Add a document header that is separate into an article -        <nav></nav> <!--Add a document navigation that is separate into an article -    </Header>< section>Document theme</ section> <!--Add a document theme that is separate into an article -<Footer>Tail</Footer> <!--Add a document trailer that is separate into an article -</article>

Explains The:<article> element, which can contain a series of content, such as head, tail, theme, etc., as a separate document. In the larger pages will be used, such as a list of blog posts, each blog post, has its own head, tail, themes and other Content. Similar to this, there are forum posts, user comments, news, and so On.

8.<aside> Generate Comment Bar

< aside > This is a comment bar </aside>

Explains that the:<aside> element is used specifically for commenting on a section of Content. That's the side bar.

9.<address> represents the contact information for a document or article Element.

< Address > Contact information </address>

Explanation: if it is under the <body> element, the contact information for the entire document is Represented. If it is under the <article> element, it represents the contact information under it.

The 10.<details> element generates the detail area, the <SU ary> element in its internal generation description tag explanation: because most mainstream browsers are not yet supported, tentatively.

Section 64th, HTML Document layout elements