Skip Navigation

Code Library

E-mail subscriptions envelope

Topics on this page


<p style="font-size: 0px;margin:0px 0px;padding: 0px 0px;position: absolute;z-index: -2;"><a href="#skipnav" style="color:white;">Skip Navigation</a></p>

Put this anchor at the start of the content - <a name="skipnav"></a>

back to top


HHS Banner 1
Full-size Image

Banner left   topbannerlogo.gif
banner middle   topbannermiddle.gif
banner right   topbannerright.gif

Code for header:

<table border="0" cellpadding="0" cellspacing="0" summary="This table is used for layout purpose" class="topheader" width="100%">
<tr>
<td><a href="http://www.hhs.gov"><img src="/images/topbannerlogo.gif" width="157" alt="HHS.gov" border="0" /></a></td>
<td width="100%"><a href="http://www.hhs.gov"><img src="/images/topbannermiddle.gif" width="100%" border="0" height="37" alt="HHS.gov" /></a></td>
<td><a href="http://www.hhs.gov"><img src="/images/topbannerright.gif" border="0" alt="HHS.gov" /></a></td>
</tr>
</table>

back to top


HHS Banner
Full-size image

Banner left   headbar_left.gif
Banner middle   headbar_middle.gif
Banner right   headbar_right.gif

Code for header:

<table border="0" cellpadding="0" cellspacing="0" summary="This table is used for layout purpose" class="topheader" width="100%">
<tr>
<td><a href="http://www.hhs.gov"><img src="/images/headbar_left.gif" width="157" alt="HHS.gov" border="0" /></a></td>
<td width="100%"><a href="http://www.hhs.gov"><img src="/images/headbar_middle.gif" width="100%" border="0" height="37" alt="HHS.gov" /></a></td>
<td><a href="http://www.hhs.gov"><img src="/images/headbar_right.gif" border="0" alt="HHS.gov" /></a></td>
</tr>
</table>

back to top


HTML Image Element With Null Alternative Text Attribute

<IMG src="spacer.gif" alt=""> 

back to top


HTML Image Element With Alternative Text Attribute

<IMG src="magnifyingglass.gif" alt="Icon indicating search function">

back to top


HTML Image Element With Alternative Text and Long Description Attributes

<IMG src="97sales.gif" alt="Sales for 1997" longdesc="sales97.html">

In sales97.html file:

Chart showing how sales in 1997 progressed. The chart is a bar-chart showing percentage increased sales by month. Sales in January were up 10% from December 1996, sales in February dropped 3%, ..

back to top


HTML Forms with Defined Tab Order and Explicit Labels

HTML form tab order may defined through the use of the ”tabindex” attribute. The use of “tabindex” is strongly encouraged.

Example using Explicit Labels and the Tabindex attribute:

<form>
<table>
<tr>
<td><b><label for="first"> FIRST NAME:</label> </b></td>
<td><input type="text" name="FIRSTNAME" id="first"  tabindex=1></td>
</tr>
<tr>
<td><b><label for="last"> LAST NAME:</label> </b></td>
<td><input type="text" name="LASTNAME" id="last" tabindex=2></td>
</tr>
</table>
<p>
<input type="SUBMIT" value="SUBMIT" tabindex=3>
</form>

back to top


HTML Forms with Explicit Labels

Explicit labels include the “for” attribute in the “Label” element and the “Id” attribute in the “Input” element.

Example using Explicit Labels:

<form>
<table>
<tr>
<td><b><label for="first"> FIRST NAME:</label> </b></td>
<td><input type="text" name="FIRSTNAME" id="first" ></td>
</tr>
<tr>
<td><b><label for="last"> LAST NAME:</label> </b></td>
<td><input type="text" name="LASTNAME" id="last" ></td>
</tr>
</table>
<p>
<input type="SUBMIT" value="SUBMIT">
</form>

back to top


HTML Forms using Tables for Layout

When using tables for form layout, both the title and the form field must be in the same table cell.

<table width="600" border="0">
  <tr>
    <td >First Name
          <input type="text" name="FirstName"  /></td>
    <td >Last Name  
      <input type="text" name="LastName"  /></td>
  </tr>
  <tr>
        <td colspan="2"><input type="submit"  value="Submit" />
      <input type="reset"  value="Reset" /></td>
    </tr>
 </table>

back to top