Links

Here you find the requirements for coding links on the EERE Web site, with information about H2 linked headers, "back to top" links, and Section 508 accessibility requirements for skipping repetitive navigation links.

Coding Links

For all Web sites on EERE, follow these guidelines:

Make sure that all links work throughout the site, including text, graphical, and mailto links.
Code all links within the site as relative to the root or relative to the document. OpenText sites should use internal OpenText links within the site.
Hard code links to all other sites, including EERE sites as absolute links, e.g. http://www.eere.energy.gov/solar/

Examples of OpenText and Fully Qualified Links

If you are not sure how to code a link to another site, use these examples as a guideline.

OpenText Links

Use OpenText Links if you are coding:

A link from one Industry corporate page to another Industry corporate page
A link from one Aluminum Industry of the Future subsite page to another Aluminum Industry of the Future subsite page.

There is one exception. Links to assets in OpenText such as PDFs and images should be linked site-relative, e.g. /solar/images/someimage.jpg

Fully Qualified Links

Use fully qualified links if you are coding links like these:

A link on Solar (www1) to the Biomass site (www1) should be coded as
http://www.eere.energy.gov/biomass/
A link from Fuel Cells (www1) to their Education subsite (www1) should be coded as
http://www.eere.energy.gov/hydrogenandfuelcells/education/
A link from the Solar site (www1) to the EERE News site (apps1) should be coded as
http://apps1.eere.energy.gov/news/
A link from the EERE News site (apps1) to the Solar site (www1) should be coded as
http://www.eere.energy.gov/solar/
A link from Solar (www1) to the EERE Home Page (www) should be coded as
http://www.eere.energy.gov/
A link from the the EERE Home Page (www) to the Social Media subpage (www) should be coded as
http://www.eere.energy.gov/socialmedia/
All links entered via the EERE news, events and solicitations should be entered absolutely.

Link Styles

Links should always be underlined. Any site not using the EERE style sheet or the EERE template must still make sure their links are underlined. Without underlining, a link is invisible to colorblind users.

Linking Second Level Headers

When H2 headers are used as links, they should be formatted as follows:

H2 Linked Header Example

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>

Skipping Repetitive Navigation

Repetitive navigation is defined as navigation that appears throughout a site (or at least several pages), such as the top and left navigation in the EERE template. Anchor links to skip navigation are built in to the OpenText template so no additional coding is needed. For sites not in OpenText, use an anchor link immediately after the tag to skip past repetitive navigation. This can be hidden from sighted visitors by using the .hide style in the EERE style sheet.

<body>
<a href="#content" class="hide">Skip navigation to main content</a> 
[navigation code] 
<h1 id="content">Geothermal Energy</h1>