HTML and CSS Reference
In-Depth Information
seem right. However, a paragraph doesn't seem right either. An
h1
for the title and an
h2
for the slogan seems more appropriate, because there is a clear hierarchy of import-
ance between the two, yet they are part of the same introductory text. Here's where the
last element in the heading content category comes in handy: enter
hgroup
!
Using hgroup
The
hgroup
element allows a group of heading elements to be placed together and
have only the highest ranked one among them be exposed to the HTML5 outline al-
gorithm, which is useful for situations where you may want to have two headings in one
section, such as a single article that has a title and subtitle. By wrapping the title in an
h1
and the subtitle in an
h2 a
nd then grouping them together with an
hgroup
, the
h2
will not create a new section, because it won't be seen by the outline algorithm. Anoth-
er advantage of this is the order in which the heading elements appear can be changed,
since the lower-ranked headings are effectively ignored for structural purposes. For the
example code we have been working with, we could move the slogan above the title
with no structural repercussions, giving us the following code appearance:
…
<body>
<header>
<hgroup>
<h2>Site Slogan!</h2>
<h1>Site Title</h1>
</hgroup>
<nav><h1>Main Navigation</h1></nav>
</header>
<section><h1>Featured Content</h1>
…
Formatting a footer with an address
A common element to include inside a
footer
is a way to contact the author of an
article or owner of a site. A typical element to find in the footer for this purpose is the
address
element. This element is not for a P.O. box or similar address that would not
be the most direct means of contacting the author (though that information may appear
in the footer as well). It is instead for providing direct contact information (e-mail ad-
dress, phone number, and so on) for the nearest article or the page as a whole.
Search WWH ::
Custom Search