Setting Up the HTML Code

The HTML code for this lesson is comprised of three main components: a <div> element, which helps define the header section semantically; an <h1> element; and a <ul> element for navigation as shown in Listing 18.1.

Listing 18.1. HTML Code Containing the Markup for the Site Header

<div id="container">
    <h1>
        <a href="/"><img src="header.jpg" alt="Sitename"a></a>
    </h1>
    <ul id="topnav">
        <li><a href="#">Skip to content</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Staff</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

Skip to content Link What does the Skip to content link mean? This link, called a skip link, enables users to skip over navigation links to get to the main content of the page. Skip links are beneficial for blind, visually impaired, and mobility impaired users, as well as people who use text browsers, mobile phones, and PDAs.