HTML and CSS Reference
In-Depth Information
When to use the new HTML5
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.
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:
<a href=”/”><img src=logo.png alt=”home”></a>
<h1>My interesting blog</h1>
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:
<a href=”/”><img src=logo.png alt=”home”></a>
<h1>My interesting blog</h1>
<h2>Tedium, dullness and monotony</h2>
The header can also contain navigation. This can be very use-
ful for site-wide navigation, especially on template-driven sites
Search WWH ::

Custom Search