Best Practices

The FAA's best practices follow coding standards curated by the FAA Web Management Team. In addition to our in-house standards, we require compliance with the following:

Valid, semantic markup according to the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
Conformance with the W3C's Web Content Accessibility Guidelines (WCAG 2.0, Level AA), according to DOT's Policy On Information Technology Accessibility, and reiterated in federal law.
Conformance with the accessibility guidelines of the Section 508 Amendment to the Rehabilitation Act of 1973 (Section 508), according to federal law.

Conforming to these standards helps to ensure that your content will appear as intended within the template and will be accessible to as many users as possible — both now and in the future.

Basic Rules of HTML

Use tags according to their intended purpose (Semantic HTML)
Close tags that can be closed
Enclose attribute values in double quotes
Nest tags properly and use indentation
Encode ampersands (&)
Validate your code with a markup validation service such as validator.w3.org or validator.nu

Terminology key, with terms used in place of actual code

<tag attribute="value">text content</tag>

Code example

<div class="figure">
	<p>Text <b>Bold text</b> <em>Emphasized text</em></p>
	<img alt="hoot owl" class="border left" src="assets/img/my_pet_owl.jpg" width="133" height="100">
</div>

Proper Usage

HTML tags exist for specific reasons, and most carry semantic meanings.

Using <blockquote> to indent content that isnâ€™t a quote is improper usage. <blockquote> is a tag meant to encapsulate lengthy content from a quoted source.
Using <table> to lay out page content is improper usage. <table> is a tag meant to display tabular data (for example, data that would fit well in the cells of a Microsoft Excel spreadsheet)

Closing Tags

The closing half of some tags is optional in HTML5. Still, we recommend that you close all of these tags. This applies to <p>, <li>, <td>, and others. If a tag encapsulates other HTML tags or text, it should be closed.

This is not the case for some tags that are self-closing (also called "void" elements) These tags do not encapsulate content or modify other HTML elements and are considered stand-alone. Tags of this nature include <img>, <br>, <hr>, and <input>, among others.

Quoting Values

All attribute values in HTML should be between double quotes. According to the official HTML5 document type definition, quoting certain values remains optional. However, not quoting values is a very bad practice, is considered sloppy, and may introduce hard-to-diagnose errors.

Nesting

"Nesting" is the term used for placing tags within other tags.

Incorrect nesting

<p>I love <b><em>owls</b></em>.</p>

Correct nesting

<p>I love <b><em>owls</em></b>.</p>

In the first example, the tags incorrectly overlap one another. Tags must be closed in the reverse order that they’re opened. Code indenting will help you keep track of nesting levels and will increase your code's readability.

Encoding Ampersands

Ampersands that are not part of HTML character entity references (e.g.: ", …, ℜ, etc) should be coded as "&" and should NOT appear as "&". This rule even applies to ampersands appearing within the href attribute of anchor tags, the src attribute of image tags, and the href attribute of link tags. Ampersands that are used in JavaScript as a logical operator or in ColdFusion as a concatenation operator are not encoded.