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>
The minimum amount of HTML that a content developer must know to produce accessible content.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
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>
This is a blockquote
<blockquote>
<p>This is a blockquote</p>
<footer><cite>Someone Famous</cite></footer>
</blockquote>
<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>
<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>
<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>
<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>
This appears inline
This image appears
This image appears
This image appears
This image appears
<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>
<div class="embed-16x9">
<iframe class="embed" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
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.
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.
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.