Coding Navigation and Other Links
When designing, redesigning, and maintaining Web pages, follow these guidelines.
General
- Make sure that all links work throughout the site, including text, graphical, and mailto links.
- Code all links on the EERE server as relative to the root or relative to the document. Do not hard link to the live or development server (e.g., to http://www.eere.energy.gov/).
H2 Linked Header Example 
When H2 headers are used as links, they should appear as the H2 above. The H2 linked header uses the following styles and this red arrow graphic . You may need to add these styles to your main style sheet and the arrow to your images folder.
h2 a:link {text-decoration:none;color:#990000;}
h2 a:visited {text-decoration:none;color:#990000;}
h2 a:hover {text-decoration:underline;color:#000066;}
Code the linked H2 as follows:
<h2><a href="mylink.html">H2 Linked Header Example</a> <img src="/images/h2_red_arrow.gif" width="5" height="9" alt=""></h2>
"Back to Top" Anchor Links
The use of "Back to Top" anchor links is discouraged unless a document is very long. If used, use the .backtotop class to format as shown below. Always use the phrase "Back to Top".
/* Back to Top Anchor Link */
.backtotop {
text-align: right;
font-size :70%;
}
.backtotop A:hover {
color: #990000;
}
.backtotop :link, .backtotop :visited {
color : #000066;
}
Example: <p class="backtotop"><a href="#content">Back to Top</a></p>
508
Skipping Repetitive Navigation
Repetitive navigation is defined as navigation that appears throughout a site (or at least several pages), such as the top, left, and footer navigation in the EERE template. Use anchor links and spacer gifs to skip past repetitive navigation.
<a href="#main_content"><img src="images/spacer.gif" alt="Skip navigation to main content" width="1" height="1"></a> . . . . . . <h1><a name="main_content">Geothermal Energy</a></h1>
Image Maps
Client-side image maps should be used instead of server-side image maps if at all possible. If you must use a server-side map, provide a text alternative on the page for all links.
Client-side image maps allow the use of alt descriptions to give the user information about each link. Alt descriptions are required to be included with the use of client-side maps.
