Test HTML

Headings

<h1>This is an h1 Heading</h1>

<h2>This is an h2 Heading</h2>

<h3>This is an h3 Heading</h3>

<h4>This is an h4 Heading</h4>

<h5>This is an h5 Heading</h5>

Paragraph Styles

Optional Lead Paragraph

Example:

Lorem ipsum dolor sit amet, omittam gubergren ea per, eu duis magna ullamcorper vis. Te cum tacimates dissentiunt. Purto nihil vim id, mei phaedrum urbanitas ne, civibus eloquentiam sea an.

HTML: <p class="lead"></p>

Standard Paragraph Style

Example:

Lorem ipsum dolor sit amet, omittam gubergren ea per, eu duis magna ullamcorper vis. Te cum tacimates dissentiunt. Purto nihil vim id, mei phaedrum urbanitas ne, civibus eloquentiam sea an.

HTML: <p></p>

Common Formatting Properties

Example of a standard link: <a href="#"></a>

Example of strong text: <strong></strong>

Example of bold text: <b></b>

Example of emphasized text: <em></em>

A superscript example: <sup></sup>

A subscript example: <sub></sub>

Abbreviation example: HTML: <abbr title=""></abbr>

Example of deleted text: <del></del>

A variable example: <var></var>

A code example: <code></code>

Example of inserted text: <ins></ins>

Sometimes we all need a <br />!

Useful HTML Characters

Character HTML
& &amp;
&rarr;

Horizontal Rule

Example:


HTML:

<hr>

List Types

Ordered List

Example:

  1. List Item 1
  2. List Item 2
    1. Nested list item A
    2. Nested list item B
  3. List Item 3

HTML:

<ol>
<li>List Item 1</li>
<li>List Item 2
<ol>
<li>Nested list item A</li>
<li>Nested list item B</li>
</ol>
</li>
<li>List Item 3</li>
</ol>

Unordered List

Example:

  • List Item 1
  • List Item 2
    • Nested list item A
    • Nested list item B
  • List Item 3

HTML:

<ul>
<li>List Item 1</li>
<li>List Item 2
<ul>
<li>Nested list item A</li>
<li>Nested list item B</li>
</ul>
</li>
<li>List Item 3</li>
</ul>

Preformatted Text / Code Block

Example:

#header h1 a { 
display: block; 
width: 300px; 
height: 80px; 
}

HTML:

<pre>
#header h1 a { 
display: block; 
width: 300px; 
height: 80px; 
}
</pre>

Data Tables

Standard HTML Table

Example:

lorem ipsum dolor
sit amet omittam

HTML:

<table>
<tr>
  <td>lorem</td>
  <td>ipsum</td> 
  <td>dolor</td>
</tr>
<tr>
  <td>sit</td>
  <td>amet</td> 
  <td>omittam</td>
</tr>
</table>

HTML Table .table-condensed

Example:

lorem ipsum dolor
sit amet omittam

HTML:

<table class="table-condensed">
<tr>
  <td>lorem</td>
  <td>ipsum</td> 
  <td>dolor</td>
</tr>
<tr>
  <td>sit</td>
  <td>amet</td> 
  <td>omittam</td>
</tr>
</table>

HTML Table .table-bordered

Example:

lorem ipsum dolor
sit amet omittam

HTML:

<table class="table-bordered">
<tr>
  <td>lorem</td>
  <td>ipsum</td> 
  <td>dolor</td>
</tr>
<tr>
  <td>sit</td>
  <td>amet</td> 
  <td>omittam</td>
</tr>
</table>

HTML Table .table-striped

Example:

lorem ipsum dolor
sit amet omittam

HTML:

<table class="table-striped">
<tr>
  <td>lorem</td>
  <td>ipsum</td> 
  <td>dolor</td>
</tr>
<tr>
  <td>sit</td>
  <td>amet</td> 
  <td>omittam</td>
</tr>
</table>

HTML Table .table-striped & .table-bordered

Example:

lorem ipsum dolor
sit amet omittam

HTML:

	
<table class="table-striped table-bordered">
<tr>
  <td>lorem</td>
  <td>ipsum</td> 
  <td>dolor</td>
</tr>
<tr>
  <td>sit</td>
  <td>amet</td> 
  <td>omittam</td>
</tr>
</table>

Blockquotes

Standard Blockquote

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue.

HTML:

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue.</p></blockquote>

Blockquote with Citation

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac vulputate purus, ut venenatis arcu. Vestibulum sit amet tellus a nunc hendrerit tristique.

HTML:

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac vulputate purus, ut venenatis arcu. Vestibulum sit amet tellus a nunc hendrerit tristique.</p>
<footer>
— <cite><a href="#">Joe Bloggs</a></cite>
</footer>
</blockquote>

Buttons

Small Button

Example:

Small Button

HTML: <a href="#" class="btn btn--size-s">Small Button</a>

Regular Button

Example:

Regular Button

HTML: <a href="#" class="btn">Regular Button</a>

Large Button

Example:

Large Button

HTML: <a href="#" class="btn btn--size-l">Large Button</a>

Small Button 100%

Example:

Small Button 100%

HTML: <a href="#" class="btn btn--size-s btn--full-width">Small Button 100%</a>

Regular Button 100%

Example:

Regular Button 100%

HTML: <a href="#" class="btn btn--full-width">Regular Button 100%</a>

Large Button 100%

Example:

Large Button 100%

HTML: <a href="#" class="btn btn--size-l btn--full-width">Large Button 100%</a>

Alert/Information Boxes

