Skip Navigation Bar

National Library of Medicine - Main Web Site - Coding Instructions

Printable pdf version of these requirements.

  1. XHTML <head> tag elements
    1. Style Sheets
    2. Scripts
  2. XHTML  <body> tag elements
    1. Overall body tag elements including page width
    2. The Standard NLM Header body tag element
    3. The Navigation body tag element
    4. "main-body" body tag element
      1. Divisional Branding Bar
        1. Standard Empty NLM Divisional Branding Bar
        2. Divisional Branding Bar Color Schemes
          1. Divisional Branding Bar - Example HMD
        3. Divisional Branding Bar - Navigation
      2. Breadcrumb Bar
      3. Body content
      4. Footer

XHTML head elements

Style Sheets

  • About the Style Sheets
    • The National Library of Medicine (NLM) header requires the use of three stylesheets (reset.css, master.css, and ie.css)
    • The print.css style sheet is recommended.
    • Links to all the Styles except for print.css are required.
  • reset.css
    • Requirements Note: reset.css is required.
    • A CSS Main Reset to help with consistent view across browsers.
    • reset.css should be linked to using the following html code:
      <link href="http://www.nlm.nih.gov/styles/reset.css" rel="stylesheet" type="text/css" media="all" />
  • master.css
    • Requirements Note: main.css is required.
    • The main styles for the entire site.
    • main.css should be linked to using the following html code:
      <link href="http://www.nlm.nih.gov/styles/master.css" rel="stylesheet" type="text/css" media="screen" />
  • ie.css
    • Requirements Note: ie.css is required.
    • An IE8 and below stylesheet, that fixes some display issues.
    • ie.css should be linked to using the following html code:
      <!--[if lte IE 8]>
      <link href="http://www.nlm.nih.gov/styles/ie.css" rel="stylesheet" media="screen">
      <![endif]-->
  • print.css
    • Requirement Note: print.css is recommended.
    • Style used when a page is printed. NLM Header and background colors are not printed.
    • Side bars are moved to the bottom of the page
    • print.css should be linked to using the following html code:
      <link rel="stylesheet" href="http://www.nlm.nih.gov/styles/print.css" type="text/css" media="print" />

Scripts

  • Requirement Note: The scripts below are required.
    • These scripts should be linked to so that the drop-down menu works correctly.
    • The scripts also enable the display of rounded page corners in IE8 and below.
      <script type="text/javascript" src="http://www.nlm.nih.gov/scripts/jquery-min.js"></script>

      <!--[if lte IE 8]>
      <script type="text/javascript" src="http://www.nlm.nih.gov/scripts/PIE.js"></script>
      <![endif]-->

      <script type="text/javascript" src="http://www.nlm.nih.gov/scripts/masterfull.js"></script>
    • These scripts should be linked so the "add this" button works correctly.
      • NOTE: The "addthis_widget.js" script can also be placed right before the ending "body" tag. Placing the script in this location will increase page performance.
      <script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>

      <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#username=nationallibraryofmedicine"></script>

    • These scripts are needed for the NLM customer satisfaction survey.
      <!--DO NOT REMOVE!! NLM survey script - contact wwwnlm@nlm.nih.gov with questions -->
      <script src="http://www.nlm.nih.gov/share/scripts/survey.js" type="text/javascript" language="javascript"></script>
  • Requirement Note: The scripts below are optional
    • These scripts are used to gather more reliable page usage statistics.
    • NOTE: The SmartSource Data Collector TAG scripts may be placed before the last body tag to increase page performance.
       <!-- START OF SmartSource Data Collector TAG -->
      <!-- Copyright (c) 1996-2010 WebTrends Inc. All rights reserved. -->
      <!-- Version: 9.3.0 -->
      <!-- Tag Builder Version: 3.1 -->
      <!-- Created: 12/14/2010 4:50:39 PM -->
      <script src="http://www.nlm.nih.gov/scripts/webtrends.js" type="text/javascript"></script>
      <!-- =================================================================================== -->
      <!-- Warning: The two script blocks below must remain inline. Moving them to an external -->
      <!-- JavaScript include file can cause serious problems with cross-domain tracking. -->
      <!-- =================================================================================== -->
      <script type="text/javascript">
      
      //<![CDATA[ 
      
      var _tag=new WebTrends();
      _tag.dcsGetId();
      
      //]]> 
      
      </script>
      <script type="text/javascript">
      
      //<![CDATA[ 
      
      _tag.dcsCustom=function(){
      // Add custom parameters here.
      //_tag.DCSext.param_name=param_value;
      _tag.DCSext.dcsid=_tag.dcsid;
      }
      _tag.trackAllEvents=true;
      _tag.dcsCollect();
      
      //]]> 
      
      </script>
      <noscript>
      <div><img alt="DCSIMG" id="DCSIMG" width="1" height="1" src="http://wtsdc.nlm.nih.gov/dcs58q90x1jarh82x3ay50066_8v6r/njs.gif?dcsuri=/nojavascript&amp;WT.js=No&amp;WT.tv=9.3.0&amp;WT.dcssip=www.nlm.nih.gov"/></div>
      </noscript>
      <!-- END OF SmartSource Data Collector TAG -->
       

