HTML and CSS Reference
In-Depth Information
<div id="utilities">
<form id="search" action="/search">
<p>
<label for="search-main">Search for products</label>
<input type="search" name="search" id="search-main"
placeholder="utility belts">
<button type="submit">Search</button>
</p>
</form>
<p class="cart"><a href="/cart">Your cart: <b>0 items</b></a></p>
<form id="cart" method="post" action="/cart"></form>
</div>
<nav id="nav-main">
<ul>
<li><a href="/costuming">Costuming</a></li>
<li><a href="/gear">Gadgets & Gear</a></li>
<li><a href="/weaponry">Non-lethal Weaponry</a></li>
<li><a href="/defense">Armor & Defense</a></li>
<li><a href="/base">Lair & Vehicle</a></li>
</ul>
</nav>
</header>
Marking Up the Footer
We'll skip over the content area for the moment and get right to the site footer. As with the masthead, if we
were still using HTML4 or XHTML, we would use a semantically neutral
div
element to surround the footer
content, but now we can use HTML5's specialized
footer
element. And like the masthead, because it's
not appearing within another sectioning root—such as an
article
or
section
—this
footer
element acts
as the footer for the entire document. We'll once again assign an ID to set this footer apart from any other
footer
elements that might appear elsewhere.
The footer consists of another collection of navigation links (in an unordered list wrapped in a
nav
element), a paragraph for the Power Outfitters slogan, and another paragraph for the copyright statement.
Listing 10-4 presents the complete markup for our website's global footer.
Listing 10-4.
The Power Outfitters footer
<footer id="site-info">
<nav id="nav-info">
<ul>
<li><a href="/help">Help</a></li>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/shipping">Shipping</a></li>
<li><a href="/villains">Villain Policy</a></li>
</ul>
