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
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:
<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>
Search WWH ::

Custom Search