XHTML <body> tag elements

  • Requirements Note: The <body> tag is required.

Overall body tag elements including page width

  • Requirement Note: One set of page width div tags is required.
  • Note: everything on the page resides inside one of these two options.
    • Fluid width option. Inside the body tag, add the following code:
      <div id="wrapper-fluid">
      <div id="container-fluid">
    • Fixed width option. Inside the body tag, add the following code:
      <div id="wrapper">
      <div id="container">

The Standard NLM Header body tag element

  • Requirement Note: The “NLM Header” body tag element is required.
  • The entire header resides in its own div called <div id="header-sub">
  • The header body tag element is broken up into two sections.
    • The left side begins with  <div id="header-left">
    • The right side begins with <form id="searchForm"
      Top of NLM standard header.
  • HTML Markup:
    <!--Open Header-->
     <div id="header-sub">
       <div id="header-left"> 
          <a href="http://www.nlm.nih.gov">
             <img width="110" height="91" src="http://www.nlm.nih.gov/images/NIH2x.png" alt="National Institutes of Health" class="logo"></a>
             
          <a href="http://www.nlm.nih.gov">
             <img width="310" height="91" src="http://www.nlm.nih.gov/images/NLM2x.png" alt="National Library of Medicine" class="logo"></a>
             
          <img width="210" height="91" src="http://www.nlm.nih.gov/images/NLM_Starburst2x.png" alt="" class="logo">
       </div>
    
    <form method="get" action="http://vsearch.nlm.nih.gov/vivisimo/cgi-bin/query-meta" target="_self" name="searchForm" id="searchForm"> 
        <label for="search" class="hidden">Search</label>
         <input type="text" name="query" value="Search" class="search-input" id="search"/>
        <input type="hidden" name="v:project" value="nlm-main-website" />
    </form>
      
      <div class="clearer"></div> 
     </div>
    <!--End header-->

The Navigation body tag element

  • Requirement Note: All components of the “Navigation ” body tag elements are required.
  • The Navigation components resides in the div called <div id="nav">
  • Since the Dropdown Navigation is created on the fly, it's very important that you have the noscript section.
  • The Navigation body tag element is broken up into three sections.
    • The "no script" section which begins with <div id="nojs"
    • The "dropdown navigation" section which begins with <ul class="topnav">
    • The "search under" section which begins with <div class="search-under"> and itself contains:
      • The "Contact Us" section which begins with <p class="contact-us">
      • The "Social Home" section which begins with <div class="social-home">
  • The <div class="clearer"> </div> is important to allow the code after this section to format properly.
    The Navigation body tag element.
  • The HTML Markup
    <div id="nav">
    <!--Open Nav-->
    <div id="nojs">
    <noscript>
    <ul id="no-script-nav">
    <li><a href="http://www.nlm.nih.gov/noscript-nav.html">Site Navigation</a></li>
    </ul> </noscript>
    </div>

    <!--Open drop-->
    <ul class="topnav">
    <li></li>
    </ul>
    <!--Close drop-->
    <div class="search-under">
    <p class="contact-us"><a href="http://apps.nlm.nih.gov/mainweb/siebel/nlm/index.cfm">Contact NLM</a></p>

    <div class="social-home">
    <!-- AddThis Button BEGIN --> <a href="http://www.addthis.com/bookmark.php?v=300&amp;title=National%20Library%20of%20Medicine" class="at300bs at15nc at15t_compact addthisNLM" target="_blank"> <img src="http://www.nlm.nih.gov/images/addthis.png" height="16" border="0" alt="Add This" title="Add This" class="social-home-item"/> </a>
    <!-- AddThis Button END -->

    <a href="http://www.nlm.nih.gov/listserv/rss_podcasts.html">
    <img height="16" class="social-home-item" alt="RSS Icon" src="http://www.nlm.nih.gov/images/rss-social.png" />
    </a>
    <a href="http://twitter.com/nlm_news">
    <img height="16" class="social-home-item" alt="Twitter Icon" src="http://www.nlm.nih.gov/images/twitter-social.png" />
    </a>
    <a href="http://www.facebook.com/nationallibraryofmedicine">
    <img height="16" class="social-home-item" alt="Facebook Icon" src="http://www.nlm.nih.gov/images/facebook-social.png" />
    </a> </div>
    </div>
    </div> <div class="clearer"></div> <!--Close Nav-->

