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

hgroup

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

<hgroup>
  <h1>Welcome to my WWF</h1>
  <h2>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>The most important heading on this page</h1>
</header>

In the same page, each content block can have its own 1aa9e5d373740b65a0cc8f0a02150c53 element, for example:

<header> 
  <h1>The most important heading on this page</h1>
</header>

<article> 
  <header>   
    <h1>Title of this article</h1> 
  </header> 
  <p>...Lorem Ipsum dolor set amet...</p>
</article>

The 1aa9e5d373740b65a0cc8f0a02150c53 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 c787b9a589a3ece771e842a6176cf8e9 element tag can also be used in 1aa9e5d373740b65a0cc8f0a02150c53.

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 c37f8231a37e88427e62669260f0074d 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 c37f8231a37e88427e62669260f0074d directly in 2f8332c8dcfd5c7dec030a070bf652c3 or 23c3de37f2f9ebcb477c4a90aac6fffd:

<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 c37f8231a37e88427e62669260f0074d 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 c787b9a589a3ece771e842a6176cf8e9 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 c37f8231a37e88427e62669260f0074d element. , without the need for the c787b9a589a3ece771e842a6176cf8e9 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>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> 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>Public demonstrations</h1>
                <p> ...more...</p>
            </section>
            <section id="destroy">
                <h1>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）！