HHS Home > Web Communications & New Media > Tools & Resources > Code Library

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 Explicit Labels
HTML Forms using Tables for Layout
HTML Form Inputs Using the Title Attribute

Skip Navigation

The following html code need to be placed on very beginning of an html page and the skip link must be the first link in the page.

<div id="skipmenu">
<a href="#skip" class="skippy">Skip Navigation</a>
<a name="top"></a>
</div>

The following is the corresponded css code for skip navigation. It must be placed inside style block on the header or in the css style file. This is just an example which is used on hhs.gov. It must be modified to match up the site theme.

div#skipmenu{
position:relative;
}
div#skipmenu a.skippy{
position:absolute;
top: -1000px;
left:-1000px;
height: 1px;
width: 1px;
overflow:hidden;
}

div#skipmenu a.skippy:active, div#skipmenu a.skippy:focus, div#skipmenu a.skippy:hover{
position: absolute;
top:auto;
left:auto;
width:100%;
height: 1em;
width: auto;
font-size:1em;
font-weight:bold;
width:100%;
padding-bottom:15px;
color: black;
z-index:100;
text-align:right;
margin-bottom:25px;
}

Last, put this anchor at the start of the content - <a name="skip" tabindex="-1"></a>

HHS Banner 1

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

Code for header:

HHS Banner 2

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

Code for header:

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

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%, ..

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>

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>

HTML Form Inputs Using the Title Attribute

In some cases, it is visually impractical to use a form label. When fields have no visual labels the title attribute provides information about the fields. Assistive technology looks for the <label> element, but if it isn't provided, they will read the title attribute.

<input type="text" name="num2" title="Enter your 3 digit phone exchange" />
<input type="text" name="num3" title="Enter the last 4 digits of your phone number" />