HTML

The minimum amount of HTML that a content developer must know to produce accessible content.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
            

Inline text

This is a normal.

This is emphasized.

This is strong.

This is underlined.

This is struck.

This is small.

This is a short quote.

This is an abbr.

This is a link.


<p>This is a normal.</p>
<p>This is <em>emphasized</em>.</p>
<p>This is <strong>strong</strong>.</p>
<p>This is <u>underlined</u>.</p>
<p>This is <s>struck</s>.</p>
<p>This is <small>small</small.></p>
<p>This is a short <q>quote</q>.</p>
<p>This is an <abbr title="Abbreviation">abbr</abbr>.</p>
<p>This is a <a href="#">link.</a></p>
            

Blockquotes

This is a blockquote

Someone Famous

<blockquote>
  <p>This is a blockquote</p>
  <footer><cite>Someone Famous</cite></footer>
</blockquote>
            

Ordered lists

  1. This is a list item
  2. This is a list item
  3. This is a list item
    1. This is a list item
    2. This is a list item
    3. This is a list item
    4. This is a list item
  4. This is a list item

<ol>
  <li>This is a list item</li>
  <li>This is a list item</li>
  <li>This is a list item
    <ol>
      <li>This is a list item</li>
      <li>This is a list item</li>
      <li>This is a list item</li>
      <li>This is a list item</li>
    </ol>
  </li>
  <li>This is a list item</li>
</ol>
            

Unordered lists

  • This is a list item
  • This is a list item
  • This is a list item
    • This is a list item
    • This is a list item
    • This is a list item
    • This is a list item
  • This is a list item

<ul>
  <li>This is a list item</li>
  <li>This is a list item</li>
  <li>This is a list item
    <ul>
      <li>This is a list item</li>
      <li>This is a list item</li>
      <li>This is a list item</li>
      <li>This is a list item</li>
    </ul>
  </li>
  <li>This is a list item</li>
</ul>
            

Unstyled lists

  • This is a list item
  • This is a list item
  • This is a list item
    • This is a list item
    • This is a list item
    • This is a list item
    • This is a list item
  • This is a list item

<ul class="unstyled">
  <li>This is a list item</li>
  <li>This is a list item</li>
  <li>This is a list item
    <ul>
      <li>This is a list item</li>
      <li>This is a list item</li>
      <li>This is a list item</li>
      <li>This is a list item</li>
    </ul>
  </li>
  <li>This is a list item</li>
</ul>
            

Definition lists

This is a question?
This is an answer.
This is a term.
This is that term's definition.

<dl>
  <dt>This is a question?</dt>
  <dd>This is an answer.</dd>
  <dt>This is a <dfn>term</dfn>.</dt>
  <dd>This is that term's definition.</dd>
</dl>
            

Images

This Image appears inline

This image appears Full width image

This image appears Right floating image

This image appears Centered image

This image appears Left floating image


<p>
  This <img src="//placehold.it/100x100?text=Image" title="Image" alt="Image"> appears inline
</p>
<p>
  This image appears
  <img class="full-width" src="//placehold.it/480x100?text=Full+width" title="Full width image" alt="Full width image">
</p>
<p>
  This image appears
  <img class="float-sol" src="//placehold.it/100x100?text=Left" title="Right floating image" alt="Right floating image">
</p>
<p class="clearfix">
  This image appears
  <img class="center" src="//placehold.it/100x100?text=Center" title="Centered image" alt="Centered image">
</p>
<p>
  This image appears
  <img class="float-eol" src="//placehold.it/100x100?text=Right" title="Left floating image" alt="Left floating image">
</p>
            

Videos


<div class="embed-16x9">
  <iframe class="embed" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
            

Columns

We intentionally separate visual elements from content elements in websites. Columns are considered visual elements and should not be created or edited without consulting a website developer or website styleguide.

Tables

We intentionally excluded tables from this guide because they are not appropriate for many common use cases. Please consult a website developer before using a table.

Components (Infoboxes, notices, popups...)

We intentionally excluded components from this guide because they are considered visual elements and should not be created or modified without consulting a website developer or a website styleguide.