HTML and CSS Reference
In-Depth Information
but HTML5 gives us an element for just this purpose:
header
. Because it appears at the beginning of the
document with the
body
element as its parent sectioning root, this
header
element acts as the header for
the whole document.
We'll give the
header
element an ID because this element is unique; there will only ever be one masthead
on a page. We could, of course, use a
class
attribute for styling purposes and avoid too many specificity
problems, but using an
id
attribute reinforces the uniqueness of this header. A class is a classifier but an
ID is an identifier; this element isn't just
a
masthead, it's
the
masthead.
We'll use an
h1
element for the logo, even though the logo itself is an inline image (with appropriate
alternative text, of course). An image by itself would lack the semantic weight of a heading, and this logo
also acts as the top-level title for the entire document.
The store's street address, business hours, and phone number are each distinct pieces of content
expressing a single idea, so it makes sense to mark up each piece as a separate paragraph. However, we
also want to group them together as related statements. We might use a
section
element, but this
content isn't really a section of a lengthier sequence of content, we simply want to keep it all together in a
generic box. The old standby
div
element seems most appropriate here; it collects the content into a unit
but doesn't imply any additional semantics.
We'll group the search form (using
input type="search"
) and the shopping cart link together in another
div
because they serve similar utilitarian purposes. We're also adding an empty
form
element here with
the ID “cart” so all of the “Add to Cart” buttons that will appear later can reference the same form. This
form only needs to accept input from elsewhere on the page and pass it on to our shopping cart
application; the
form
element itself doesn't hold any contents. It could really appear anywhere in the
document, but we're putting it here in the masthead because it's as good a place as any.
The primary navigation calls for the
nav
element, once again with an
id
attribute singling this out as the
unique element it is; it's the main navigation and there will be only one such element. The menu inside that
nav
element is simply an unordered list of links.
You can see the complete markup for our site's masthead in Listing 10-3.
Listing 10-3.
The Power Outfitters masthead
<header id="masthead">
<h1 id="logo">
<img src="images/logo-big.png" width="265" height="145"
alt="Power Outfitters Superhero Costume & Supply Co.">
</h1>
<div id="store-info">
<p>616 Kirby Ave (between Romita and Ditko)</p>
<p>Mon–Thu: <time datetime="08:00">8am</time>–
<time datetime="22:00">10pm</time></p>
<p>Fri–Sun: <time datetime="08:00">8am</time>–
<time datetime="00:00">12am</time></p>
<p>24-hour service and repair: call 555-1961</p>
</div>