"main-body" body tag element

  • Requirement Note: The “main-body” body tag element is required.
  • All the HTML markup from this point until the end of the page is contained in:
     <div id="main-body" class="nlm-blue"> 
  • There are different classes for different color schemes

Divisional Branding Bar

  • Requirement Note: The “Divisional Branding Bar” body tag element is required.
    • You must use either the Standard Empty NLM Divisional Branding Bar or a specific Divisional Branding Bar.
  • The Divisional Branding bar is placed between <div id="barbranding"> and it's associated closing </div> tag.
  • Note: The Divisional Branding bar should be on every page. Empty or not
Standard Empty NLM Divisional Branding Bar
  • Requirement Note: The Standard Empty NLM Divisional Branding Bar is only required if a specific Divisional Branding Bar is not used. (See specific Divisional Branding Bar instructions below).
    Standard Empty NLM Divisional Branding Bar
  • HTML Markup:
    <div id="barbranding"></div>
Divisional Branding Bar Color Schemes
  • Requirement Note: The Divisional Branding Bar is required if the Standard Empty NLM Divisional Branding Bar is not used.
  • There are a number of different colors for the Divisional Branding Bar.
  • The color is controlled by adding a class to #main-body which opens prior to #barbranding.
  • Divisional Branding color class options are, .nlm-blue (default), .hmd-red, .gold, .dpPurple, .ltPurple, .navy, .green, .gray, .grape, .deepPurple, .orange, .teal, .white, .brown, .black, .goldenrod
  • HMD HTML Markup example:
    <div id="main-body" class="hmd-red">
Divisional Branding Bar - Example HMD
  • Requirement Note: The Divisional Branding Bar is required if the Standard Empty NLM Divisional Branding Bar is not used.
    HMD Divisional Branding Bar
  • HTML Markup:
    <!--Start Branding Bar-->
    <div id="barbranding">
    <h3>History of Medicine</h3>
    <div class="breadcrumb-brand">
    <p>
    <a href="/hmd/index.html" title="History of Medicine Home"><strong>History Home</strong></a> |
    <a href="/hmd/about/index.html" title="About HMD"><strong>About Us</strong></a> |
    <a href="/hmd/about/visitus.html" title="Visit HMD"><strong>Visit Us</strong></a> |
    <a href="/hmd/about/contactus.html" title="Contact HMD"><strong>Contact Us</strong></a> |
    <a href="/hmd/happening/tours.html" title="HMD Tours"><strong>Tours</strong></a> |
    <a href="/hmd/about/faqs/index.html" title="Frequently Asked Questions"><strong>FAQs</strong></a> |
    <a href="/hmd/help/reference/copyright.html" title="Copyright"><strong>Copyright</strong></a> |
    <a href="/hmd/sitemap/index.html" title="History of Medicine Site Map"><strong>HMD Site Map</strong></a>
    </p>
    </div>
    </div>

