National Library of Medicine - Main Web Site - Coding Instructions

Printable pdf version of these requirements.

XHTML <head> tag elements
1. Style Sheets
2. Scripts
XHTML <body> tag elements

Examples

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:
```

```
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: All scripts 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.
```
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=nationallibraryofmedicine"></script> 
```
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.

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">
Each section of the header is broken up into two sections.
The left side <div id="header-left">
The right side <div class="search-under">

Header Left

Requirement Note: The “Header Left” body tag element is required.

HTML Markup:

<div id="header-sub">
	<div id="header-left"> 
		<a href="http://www.nlm.nih.gov">
		<img height="51" width="50" class="logo" alt="National Library of Medicine" src="http://www.nlm.nih.gov/images/nlm-logo-white.png" />	
		</a>

		<div class="slug">
		<div class="slug-title"><a href="http://www.nlm.nih.gov">U.S. National Library of Medicine</a></div>
		<div class="slug-int"><a href="http://www.nih.gov">National Institutes of Health</a></div>
	</div>
</div>

Search Under

Requirement Note: The “Search Under” body tag element is required.

HTML Markup:

<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 style="text-decoration: none;" class="addthis_button_compact" href="http://www.addthis.com/bookmark.php?v=250&amp;username=nationallibraryofmedicine">
	<img height="16" border="0" class="social-home-item" title="Add This" alt="Add This" src="http://www.nlm.nih.gov/images/addthis.png" /></a>
	<!-- AddThis Button END -->
	
	<a href="/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>

 <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>

<div class="clearer"></div> 
</div>

Dropdown Navigation body tag element

Requirement Note: The “Dropdown Navigation” body tag element is required.
The dropdown navigation is generated by an XML file and javascript. The XML file is http://www.nlm.nih.gov/sitenav.xml. Everything is inside #nav.
Since the Dropdown Navigation is created on the fly, it's very important that you have the noscript section.
Note: The text “The World’s Largest Medical Library” is controlled by the child div <div id="wlml">
The <div class="clearer"> </div> is important to allow the code after this section to format properly.

HTML Markup:

<div id="nav">
	<!--Open Nav-->
<div id="nojs">
	<noscript>
	<ul id="no-script-nav">
		<li><a href="/noscript-nav.html">Site Navigation</a></li>
	</ul>
  </noscript>
</div>

<!--Open drop-->
	<ul class="topnav">
		<li>></li>
	</ul>
<!--Close drop-->
	<div id="wlml">The World's Largest Medical Library</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).

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.

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.

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.

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="/sitemap.html">Site Map</a>, 
	<a href="/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> 11 January 2011<br />
	<strong>Last updated:</strong> 11 January 2011<br />
	<strong>First published:</strong>  21 April 2004<br />
</p>
</div>

National Library of Medicine - Main Web Site - Coding Instructions

Related Pages