210 CHAPTER 5 More HTML5
The <header> element can also contain the <hgroup> element, which provides the ability
to group one or more <hn> elements within a <header> element, as shown in the following
code example.
<header>
<hgroup>
<h1>Primary Header</h1>
<h2>seconday header</h2>
</hgroup>
<img src='logo.jpg' alt='Company Logo' />
</header>The <hgroup> is a wrapper for one or more related header elements. The <hgroup>
element can be in a <header> element but doesn’t need to be in a <header> element. The
<hgroup> is most commonly used for subtitles and alternative titles.
The biggest reason for using the <hgroup> element has to do with using HTML5 outliner
tools. If you have an <h1> header element and an <h2> subheader element, and you don’t
use the <hgroup> to connect a header and subheader, the outline treats the <h2> as a sec-
ond level, but you really want the subheading to be ignored. The <hgroup> will expose only
the first element and hide the other <hn> elements in the <hgroup>.
If your header is just an <hn> and contains no other content, you don’t need a <header>
element. As soon as you have more than a single <hn>, such as <img> elements and <p>
elements, wrap your content in a <header> element. When you have multiple <hn> ele-
ments, such as a header and subheader, wrap the <hn> elements in the <hgroup> element. A
<header> element should not be nested inside a <header> element.
By looking at the difference between Figure 5-2 and Figure 5-3, you can see that the
<header> element replaced the <div id=”header”> element. Be careful, because by default
the <header> element on some browsers does not render as a rectangular block as the
<div> element does. You can fix this by adding the following style rule to provide matching
behavior.
header { display:block;}Using the <footer> element
The <footer> elements in Figure 5-3 replace the <div id=”footer”> elements in Figure 5-2,
which cleans up the page a bit and provides a section meaning to browsers and other
devices.
The <footer> element typically contains information about the section it’s in, such as who
wrote it, copyright information, and links to related documents. The <footer> element is
much like the <header> element except that it typically belongs at the bottom of a section
instead of at the top. Like the <header> element, it can be used many times within an HTML
document to provide ending content for the HTML document and ending content for articles
and sections within the HTML document. The <footer> element should not be nested inside a
<footer> element. The following is an example of a <footer> element.