HTML and CSS Reference
In-Depth Information
structural elements
We've used these elements to mark up our page, and styled them,
and although the use of each might seem to be self-evident from
the names, it's time to study them in a little more detail.
<header>
In our example above, as on most sites, the header will be the
fi r s t e fi e m e n t of n a p a g e , a n d c of n t a fi n s t h e t fi t fi e of fi t h e s fi t e , fi of g of s ,
links back to the home page, etc. The specifi cation says:
“The header element represents a group of introductory or navi-
gational aids ... Note: A header element is intended to usually
contain the section's heading (an h1-h6 element or an hgroup
element), but this is not required. The header element can also
be used to wrap a section's table of contents, a search form, or
any relevant logos.”
Let's dissect this. The fi rst thing to note is that a header element
is not required; in our example above, it's superfl uous as it sur-
rounds just the
<h1>
. Its value is that it groups “introductory or
navigational” elements, so here's a more realistic example:
<header>
<a href=”/”><img src=logo.png alt=”home”></a>
<h1>My interesting blog</h1>
</header>
Many websites have a title and a tagline or subtitle. To mask the
subtitle from the outlining algorithm (so making the main head-
ing and subtitle into one logical unit; see Chapter 2 for more dis-
cussion), the main heading and subtitle can be grouped in the
new
<hgroup>
element:
<header>
<a href=”/”><img src=logo.png alt=”home”></a>
<hgroup>
<h1>My interesting blog</h1>
<h2>Tedium, dullness and monotony</h2>
</hgroup>
</header>
The header can also contain navigation. This can be very use-
ful for site-wide navigation, especially on template-driven sites
