HTML5 learning notes (3): hgroup, header, footer, address, nav

 

Hgroup

<Hgroup> A tag is used to combine the titles of a webpage or section.

<Hgroup>

<H1> Welcome to my WWF

<H2> For a living planet

</Hgroup>

 

<P> The rest of the content... </p>

 

 

Header

The header element is an auxiliary element with guidance and navigation functions. Generally, the header element can contain the title of a block (such as h1 to h6, or the hgroup element label), but it can also contain other content, such as data tables, search forms, or related logo images.

We can use this element to write the title of the entire page:

<Header>

<H1> The most important heading on this page

</Header>

 

 

On the same page, each content block can have its own

<Header>

<H1> The most important heading on this page

</Header>

 

<Article>

<Header>

<H1> Title of this article

</Header>

<P>... Lorem Ipsum dolor set amet... </p>

</Article>

 

 

<Header> An element usually contains a Title Tag (h1 to h6) or an hgroup. In addition, it can contain other content, such as data tables, search forms, or related logo images. It is updated according to the latest W3C HTML5 specifications, <nav> element labels can also be used in

Footer

The footer element can be used as its parent content block or the end of a root block. Footer usually includes additional information about its related blocks, such as the author, related reading links, and copyright information.

In the past (and now), we usually use code similar to the following to write the footer of a page:

<Div id = "footer">

<Ul>

<Li> copyright </li>

<Li> sitemap </li>

<Li> contact </li>

<Li> to top </li>

</Ul>

<Div>

 

 

In HTML5, we can use a more semantic footer to write without using div:

<Footer>

<Ul>

<Li> copyright </li>

<Li> sitemap </li>

<Li> contact </li>

<Li> to top </li>

</Ul>

</Footer>

 

 

You can use multiple <footer> elements on the same page, which can be used as the footer of the entire page or as the end of a content block. For example, we can directly write <footer> in <section> or <article>:

<Section>

Section content appears here.

<Footer>

Footer information for section.

</Footer>

</Section>

 

<Article>

Article content appears here.

<Footer>

Footer information for article.

</Footer>

</Article>

 

 

Address

The address element is used to present the contact information in the document, including the name, site link, email address, real address, and phone number of the document creator; address is not only used to present the "address" concept such as an email address or a real address, but should include all kinds of contact information related to the creator of the document.

Based on the above definition, we can use the following code to display the names and homepage links of some volunteers:

The HTML5 Doctor is run by the following group of volunteers:

<Address>

<A href = "http://html5doctor.com/author/jacko"> Jack Osborne </a>,

<A href = "http://html5doctor.com/author/richc"> Rich Clark </a>,

<A href = "http://html5doctor.com/author/miker"> Mike Robinson </a>,

</Address>

 

 

The following is another example. The <footer> and <time> elements are also used:

<Footer>

<Div class = "vcard">

<Address class = "author">

<Em class = "fn"> <a title = "Posts by Jack Osborne" href = "#"> Jack Osborne </a> </em>

</Address> on

<Time datetime = "2009-11-011-04" class = "published updated"> November 4th, 2009 </time>

</Div>

</Footer>

 

 

If we do need to display some contact information irrelevant to the contact information of the current document Creator on the page, we can use the hCard microformat:

<Div class = "vcard">

<P class = "fn"> <a class = "url" href = "#"> Dr. Jack Osborne </a> <p>

<P class = "adr">

<Span class = "street-address"> HTML5 Hospital </span>

<Span class = "region"> Doctorville </span>

<Span class = "postal-code"> Postal Code </span>

<Span class = "country-name"> Great Britain </span>

</P>

<P class = "tel"> + 44 (0) xxxx xxxxxx </p>

</Div>

 

 

Nav

The nav element is a link group that can be used as page navigation. The navigation element links to other pages or other parts of the current page. Not all link groups need to be placed in the <nav> element. For example, in the footer, there is usually a set of links, including the terms of service, homepage, and copyright statement; in this case, using the <footer> element is the most appropriate, without the <nav> element.

We have always been used to defining navigation bars in the following way:

<Nav>

<Ul>

<Li> <a href = "index.html"> Home </a> </li>

<Li> <a href = "/about/"> About </a> </li>

<Li> <a href = "/blog/"> Blog </a> </li>

</Ul>

</Nav>

 

 

The following is a code example provided by W3C:

<Body>

<H1> The Wiki Center Of Exampland

<Nav>

<Ul>

<Li> <a href = "/"> Home </a> </li>

<Li> <a href = "/events"> Current Events </a> </li>

... More...

</Ul>

</Nav>

<Article>

<Header>

<H1> Demos in Exampland

<P> Written by A. N. Other. </p>

</Header>

<Nav>

<Ul>

<Li> <a href = "# public"> Public demonstrations </a> </li>

<Li> <a href = "# destroy"> Demolitions </a> </li>

... More...

</Ul>

</Nav>

<Div>

<Section id = "public">

<H1> Public demonstrations

<P>... more... </p>

</Section>

<Section id = "destroy">

<H1> Demolitions

<P>... more... </p>

</Section>

... More...

</Div>

<Footer>

<P> <a href = "? Edit "> Edit </a> | <a href = "? Delete "> Delete </a> | <a href = "? Rename "> Rename </a> </p>

</Footer>

</Article>

<Footer>

<P> <small>©Copyright 1998 Exampland Emperor </small> </p>

</Footer>

</Body>

 

 

 

Uncle Tom