HTML5 study notes concise version (3): new elements hgroup, header, footer

hgroup

tag is used to group the titles of web pages or sections.

<hgroup>
  <h1 id="Welcome-nbsp-to-nbsp-my-nbsp-WWF">Welcome to my WWF</h1>
  <h2 id="For-nbsp-a-nbsp-living-nbsp-planet">For a living planet</h2>
</hgroup>

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

header

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

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

<header>
    <h1 id="The-nbsp-most-nbsp-important-nbsp-heading-nbsp-on-nbsp-this-nbsp-page">The most important heading on this page</h1>
</header>

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

element, for example:

<header> 
  <h1 id="The-nbsp-most-nbsp-important-nbsp-heading-nbsp-on-nbsp-this-nbsp-page">The most important heading on this page</h1>
</header>

<article> 
  <header>   
    <h1 id="Title-nbsp-of-nbsp-this-nbsp-article">Title of this article</h1> 
  </header> 
  <p>...Lorem Ipsum dolor set amet...</p>
</article>

The

element usually contains a heading tag (h1 to h6) or hgroup. In addition, other content can also be included, such as data tables, search forms or related logo images; according to the latest W3C HTML5 specification update, the

element tag can also be used in

.

footer

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

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

<div id="footer">
  <ul>
     <li>copyright</li>
     <li>sitemap</li>
     <li>contact</li>
     <li>to top</li>
  </ul>
<div>

In HTML5, we can not use div, but use more semantic footer to write:

<footer>
  <ul>
     <li>copyright</li>
     <li>sitemap</li>
     <li>contact</li>
     <li>to top</li>
  </ul>
</footer>

Multiple

elements can be used in 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 write

directly in

or

:

<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 contact information in the document, including the name of the document creator, site link, email address, real address, phone number, etc.; address is not just used to present the concept of "address" such as email address or real address. , but should include various contact information related to the person who created 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, also using

and < ;time> Element:

<footer>
  <div class="vcard"> by
    <address class="author">
      <em class="fn"><a title="Posts by Jack Osborne" href="#">Jack Osborne</a></em>
    </address> on
    <time datetime="2009-11-04" class="published updated">November 4th, 2009</time>
  </div>
</footer>

If we really need to display some contact information in the page that is not related to the contact information of the current document creator, 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 elements link to other pages or other parts of the current page. Not all link groups need to be put into the

element; for example, there is usually a group of links in the footer, including terms of service, home page, copyright statement, etc.; in this case, it is most appropriate to use the

element. , without the need for the

element.

We have always been accustomed 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 given by W3C:

<body>
    <h1 id="The-nbsp-Wiki-nbsp-Center-nbsp-Of-nbsp-Exampland">The Wiki Center Of Exampland</h1>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/events">Current Events</a></li>
            ...more...
        </ul>
    </nav>
    <article>
        <header>
            <h1 id="nbsp-Demos-nbsp-in-nbsp-Exampland"> Demos in Exampland</h1>
            <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 id="Public-nbsp-demonstrations">Public demonstrations</h1>
                <p> ...more...</p>
            </section>
            <section id="destroy">
                <h1 id="Demolitions">Demolitions</h1>
                <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>

以上就是HTML5学习笔记简明版（3）：新元素之hgroup,header,footer的内容，更多相关内容请关注PHP中文网（www.php.cn）！