Headers

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading

Paragraphs

Lorem ipsum emphasised text dolor sit amet, strong text consectetur adipisicing elit, abbreviated text sed do eiusmod tempor incididunt ut labore et link text dolore magna aliqua. Ut quoted text enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute deleted text inserted text irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat code text cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Suspendisse rhoncus, est ac sollicitudin viverra, leo orci sagittis massa, sed condimentum acronym text est tortor a lectus. Curabitur porta feugiat ullamcorper. Integer lacinia mi id odio Big Text faucibus eget tincidunt nisl iaculis. Nam adipiscing hendrerit turpis, et porttitor felis sollicitudin et. Donec dictum massa ac neque accumsan tempor. Cras aliquam, ipsum sit amet laoreet hendrerit, purus deleted text sapien convallis dui, et porta leo ipsum ac nunc. Nullam ornare porta dui ac semper. Cras aliquam laoreet hendrerit. Quisque vulputate dolor eget mi porta vel porta nisl pretium. Vivamus non leo magna, quis imperdiet risus. Morbi tempor risus placerat tellus imperdiet fringilla.

This is a blockquote amongst paragraphs.

Extended paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This Lorem Ipsum HTML example is created from the parts of Placeholder Markup with Lorem Ipsum - Jon Tan, Emastic CSS Framework, Tripoli CSS Framework and Baseline CSS Framework.

This has been adapted and modified by Cubicle Ninjas.


Blockquote
& Cite

I am not one who was born in the possession of knowledge; I am one who is fond of antiquity, and earnest in seeking it there.

Confucius, The Confucian Analects, (551 BC - 479 BC)

The cite element has been redefined in HTML5. Where it previously meant “a reference to other sources,” it now means “the title of a work.” Quite often, a cited reference will be the title of a work, such as a book or film, but the source could just as easily be a person. Before HTML5, you could mark up that person's name using cite. Now that's expressly forbidden—so much for backwards compatibility.

HTML5 for Web Designers by Jeremy Keith


Ordered Lists

  1. Unus
  2. Duo
  3. Tres
  4. Quattuor
  1. This list item text is nested within a <span> tag to seperate its styling from the list styling
  2. This list item text is nested within a <p> tag to seperate its styling from the list styling

  3. Use whichever you like - Cras aliquam, ipsum sit amet laoreet hendrerit, purus sapien convallis dui, et porta leo ipsum ac nunc.
    1. List item level 2
    2. List item level 2 - Integer lacinia mi id odio faucibus eget tincidunt nisl iaculis. Nam adipiscing hendrerit turpis. Cras aliquam, ipsum sit amet laoreet hendrerit, purus sapien convallis dui, et porta leo ipsum ac nunc.
      1. List item level 3
      2. List item level 3

Unordered lists

  • Lorem ipsum dolor sit amet
  • Consectetur adipisicing elit
  • Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • Ut enim ad minim veniam
  • This list item text is nested within a <span> tag to seperate its styling from the list styling
  • This list item text is nested within a <p> tag to seperate its styling from the list styling

  • Use whichever you like - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    • List item level 2 - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    • List item level 2
      • List item level 3
      • List item level 3

Pre & Code

REMEMBER: <pre> tags are parsed exactly as they appear in the code, so be mindful with spaces, indents, and returns.
/* <pre> tag only */

body {
  font:0.8125em/1.618 Arial, sans-serif;
  background-color:#fff;
  color:#111;
}
<!-- <pre> & <code> tags -->

<html>
  <head>
  </head>
  <body>
    <div class="main">
      <p>Hello World</p>
    <div>
  </body>
</html>

Definition list

Definition Item
Definition description.
Definition Item
Definition description.
Definition Item
Definition description.
Lorem ipsum dolor sit amet
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Description Item Title 1
Description 1
Description Item Title 2
Description 2
Description 3

Tables

Plain

Table Caption
Table head th Table head td
Table foot th Table foot td
Table body th Table body td
Table body td Table body td
 

Zebra Striped

Jimi Hendrix - albums
Album Year Price
Album Year Price
Are You Experienced 1967 $10.00
Axis: Bold as Love 1967 $12.00
Electric Ladyland 1968 $10.00
Band of Gypsys 1970 $12.00
 

Bordered

# First Name Last Name Language
1 Some One English
2 Joe Sixpack English
3 Stu Dent Code
 

Condensed,
Bordered, &
Zebra Striped

# First Name Last Name Language
# First Name Last Name Language
1 Some One English
2 Joe Sixpack English
3 Stu Dent Code

Various Inline

<a> tag example
<abbr> (abbreviation) tag example
<acronym> tag example
<b> tag example
<big> tag example
<cite> tag example
<code> tag example
<del> (deleted) tag example use with <ins>
<dfn> (definition term) tag example
<em> (emphasize) tag example
<font> tag example with face="verdana" deprecated
<i> (italic) tag example
<ins> (inserted) tag example use with <del>
<kbd> (keyboard text) tag example
<q> tag inside a <q> (quotation) tag example
<s> tag (strikethrough) example
<samp> (sample computer code) tag example
<small> tag example
<span> tag example
<strike> tag example
<strong> tag example
<sub> tag example
<sup> tag example
<tt> (teletype) tag example
<var> (variable) tag example
<u> (underline) tag example


Address

Address: somewhere, World
800 Roosevelt Road,
Glen Ellyn, IL 60137

Form

with Labels and Various Inputs

Protip: wrap the <label> and <input> tags inside a <div> with the class, "clearfix"
Form legend

Title

Markup

Title

Markup

Title

Markup