HTML and CSS Reference
In-Depth Information
<div id="utilities">
<form id="search" action="/search">
<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 class="cart"><a href="/cart">Your cart: <b>0 items</b></a></p>
<form id="cart" method="post" action="/cart"></form>
<nav id="nav-main">
<li><a href="/costuming">Costuming</a></li>
<li><a href="/gear">Gadgets &amp; Gear</a></li>
<li><a href="/weaponry">Non-lethal Weaponry</a></li>
<li><a href="/defense">Armor &amp; Defense</a></li>
<li><a href="/base">Lair &amp; Vehicle</a></li>
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">
<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>
Search WWH ::

Custom Search