Code Library

Topics on this page

• Skip Navigation
• Header 1
• Header 2
• HTML Image Element With Null Alternative Text Attribute
• HTML Image Element With Alternative Text Attribute
• HTML Image Element With Alternative Text and Long Description Attributes
• HTML Forms with Defined Tab Order and Explicit Labels
• HTML Forms with Explicit Labels
• HTML Forms using Tables for Layout

Skip Navigation

<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

   topbannerlogo.gif
   topbannermiddle.gif
   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 2

Full-size image

   headbar_left.gif
   headbar_middle.gif
   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