hgroup
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
<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
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
<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
<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
<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中文网（m.sbmmt.com）！
What are the production methods of html5 animation production?
The difference between HTML and HTML5
How does a switch work?
WeChat Moments cannot be refreshed
Solution to java success and javac failure
Configure java environment variables
How to buy Bitcoin
What is the function of frequency divider
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
