Skip to page content

Semantic HTML is the use of elements according to their intended purposes. Examples: only tabular data should be used with <table> markup, only a long quotation should go within a <blockquote> tag, and only emphasized and strongly emphasized text should go within <em> and <strong> tags, respectively. Using elements semantically enables browsers, search engines, and screen readers to understand what the content is and how to handle it. Additionally, it helps make code self-documenting and understandable to others.

Code example

<abbr>FAA<abbr>
<abbr title="Fleet Air Arm">FAA<abbr>

Anchor (<a>) (see Link)

<blockquote> is used for long quotations — usually two or more lines. <blockquote> is the block-level equivalent of <q>. Text within the <blockquote> element should be enclosed by one or more <p> elements.

Related elements: <q> and <cite>

Code example

<blockquote>
	<p>These are the times that try men's souls …</p>
</blockquote>

The <b> element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

The <code> element represents a fragment of computer code.

The <dfn> element represents the defining instance of a term. The paragraph, description list group, or section that is the nearest ancestor of the <dfn> element must also contain the definition(s) for the term given by the <dfn> element.

The <del> element represents a removal from the document. Related: <ins>

The <em> element represents stress emphasis of its contents.

Form

These elements represent headings for their sections.

These elements have a rank given by the number in their name. The <h1> element is said to have the highest rank, the <h6> element has the lowest rank, and two elements with the same name have equal rank.

Tips

  • The <h1> element is reserved for the page title and subtitle (See: Developer Toolkit: Template Variables: Page). Use of an <h1> anywhere else in the document will result in the page being displayed in Legacy Mode (See: Developer Toolkit: Legacy Mode)
  • Subheadings that appear above lists of links are indeed headings, and should be marked up as such. Do not style headings with <p><strong> or <p><b> as these are not semantically correct. Use <h2> or <h3> instead.
  • Refrain from inserting a colon (:) character after the heading text; it's redundant as its meaning is intrinsic to the heading itself.

The <hr> element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.

Code example

<hr>
<hr class="heavy">

Image

The <ins> element represents an addition to the document. Related: <del>

The <i> element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

The <kbd> element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands).

<br> represents a line break. <br> is recommended only for certain circumstances, such as forcing line breaks in <address> elements and in lines of poetry. <br> must not be used to separate paragraphs, create lists, or provide separation in form elements.

The <br> element is what is called an entity element — meaning that it does not encapsulate content and there is no </br> closing tag.

A link connects the current page with another page or file. <a> is typically used to create links using its href attribute. New in HTML5, <a> now accepts certain block-level child elements, and certain inline child elements are still permitted. <a> accepts the following attributes:

  • href (required) — specifies the URI.
  • data-rel (optional) — when data-rel="gov", links to non-federal goverment sites will bypass our disclaimer message.

The name attribute for the a element has been deprecated — do not create an empty anchor (such as <a name="anchor"><a>), but rather use an id on an existing element. For example: <h2 id="aircraft">Aircraft</h2>

Do not use <a> when linking to documents such as PDF, MS Word, MS Excel, MS PowerPoint, etc. Instead, use our documentViewer UDF. See more linking guidelines.

Code example

<a href="regulations_policies/faa_regulations/"><abbr>FAA</abbr> regulations</a>

<a href="/regulations_policies/faa_regulations/"><abbr>FAA</abbr> regulations</a>

<a href="../regulations_policies/faa_regulations/"><abbr>FAA</abbr> regulations</a>

<a href="https://e2.gov.cwtsatotravel.com/" data-rel="gov">E2 Solutions</a>

See <a href="#aircraft">Aircraft section</a>

Link-specific classes

Link-specific classes
Class Name Class Description
anchorDown Adds a downward-pointing arrow before the link to indicate that the link points to a page section below it.
anchorUp Adds an upward-pointing arrow before the link to indicate that the link points to a page section above it.

List

The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader's attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity.

The <pre> element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.

The <q> element represents some phrasing content quoted from another source.

The <samp> element represents sample or quoted output from another program or computing system.

The <small> element represents side comments such as small print.

The <s> element represents contents that are no longer accurate or no longer relevant.

The <strong> element represents strong importance, seriousness, or urgency for its contents.

Table

The <u> element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelled.

In most cases, another element is likely to be more appropriate: for marking stress emphasis, the <em> element should be used; for marking key words or phrases either the <b> element or the <mark> element should be used, depending on the context; for marking book titles, the <cite> element should be used; for labeling text with explicit textual annotations, the <ruby> element should be used; for labeling ship names in Western texts, the <i> element should be used.

The <var> element represents a variable. This could be an actual variable in a mathematical expression or programming context, an identifier representing a constant, a symbol identifying a physical quantity, a function parameter, or just be a term used as a placeholder in prose.

Page last modified: February 14, 2023 5:58:28 PM EST