Style Guide

• Overview
• Web Writing
• File Formats
• Markup
• CSS
• Patterns

General Markup Guidelines

Browser requirements

ED.gov serves a broad range of visitors. You need to do everything you can to allow users without the latest technology to get and use your content. In particular, do not create pages that will only work with a single browser.

For templated pages on ED.gov, standard HTML will be readable in all current browsers. If you're using particularly complex markup, you'll want to view the page in several browsers before posting. We recommend checking in Internet Explorer, Chrome, Firefox, and Safari. It's okay if the page doesn't appear identical in all browsers; what's important is that the content is visible and can be used correctly.

For other types of content, you should still write for the widest range of browsers possible. Some interactive applications can't accommodate older browsers. For these, you may limit your support to newer browsers, as long as you say which browsers are supported. At a minumum, you must support Internet Explorer 8+, Safari 5.1+, and current versions of Firefox and Chrome. You should also do cross-platform checks (including mobile devices) as appropriate.

Good HTML

It's important to use sound HTML on Department web pages; there are certain features of the design that can be broken by bad markup. If you're new to HTML, WebPlatform.org has some helpful HTML tutorials.

Here are some general rules for HTML on ED.gov:

1. Close all tags.
   Commonly unclosed tags include <p> and <li>. Use a <p> to start a paragraph, and </p> to end the paragraph. Use <li> to start a list item, and </li> to end the list item.

   Examples [HTML]:
   <p> Paragraph text </p>
   <li> List item </li>

2. Close tags in the order they were opened.
   Tags should be nested inside one another, instead of overlapping.

   Example [HTML]:
   The tags <li> <p> <strong> should be closed by </strong> </p> </li>

3. Do not use font tags.
   There are sitewide style sheets that are used to format pages. Font tags can interfere with the proper display of the styles in these style sheets, and should not be used. See the section on Cascading Style Sheets and text formatting for information on using the style sheets to format your text.

4. Validate.
   All HTML should be run through HTML validation software. Different validators will return different error results, but the point of validation is to correct obvious mistakes, such as missing tags or broken tables and lists.

   Examples of validators:

   1. The W3C Markup Validation Service, available at http://validator.w3.org/
   2. Free HTML & CSS Validation Service, available at http://www.onlinewebcheck.com
   3. "Validate Markup" menu item in Dreamweaver

   For more information about validation, and some additional validation tools, please see the HTML validation guide on Webplatform.org.

Tables

Bootstrap provides classes to style tables in a standard way. Use the classes, and then you don't need to add cellpadding, cellspacing, and border values on your tables. The basic "table" class creates tables that look like this:

<table class="table">
<tr><th>First</th><th>Second</th><th>Third</th></tr>
<tr><td>Washington</td><td>Toledo</td><td>Chicago</td></tr>
<tr><td>DC</td><td>Ohio</td><td>Illinois</td></tr>
</table>

Bootstrap provides a number of other table styling options that you can use. If you have a wide table, you should use the responsive table class, which lets the table scroll horizontally within the page on smartphones.

<div class="table-responsive">
<table class="table table-bordered">
<tbody>
<tr>
<th scope="col">Program</th>
<th scope="col">Category Code</th>
<th scope="col">2001 Appropriation</th>
<th scope="col">2002 Appropriation</th>
<th scope="col">2002 Proposed Supplemental</th>
<th scope="col">2003 President's Request</th>
<th scope="col">President's Request Compared to 2002 Appropriation</th>
</tr>
<tr>
<th scope="row">Basic grants</th>
<td>D </td>
<td>7,397,690</td>
<td>7,172,971 </td>
<td>none </td>
<td>7,175,901</td>
<td>0.0% </td>
</tr>
 <tr>
<th scope="row">Concentration grants</th>
<td>D </td>
<td>1,365,031</td>
<td>1,365,031 </td>
<td>none </td>
<td>1,365,031 </td>
<td>0.0% </td>
</tr>
 <tr>
<th scope="row">Targeted grants</th>
<td>D </td>
<td>0 </td>
<td>1,018,499 </td>
<td>none </td>
<td>2,018,499 </td>
<td>98.2% </td>
</tr>
 <tr>
<th scope="row">Incentive grants</th>
<td>D </td>
<td>0</td>
<td>793,499</td>
<td>none</td>
<td>793,499</td>
<td>0.0%</td>
</tr>
</tbody>
</table>
</div>

Accessibility

For table accessibility, be sure to

• Put column and row labels in <th> tags;
• Use the simplest structure possible: Avoid "rowspan" and "colspan";
• Don't leave any empty table cells: Use "none" or "TBD" or "N/A" instead.

See the WebAIM guide "Creating Accessible Tables" for more help.

Images

Include the following attributes in image tags:

<img src="relative path" width="value" height="value" alt="helpful alt tag">

Images that are over 320 pixels wide will scroll horizontally on the smallest devices. For those images, you can replace the width and height attributes with the "img-responsive" class attribute from Bootstrap. This class scales the image to fit the space it's in. Or you can use a small thumbnail version of the image in the text, and then link to the larger version.

Examples

<img src="/images/ed-gov-hat.png" width="75" 
height="75" alt="US Department of Education">

<img src="http://sites.ed.gov/progress/files/2014/05/teacher-2.jpg" 
class="img-responsive" alt="As part of its “Expanding Great Options” initiative, 
Baltimore City Public Schools has employed a holistic parent engagement strategy 
to turn around struggling schools. One principal built relationships with 
parents and students by shaking hands before and after school each day. Teachers 
sent out flyers, knocked on doors, and made phone calls to parents to discuss 
their children’s performance." >

<a href="http://blog.ed.gov/wp-content/uploads/2014/06/TEP-with-students.jpg">
<img src="http://blog.ed.gov/wp-content/uploads/2014/06/TEP-with-students-150x150.jpg" 
width="150" height="150" alt="Secretary Tom Perez visits the Sarah E. Goode STEM Academy in Chicago" ></a>

Standard icons

There are certain standard icons to be used on the site. The table below lists these icons, and shows the standard HTML used for each icon. Note that the design has only one download icon; this should be used for any type of downloadable document (Word, PDF, Excel, etc.).

Icon	Use	HTML
Previous	Marks a link to the previous page or group of pages.	<a href="#"><span class="glyphicon glyphicon-chevron-left text-primary"></span> Previous</a>
Next	Marks a link to the next page or group of pages.	<a href="#">Next <span class="glyphicon glyphicon-chevron-right text-primary"></span></a>
Top	Link to top of page or to table of contents.	<a href="#"><span class="glyphicon glyphicon-chevron-up text-primary"></span> Top</a>
	Marks downloadable files, e.g., Word, PDF, Excel; should be placed before the download link or links.	<span class="glyphicon glyphicon-file text-primary"></span>
	Marks audio files such as .wav, mp3, RealAudio; should be placed before the link or links.	<span class="glyphicon glyphicon-volume-up text-primary"></span>
	Marks video files hosted on other sites, such as YouTube, Vimeo, or webinar hosting sites; should be placed before the link or links.	<span class="glyphicon glyphicon-film text-primary"></span>
	Marks language assistance or non-English language materials.	<img src="/images/languageicon.gif" alt="language assistance">
Disclaimer	Marks a link to a disclaimer, either the general ED disclaimer at http://www.ed.gov/notices/disclaimer/ or a page-specific disclaimer. (See the ED.gov Management and Publishing Policies for disclaimer requirements.)	<span class="label label-tertiary">Disclaimer</span>
New	Marks a new item. Shouldn't be left on page for more than a month.	<span class="label label-tertiary">New</span>

Last Modified: 1/3/2018