HTML and CSS Reference
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
<img src="images/logo-big.png" width="265" height="145"
alt="Power Outfitters Superhero Costume & Supply Co.">
<p>616 Kirby Ave (between Romita and Ditko)</p>
<p>Mon–Thu: <time datetime="08:00">8am</time>–
<p>Fri–Sun: <time datetime="08:00">8am</time>–
<p>24-hour service and repair: call 555-1961</p>