Divisional Branding Bar - Navigation
  • Requirement Note: The “Divisional Branding Bar – Navigation” is required in this format if Division-wide links are needed.
    • This component should be used consistently across all pages used by the Divisional Branding Bar.
    • Note: Navigation elements are separated by a “|” (pipe) character.
  • The navigation component of the Divisional Branding bar is placed between <div class="breadcrumb-brand"> and it's associated closing </div> tag.
    HMD Divisional Branding Bar
  • HTML Markup:
    <div class="breadcrumb-brand">
    <p>br /> <a href="/hmd/index.html" title="History of Medicine Home"><strong>History Home</strong></a> | href="/hmd/about/visitus.html" title="Visit HMD"><strong>Visit Us</strong></a> |
    <a href="/hmd/about/contactus.html" title="Contact HMD"><strong>Contact Us</strong></a> |br /> <a href="/hmd/happening/tours.html" title="HMD Tours"><strong>Tours</strong></a> |
    <a href="/hmd/about/faqs/index.html" title="Frequently Asked Questions"><strong>FAQs</strong></a> |
    <a href="/hmd/help/reference/copyright.html" title="Copyright"><strong>Copyright</strong></a> |
    <a href="/hmd/sitemap/index.html" title="History of Medicine Site Map"><strong>HMD Site Map</strong></a>
    </p>
    </div>


Breadcrumb Bar

  • Requirement Note: The “Breadcrumb Bar is required in this format if breadcrumbs are used on the page.
    • Breadcrumb use is strongly encouraged for usabilty.
    • Note: Navigation elements are separated by a “>” (greater than) character
    • Using breadcrumbs to refer to current page is optional.
    • Recommendation – Breadcrumb on current page. 
      • If a “crumb” is to be used for the current page it is recommended not to make the “crumb” hyperlinked. 
      • By excluding the link, the style of the “crumb” will use the emphasis style as defined in the master.css  
  • Breadcrumbs are placed between <div id= "breadcrumb-div"> and it's associated closing </div> tag. Image of bread crumb bar.
  • HTML Markup:
    <div id="breadcrumb-div">
    <p><a title="NLM Home" href="/">Home</a>;
    </div>


Body content

  •  Requirement Note: The “Body Content” div tags are required.
    • In order for body elements to display properly, elements must be in a semantic tag (e.g. <p>, <th>, <table>, <ul>, etc.
    • Elements must not be in just a container tag - e.g. <div> text </div>
  • After the closing breadcrumbs </div> tag, place your content between <div id= "body"> and it's associated closing </div> tag.
  • HTML Markup:
    <div id="body">
    <!--Your information goes here-->br /><div class="clearer"></div>
    </div>

Footer

  • Requirement Note: The left and center footer elements are required.
    • Use the “Footer Review” section to best indicate the currency of the content.
    • Some types of content will require all of the date fields. Other types of content will not require any of the date fields.
    • If in doubt, please ask for guidance using the Contact NLM form. In the Subject field of the form, use the term “Question Regarding Main Web Site - Coding Instructions.”
  • The standard footer can be seen at the bottom of this page.
  • It is made up of 3 parts
    • Footer Info (left side)
    • Footer USA (middle section)
    • Footer Review (right side)
  • HTML Markup:
    <div id="footer-sub">
    <p id="footer-info">
    <a href="http://www.nlm.nih.gov/copyright.html">Copyright</a>,
    <a href="http://www.nlm.nih.gov/privacy.html">Privacy</a>,
    <a href="http://www.nlm.nih.gov/accessibility.html">Accessibility</a>,
    <a href="http://www.nlm.nih.gov/sitemap.html">Site Map</a>,
    <a href="http://www.nlm.nih.gov/plugins.html">Viewers and Players</a>

    <br />
    U.S. National Library of Medicine, 8600 Rockville Pike, Bethesda, MD 20894
    <br />
    <a href="http://www.nih.gov/">National Institutes of Health</a>,
    <a href="http://www.hhs.gov/">Health &amp; Human Services</a>
    <br />
    <a href="http://www.nih.gov/icd/od/foia/index.htm">Freedom of Information Act</a>,
    <a href="http://apps.nlm.nih.gov/mainweb/siebel/nlm/index.cfm">Contact Us</a></p>

    <div id="footer-usa">
    <a href="http://www.usa.gov/">
    <img height="30" width="109" alt="USA.gov logo" src="http://www.nlm.nih.gov/images/usagov_logo.gif" />
    </a>
    </div>
    <p id="footer-review">
    <strong>Last reviewed:</strong> 22 November 2013<br />
    <strong>Last updated:</strong> 22 November 2013<br />
    <strong>First published:</strong> 21 April 2004<br />/></div>

Examples