Structural learning of HTML5 (2)---new non-body structure elements

In addition to the main structure elements learned in the previous article, HTML5 also adds some non-principal structural elements that represent the logical structure and additional information:

1.header

Explanation: A structure element that has a guided and navigational effect.

Purpose: Usually used to place the entire page or the title portion of a content block within a page. such as title name, logo image, etc.

  <Header><H1>Big Headlines</H1></Header>  <article>    <Header><H1>Article content title</H1></Header>    <P>Body Content</P>  </article>

In HTML5, a header element must contain at least one heading element (H1~H5) or a new hgroup element.

   <Header>    <Hgroup>        <H1>Paper's Blog</H1>        <ahref= "XXX">XXX</a>        <ahref="#">Subscription</a>        <ahref="#">[Mobile Subscription]</a>    </Hgroup>    <nav>        <ul>            <Li>Home</Li>            <Li>Blog Directory</Li>            <Li>Image</Li>            <Li>About Me</Li>        </ul>    </nav>  </Header>

2.hgroup

Explanation: Is the element that groups the title and its sub-headings

Purpose: Contains a set of headings

    <article>    <Header>        <Hgroup>            <H1>Main Title</H1>            <H2>Sub-headings</H2>        </Hgroup>        <P>                     < Timedatetime= "2014/09/19">September 19, 2014</ Time>               </P>    </Header>    <P>Body Content</P>  </article>                                

Note: The article does not need to use hgroup when there is only one title

3.footer

Explanation: As a footnote to the upper parent block or the root block

Use: Generally used to include the author or link information, website copyright and other footnotes.

  <Footer>    <ul>        <Li>Copyright information</Li>        <Li>Site Map</Li>        <Li>Contact information</Li>    </ul>  </Footer>

Note: The footer element can also exist in section and article chunks, which represent the footnote information for a section chunk or article content.

4.address

Explanation: Used to render contact information in a document

Purpose: Used to indicate the name of the author of the document, site links, e-mail address and phone number.

For example, links in the site:

  <aside>    <Address>        <ahref= "XXX">Comrade A</a>        <ahref= "XXX">Gay B</a>        <ahref= "XXX">Gay C</a>    </Address>  </aside>

Structural learning of HTML5 (2)---new non-body structure elements