Coding Links on Websites Outside of the Energy.gov Drupal Environment
If you're coding links for a website outside of the Energy.gov environment, follow these guidelines. This includes explanations of how to code links, how to add the "external website" pop-up, how to create "back to top" links, and how to code skipped navigation.
Linking to Native File and PDF Links
External Website Pop-Ups
When you code an external link on a site that's hosted on one of EERE's official hosting environments, built-in code will automatically add pop-up windows that warn users they're going to another site.
On websites hosted outside of the Energy.gov environment, the pop-up looks like this:
This pop-up box will appear whenever you link to a site that does not belong to EERE. If a site was created by EERE, then the pop-up will appear when:
- The site does not have a .GOV URL
- The site is not hosted in one of EERE's approved hosting environments
- The site is not in EERE's template and is not approved to be out-of-template
- The site does not meet EERE's Quality Assurance standards.
If your website is not hosted on Energy.gov or an EERE server, contact the Web Template Coordinator for the code to set this up on your website.
"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 */
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.
<a href="#content">Skip navigation to main content</a>
<h1 id="content">Geothermal Energy</h1>