## Headings

# Heading Level 1

## Heading Level 2

### Heading Level 3

#### Heading Level 4

##### Heading Level 5

###### Heading Level 6

### HTML

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

## Subheadings

# Subheading Level 1

## Subheading Level 2

### Subheading Level 3

#### Subheading Level 4

##### Subheading Level 5

###### Subheading Level 6

### HTML

                        <h1 class="subheading">Subheading Level 1</h1>
    <h2 class="subheading">Subheading Level 2</h2>
    <h3 class="subheading">Subheading Level 3</h3>
    <h4 class="subheading">Subheading Level 4</h4>
    <h5 class="subheading">Subheading Level 5</h5>
    <h6 class="subheading">Subheading Level 6</h6>

## Headings With Links

# Heading 1 with link

## Heading 2 with link

### Heading 3 with link

#### Heading 4 with link

##### Heading 5 with link

###### Heading 6 with link

### HTML

                        <h1><a href="#">Heading 1 with link</a></h1>
    <h2><a href="#">Heading 2 with link</a></h2>
    <h3><a href="#">Heading 3 with link</a></h3>
    <h4><a href="#">Heading 4 with link</a></h4>
    <h5><a href="#">Heading 5 with link</a></h5>
    <h6><a href="#">Heading 6 with link</a></h6>

## Paragraph

So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.

### HTML

                        <p>So, setting about it as methodically as men might smoke out a wasps&#39; nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.</p>

## Blockquote

> A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

### HTML

                        <blockquote>
    	<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.</p>
    </blockquote>

## Inline Elements

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript®

Subscript for things like H2O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: `Cmd`

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

`This is what inline code looks like.`

`This is sample output from a computer program`

The variable element, such as x = y

### HTML

                        <div class="text">
    	<p><a href="#">This is a text link</a></p>

    	<p><strong>Strong is used to indicate strong importance</strong></p>

    	<p><em>This text has added emphasis</em></p>

    	<p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>

    	<p>The <i>i element</i> is text that is set off from the normal text</p>

    	<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>

    	<p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>

    	<p><s>This text has a strikethrough</s></p>

    	<p>Superscript<sup>®</sup></p>

    	<p>Subscript for things like H<sub>2</sub>O</p>

    	<p><small>This small text is small for for fine print, etc.</small></p>

    	<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>

    	<p>Keybord input: <kbd>Cmd</kbd></p>

    	<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>

    	<p><cite>This is a citation</cite></p>

    	<p>The <dfn>dfn element</dfn> indicates a definition.</p>

    	<p>The <mark>mark element</mark> indicates a highlight</p>

    	<p><code>This is what inline code looks like.</code></p>

    	<p><samp>This is sample output from a computer program</samp></p>

    	<p>The <var>variable element</var>, such as <var>x</var> = <var>y</var></p>
    </div><!--end .text-->

## Time

2 weeks ago

### HTML

                        <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time>

## Preformatted Text

    P R E F O R M A T T E D T E X T
    ! " # $ % & ' ( ) * + , - . /
    0 1 2 3 4 5 6 7 8 9 : ; < = > ?
    @ A B C D E F G H I J K L M N O
    P Q R S T U V W X Y Z [ \ ] ^ _
    ` a b c d e f g h i j k l m n o
    p q r s t u v w x y z { | } ~

### HTML

                        <pre>
    P R E F O R M A T T E D T E X T
    ! " # $ % &amp; ' ( ) * + , - . /
    0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
    @ A B C D E F G H I J K L M N O
    P Q R S T U V W X Y Z [ \ ] ^ _
    ` a b c d e f g h i j k l m n o
    p q r s t u v w x y z { | } ~
    </pre>

## Emphasis Colors

This is what error text looks like

This is what valid text looks like

This is what warning text looks like

This is what information text looks like.

### HTML

                        <p class="error">This is what error text looks like</p>
    <p class="valid">This is what valid text looks like</p>
    <p class="warning">This is what warning text looks like</p>
    <p class="information">This is what information text looks like.</p>

## Hr

### HTML

                        <hr />

## Caption

A caption can be applied to an image, quote, form field, etc.

### HTML

                        <p class="caption">A caption can be applied to an image, quote, form field, etc.</p>