HTML and CSS Reference
In-Depth Information
creating Headers
The
<header>
tag is designed to contain introductory and navigational elements. An introductory
element can be a logo, a masthead, or headings. Here's how the example code would incorporate a
<header>
tag:
<header>
<img src=”images/logo.jpg” />
<div id=”nav”>
<ul>
<li><a href=”home.htm”>Home</a></li>
<li><a href=”products.htm”>Products</a></li>
<li><a href=”services.htm”>Services</a></li>
<li><a href=”about.htm”>About Us</a></li>
</ul>
</div> <!-- End nav -->
</header>
As noted, the
<header>
tag can be used to hold one or more headings. It's not unusual for design-
ers to combine heading tags, like an
<h1>
and an
<h2>
together or use an
<h1>
tag with a
<p>
tag
as a tagline. HTML5 introduced a new tag,
<hgroup>
, to handle such situations where the intent
is to consider the various related elements as one hierarchical level. If you recall, the example code
included one such pairing that would be perfect for the
<hgroup>
tag:
<section>
<header>
<hgroup>
<h1>Welcome to Our Company Website</h1>
<p>We Make Great Stuff</p>
</hgroup>
</header>
<p>Our stuff is the best stuff around. Nobody makes stuff like our stuff.
Best of all, our stuff is the least expensive stuff you'll ever see -
which makes our stuff a terrific value.</p>
<p>When you need stuff, come see ours! You'll be glad you did!</p>
</section>
Note that you're not restricted to using the
<header>
tag once on a page. An area designated by a
<section>
tag can also include a
<header>
.
setting navigation areas
As covered in Lesson 15, modern website navigation is typically handled by a well-styled unordered
list of links. The aim of the
<nav>
tag is to contain the major navigation on a website page; the
<nav>
tag is typically enclosed in the
<header>
tag. Here's how the example code would look with
the
<nav>
tag in place:
<header>
<img src=”images/logo.jpg” />
<nav>
<ul>
<li><a href=”home.htm”>Home</a></li>
