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
first element on a page. It contains the title of the site, logos,
links back to the home page, and so on. The spec 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 first thing to note is that a
<header>
ele-
ment is not required; in our example above, it's superfluous as
it surrounds 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>
