Setting Up the HTML Code

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. Some developers use hidden skip links, which are specifically designed for blind users. However, skip links should be visible for people who cannot use the mouse and must use tabbing to navigate websites.