Coding Links on Websites Outside of the Drupal Environment

If you're coding links for a website outside of the 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

See links to Native Files and PDFs.

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 environment, the pop-up looks like this:

Leaving DOE Popup

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 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 */
.backtotop {
text-align: right;
font-size :70%;}

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.

<div class="sr-only">
<a href="#content">Skip navigation to main content</a> 
[navigation code] 

<h1 id="content">Geothermal Energy</h1>