Standard Info Box

Example:

A standard information box.

HTML: <p class="alert">A standard information box.</p>

Red Info Box

Example:

A red information box.

HTML: <p class="alert alert--red">A red information box.</p>

Light Blue Info Box

Example:

A light blue information box.

HTML: <p class="alert alert--blue">A light blue information box.</p>

Inverse Info Box

Example:

A dark information box with white text.

HTML: <p class="alert alert--inverse">A dark information box with white text.</p>

Embedded Media Examples

YouTube

Vimeo

SlideShare

Audio

Polls

[polldaddy poll=8409766]

Images

Post Featured Image (660x220px)

av_thumb

Standard Full-Width Image (660px)

full_width

Standard Image with Caption (600px)

A Standard Image
Standard Image with Caption

Left-Aligned Image: alignleft

Tation vituperata ne vel, vim ad quidam adipiscing. Qui ut etiam decore. Et falli ornatus oporteat nec, deserunt voluptaria reprehendunt mea eu. Scripta copiosae deserunt ne pro, no fastidii deleniti phaedrum vix.

300_width

Quis facer voluptua ei has, suas ponderum et nam, mea nihil praesent salutandi ut. Ea soluta neglegentur eum, esse salutatus complectitur nec eu, utroque commune in vis. Ne pro nihil timeam vituperatoribus, putent consequat interesset eos an. Omittam referrentur ut mea, nulla debitis et duo, qui id tale sint. Ut eam dicant deleniti laboramus. Vitae tacimates ea sit.

Pri feugait reprehendunt eu, te soluta corpora sit. In habeo eligendi sed, debet legendos ut eum. Pro at vocent antiopam delicatissimi, eam meis mollis verear ea. Pri fierent moderatius adversarium at, per vide iriure imperdiet no, his fugit doctus tamquam an. Ius summo errem suavitate ei, utroque menandri te has. Est mutat errem solet an, tritani graecis probatus id his.

Right-Aligned Image: alignright

Tation vituperata ne vel, vim ad quidam adipiscing. Qui ut etiam decore. Et falli ornatus oporteat nec, deserunt voluptaria reprehendunt mea eu. Scripta copiosae deserunt ne pro, no fastidii deleniti phaedrum vix.

300_width

Quis facer voluptua ei has, suas ponderum et nam, mea nihil praesent salutandi ut. Ea soluta neglegentur eum, esse salutatus complectitur nec eu, utroque commune in vis. Ne pro nihil timeam vituperatoribus, putent consequat interesset eos an. Omittam referrentur ut mea, nulla debitis et duo, qui id tale sint. Ut eam dicant deleniti laboramus. Vitae tacimates ea sit.

Pri feugait reprehendunt eu, te soluta corpora sit. In habeo eligendi sed, debet legendos ut eum. Pro at vocent antiopam delicatissimi, eam meis mollis verear ea. Pri fierent moderatius adversarium at, per vide iriure imperdiet no, his fugit doctus tamquam an. Ius summo errem suavitate ei, utroque menandri te has. Est mutat errem solet an, tritani graecis probatus id his.

Left-Aligned Image With Caption: alignleft

Tation vituperata ne vel, vim ad quidam adipiscing. Qui ut etiam decore. Et falli ornatus oporteat nec, deserunt voluptaria reprehendunt mea eu. Scripta copiosae deserunt ne pro, no fastidii deleniti phaedrum vix.

Right-Aligned Image
Left-Aligned Image

Quis facer voluptua ei has, suas ponderum et nam, mea nihil praesent salutandi ut. Ea soluta neglegentur eum, esse salutatus complectitur nec eu, utroque commune in vis. Ne pro nihil timeam vituperatoribus, putent consequat interesset eos an. Omittam referrentur ut mea, nulla debitis et duo, qui id tale sint. Ut eam dicant deleniti laboramus. Vitae tacimates ea sit.

Pri feugait reprehendunt eu, te soluta corpora sit. In habeo eligendi sed, debet legendos ut eum. Pro at vocent antiopam delicatissimi, eam meis mollis verear ea. Pri fierent moderatius adversarium at, per vide iriure imperdiet no, his fugit doctus tamquam an. Ius summo errem suavitate ei, utroque menandri te has. Est mutat errem solet an, tritani graecis probatus id his.

Right-Aligned Image With Caption: alignright

Tation vituperata ne vel, vim ad quidam adipiscing. Qui ut etiam decore. Et falli ornatus oporteat nec, deserunt voluptaria reprehendunt mea eu. Scripta copiosae deserunt ne pro, no fastidii deleniti phaedrum vix.

Right-Aligned Image
Right-Aligned Image

Quis facer voluptua ei has, suas ponderum et nam, mea nihil praesent salutandi ut. Ea soluta neglegentur eum, esse salutatus complectitur nec eu, utroque commune in vis. Ne pro nihil timeam vituperatoribus, putent consequat interesset eos an. Omittam referrentur ut mea, nulla debitis et duo, qui id tale sint. Ut eam dicant deleniti laboramus. Vitae tacimates ea sit.

Pri feugait reprehendunt eu, te soluta corpora sit. In habeo eligendi sed, debet legendos ut eum. Pro at vocent antiopam delicatissimi, eam meis mollis verear ea. Pri fierent moderatius adversarium at, per vide iriure imperdiet no, his fugit doctus tamquam an. Ius summo errem suavitate ei, utroque menandri te has. Est mutat errem solet an, tritani graecis probatus id his.


Jeepers, can’t believe you just read all that! 😉