Text Elements & Groupings

Basic styling for commonly (and uncommonly) used text elements

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Small Text
Code <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Paragraph</p>
<small>Small Text</small>

Standard Text Elements

This is a paragraph tag

- p element
Emphasized Text
- em element
Important Text
- strong element
Definition Term
- dfn element
Marked Text
- mark element
Variable
- var element
Abbr
- abbr element
Hyperlink
- a element
Bolded Text
- b element
Insert
- ins element
Underline
- u element
Normal subscript
- sub element
Normal superscript
- sup element
Quote
- q element
Citation
- cite element
Text to be deleted
- del element
Text in an alternate voice
- i element

Blockquote

A call out quote of some sort

code

Computer Code

samp

Sample Output

kbd

Keyboard Input

Address

Address: somewhere, world
Code <p>This is a paragraph tag</p>
<em>Emphasized Text</em>
<strong>Important Text</strong>
<dfn title="title attr">Definition Term</dfn>
<mark>Marked Text</mark>
<var>Variable</var>
<abbr title="title attr">Abbr</abbr>
<a href="#!" title="title attr">Hyperlink</a>
<b>Bolded Text</b>
Code <ins>Insert</ins></dt>
<u>Underline</u>
<sub>subscript</sub>
<sup>superscript</sup>
<q>Quote</q>
<cite>Citation</cite>
<del>Text to be deleted</del>
<i>Text in an alternate voice</i>
Code <blockquote>A call out quote of some sort</blockquote>
<code>Computer Code</code>
<samp>Sample Output</samp>
<kbd>Keyboard Input</kbd>
<address>Address: somewhere, world</address>

Lists

Ordered List

  1. list item 1
    1. list item 2
      1. list item 3
    2. list item 2
  2. list item 1

Unordered List

  • list item 1
    • list item 2
      • list item 3
    • list item 2
  • list item 1

Description List

Description name
Description value
Description name
Description value
Description name
Description value
Code <ol>
  <li>list item 1</li>
    <ol>
      <li>list item 2</li>
        <ol>
          <li>list item 3</li>
        </ol>
      </li>
      <li>list item 2</li>
    </ol>
  </li>
  <li>list item 1</li>
</ol>
Code <ul>
  <li>list item 1</li>
    <ul>
      <li>list item 2</li>
        <ul>
          <li>list item 3</li>
        </ul>
      </li>
      <li>list item 2</li>
    </ul>
  </li>
  <li>list item 1</li>
</ul>
Code <dl>
  <dt>Description name</dt>
    <dd>Description value</dd>
  <dt>Description name</dt>
    <dd>Description value</dd>
  <dt>Description name</dt>
    <dd>Description value</dd>
</dl>