Basics

Anything not listed here falls into another section or is pulled from the latest version of normalize.css.

Contents

Headings

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<h6>Heading Six</h6>

Paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, ducimus, vel, consequatur doloribus magni sit provident hic facilis saepe harum labore minima ex natus alias dignissimos sed eveniet ratione ut.

This text is 11px because it's wrapped in a small tag.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, ducimus, vel, consequatur doloribus magni sit provident hic facilis saepe harum labore minima ex natus alias dignissimos sed eveniet ratione ut.</p>
<p><small>This text is 11px because it's wrapped in a small tag.</small></p>

<a href="#">Link text</a>

Lists

Unordered list

  • This is a bullet list
  • With two bullets
<ul>
  <li>This is a bullet list</li>
  <li>With two bullets</li>
</ul>

Unstyled

  • This is a bullet list
  • With two bullets
<ul class="list-unstyled">
  <li>This is a bullet list</li>
  <li>With two bullets</li>
</ul>

Ordered list

  1. This is a bullet list
  2. With two bullets
<ol>
  <li>This is a bullet list</li>
  <li>With two bullets</li>
</ol>

Unstyled

  1. This is a bullet list
  2. With two bullets
<ol class="list-unstyled">
  <li>This is a bullet list</li>
  <li>With two bullets</li>
</ol>

Description List

This is a description list
Here's a description
Here's another description
<dl>
  <dt>This is a description list</dt>
  <dd>Here's a description</dd>
  <dd>Here's another description</dd>
</dl>

Blockquotes

Be sure to put the source in a <small> tag and wrap the name of the source in a <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous Source Title
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

Code

Inline snippets should be wrapped in <code> and multi-line snippets should be wrapped in <pre>.

This is a line of code
<code>This is a line of code</code>

Abbreviations

Whenever using an acronym or abbreviated term/phrase, an <abbr title="full title"> tag should be used.

ASPCA
<abbr title="American Society for the Prevention of Cruelty to Animals">ASPCA</abbr>

Address

Used to show the address of a customer

Help Scout
131 Tremont Street 3rd Floor
Boston, MA 02111-1338
P: (855) 435-7726
help@helpscout.net
<address>
  <strong>Help Scout</strong><br>
  131 Tremont Street 3rd Floor<br>
  Boston, MA 02111-1338<br>
  <abbr title="Phone">P:</abbr> (855) 435-7726<br>
  <a href="mailto:#">help@helpscout.net</a>
</address>