HTML5 Semantic Label Usage specification

HTML5 adds a lot of semantic tags, a typical HTML5 page structure can be arranged as follows

First, use Case 1. Head--header and NAV labels

Header head, the body under the direct sub-element header is generally used to put pages of introductory information such as the site name, logo or nav bar nav.

 <header>         <H1>HTML5 semantic Tags</H1>         <nav>             <H1>Navigation</H1>            <ul>                <Li>Chapter Labels</Li>                <Li>Title label</Li>            </ul>         </nav></header> 

Use the HTML5 header and Nav labels

    <Divclass= "header">        <H1>HTML5 semantic Tags</H1>        <Divclass= "NAV">            <H2>Navigation</H2>            <ul>                <Li>Chapter Labels</Li>                <Li>Title label</Li>            </ul>        </Div>    </Div>

The traditional head

Notice that the above used two H1 tags, in the traditional HTML4, H1 title can only use one, used to represent the large title of the page. But in the HTML5 tag, all the title tags H1~H6 can be used in different chapters. As above, the second H1 label belongs to the Nav label, and the first H1 is at different levels. In Chrome, the second H1 style font is less than the first one:

2. Main part--main and section

 <main><section>             <Hgroup>                <H2>Chapter Labels</H2>                <P>Distinguish different chapters for a page</P>            </Hgroup>            <Div>Includes section article Nav aside</Div>         </section><sections>             <Hgroup>                <H2>Title label</H2>                <P>Define headings for different chapters</P>            </Hgroup>             <Div>H1 H2 H3 h4 h5 h6 six title tags</Div>         </section></main> 

The main tag represents the main part of the page, and the section tag distinguishes the page from the different chapters. Section is a chapter label that builds the outline (outline) of the page. In addition to the NAV, artical and aside three labels can outline the contours of the page. Chapter labels are usually labeled with the H1~H6 title tag. Different chapter headings are independent, and nested chapter headings are nested. In addition, multiple headings can be included with Hgroup and become a separate piece of content in the page outline.

Note that the main tag above is a later label, all IE browsers do not support the label, will be the child element tag adjacent to the label, thus the page is garbled. The solution is to IE8 and the following using Document.createelement ("main") method to identify them, and IE9 and above settings Css:main{display:block} can be.

3. Tail--footer

    < Footer >        < P > &copy Hello, World</p>    </footer >

Footer, like the header, is used in different chapters to show the links, copyrights, and other information related to this section (such as the body's entire page).

Second, the outline of the page (outline)

The above mentioned outline and section chapters, there is an online tool HTML 5 Outliner can abstract out the outline of the page, the above demo with this tool refined outline as follows:

The outline of the page has provisions for an algorithm extraction.

There are two main advantages to considering an outline: The first is Search engine optimization (SEO), and the second is a screen reader that can quickly extract content summaries. This is also the vitality of HTML5 semantic tags, but also the significance of this discussion, but also with HTML4 a very big difference.

The outline of the page is distinguished by the body of the four Chapter elements section, article, aside, NAV, and chapter mentioned above, while the outline or title of the chapter is defined by a title tag such as H1 . Conversely, elements such as header/footer/div do not have a outline effect, and the title tags, such as those defined in H1, belong to the section of the Header/footer tag. Also note that there are several labels that define headings that do not contribute to the outline of the chapter in which the tag is located:blockquote body details dialog fieldset figure td。如下示例：

<Body>    <H1>First Level outline</H1>    <blockquote>        <H2>Title within the BLOCKQUOTE</H2>    </blockquote>    <Div>        <H2>The title within the Div</H2>    </Div></Body>

Blockquote inside the H2 tag does not add content to the outline of the page

Third, how to use 1. The difference between Div and section, section, and article

A div is an ordinary container, and a section cannot be used as a common container, and the use of sections is to make it outline, while article is more powerful than the chapter concept of a part. Article is suitable for independent content, such as an article, blog, or user comments, article more emphasis than section need to include a title tag H1~h6. If the semantics of using article is better, you don't need a section. Or, the content can continue to subdivide chapters should also use article.

2. The content of the chapters is independent and can be nested

Independence means that each chapter can have its own title tag, header, footer, and NAV, and chapters can be nested with each other, for example:

<Body>    <H1>HTML tags</H1>    <article>        <H1>HTML5 label</H1>        < Section>            <H1>Title label</H1>        </ Section>        < Section>            <H1>Chapter Labels</H1>        </ Section>    </article>    <article>        <H1>HTML4 Label</H1>    </article></Body>

3. Other common tags (1) Figure and Figcaption

Figure as a container for photos and their annotations

    <  Figure >        <  src= "mars.jpg"  alt= "">        <  Figcaption> mars </figcaption>    </  Figure >

(2) aside

Aside content is tangent to the main content of the page and can be used as a sidebar

(3) More labels

See the MDN HTML5 tab list for more label usage

Reference:

1. About label Standard Description: https://w3c.github.io/html/single-page.html

2. Dive into HTML5 introduction to the interpretation and use of HTML5 new tags, http://diveintohtml5.info/semantics.html

HTML5 Semantic Label Usage specification