Native File Formats and PDFs on Websites Outside of the Environment

Websites and applications outside the Drupal environment should follow these requirements when linking to non-HTML resources or native files like PDFs or Word, Excel, and PowerPoint files.

When linking to native files, remember that links to these types of files will not be accessible to site visitors who do not have the native software program or plugin on their system.

See our best practices for optimizing native files, which can be done for all websites in all hosting environments, including the Drupal environment.

Linking to PDFs, ZIPs, and Microsoft Office Files

When you link to these file types, include the icon for that file type:

  • Adobe Reader (.pdf) pdf
  • ZIP files (.zip) zip
  • Word (.doc, .docx) Word
  • Excel (.xls, .xlsx) Excel
  • PowerPoint (.ppt, .pptx) PowerPoint

The link text should be descriptive. Use either the name of the file or a phrase that clearly describes what the file is. For example:

  • See the 20% Wind by 2020 report.
  • See the full list of awardees.

Coding Icons for Sites on EERE's Official Hosting Environments

If your site is hosted on one of EERE's official servers (for example, apps1 or www1), the icons will be added automatically when you link to any of the file types above.

Coding Icons on Externally Hosted Websites

If your site is not hosted on one of EERE's official hosting environments, you will need to code the icons manually.

A link to a PDF should be coded as follows:

 <a href="/somepdf.pdf">Wind by 2020 report<img src="/images/icon_pdf.gif" width="13" height="14" class="arrowicon" alt="PDF"></a>

Include the icon inside the link so it can be read by screen readers. Do not include a space between the title and the image icon—a small amount of padding will be inserted automatically by the class "arrowicon."

Links to the icons and their alt text should be coded as follows:

  • <img src="/images/icon_pdf.gif" originalAttribute="src" originalPath=""/images/icon_pdf.gif"" width="13" height="14" class="arrowicon" alt="PDF">
  • <img src="/images/icon_zip.gif" originalAttribute="src" originalPath=""/images/icon_zip.gif"" width="13" height="14" class="arrowicon" alt="Compressed File">
  • <img src="/images/icon_word.gif" originalAttribute="src" originalPath=""/images/icon_word.gif"" width="13" height="14" class="arrowicon" alt="Microsoft Word">
  • <img src="/images/icon_excel.gif" originalAttribute="src" originalPath=""/images/icon_excel.gif"" width="13" height="14" class="arrowicon" alt="Microsoft Excel">
  • <img src="/images/icon_powerpoint.gif" originalAttribute="src" originalPath=""/images/icon_powerpoint.gif"" width="13" height="14" class="arrowicon" alt="Microsoft PowerPoint">

Linking to Other Native File Types

If you're linking to a native file that doesn't have an icon, link to the file and list the file type and size. Use the following format:

  • Name of file (FILETYPE SIZE)

For example:

  • Download the full version of Energy Plus (EXE 3 MB).

File size should be listed in KB, MB, or GB. Round files sized in KB up to the next full number. Round files sized in MB or GB up to the next tenth of a decimal.

Do not include the decimal if it is a whole number. For example, list a file as 3 MB, not 3.0 MB.


Keep native file format documents in a /docs/ sub-directory. PDFs should be placed in your website's /pdfs/ directory.