Block Elements

Paragraphs and Images

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Blockquote

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

“This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.”

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Figure-Caption

Details-Summary

The summary element example

The details example text. It may be styled differently based on what browser or operating system you are using.

---

Text Elements

The a element and external a element. External Link. Opens in new window. examples

The abbr element and an abbr element with title examples

The ACRONYM element example

The b element example

The cite element example

The code element example

The data element example

The del element example

The dfn element and dfn element with title examples

The em element example

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The s element example

The samp element example

The small element example

The span element example

The strong element example

The _{sub element} example

The ^{sup element} example

The time element example

The u element example

The var element example

Don’t Steal Our Slogan^™
Company Name_®

Don’t Steal Our Slogan^™
Company Name_®

---

Monospace / Preformatted

Code block wrapped in “pre” and “code” tags

// Loop through Divs using Javascript.
var divs = document.querySelectorAll('div'), i;

for (i = 0; i < divs.length; ++i) {
divs[i].style.color = "green";
}

Monospace Text wrapped in “pre” tags

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

---

List Types

Ordered List

1. List Item 1
2. List Item 2
3. List Item 3
   1. List Item 3.1
   2. List Item 3.2
      1. List Item 3.2.1
      2. List Item 3.2.2
   3. List Item 3.3
4. List Item 4

Unordered List

• List Item 1
• List Item 2
• List Item 3
  • List Item 3.1
  • List Item 3.2
    • List Item 3.2.1
    • List Item 3.2.2
  • List Item 3.3
• List Item 4

Definition List

Definition Term 1

Definition Description 1

Definition Term 2

Definition Description 2

---

Basic Table

This is a table caption

Balance	Interest Rate	APY	Min. Deposit
$0.01 – $9,999	0.03%	0.03%	$5,000
$10,000 – $24,999	0.03%	0.03%	$5,000
$25,000 – $49,999	0.03%	0.03%	$5,000
A row with a cell spanning all 4 columns

---

Table with a (Table) Footer

Balance	Interest Rate	APY	Min. Deposit
As of 2013	As of 2013	As of 2013	As of 2013
$0.01 – $9,999	0.03%	0.03%	$5,000
$10,000 – $24,999	0.03%	0.03%	$5,000
$25,000 – $49,999	0.03%	0.03%	$5,000

---

Table with borders

Balance	Interest Rate	APY	Min. Deposit
$0.01 – $9,999	0.03%	0.03%	$5,000
$10,000 – $24,999	0.03%	0.03%	$5,000
$25,000 – $49,999	0.03%	0.03%	$5,000

---

Table with Striped Backgrounds

Balance	Interest Rate	APY	Min. Deposit
$0.01 – $9,999	0.03%	0.03%	$5,000
$10,000 – $24,999	0.03%	0.03%	$5,000
$25,000 – $49,999	0.03%	0.03%	$5,000

---

Table on a dark background

---

Media

The Audio Element:

Your browser does not support the audio element.

The Video Element:

Your browser does not support the video tag.

Embedded content:

YouTube video (iframe):

---

Form Elements

The Fieldset:

Legend

The Form:

Text Field:
Disabled Text Field:
Readonly Text Field:
Text Area:
Disabled Text Area:
I’m disabledReadonly Text Area:
I’m readonly

Select Element:

Option 1Option 2

Option 1Option 2Disabled Option

Disabled Select Element:
Unselectable OptionThis option should not even be seen

Radio Buttons:
Radio 1
Radio 2
Radio 3
Radio Disabled

Checkboxes:
Checkbox 1
Checkbox 2
Checkbox 3
Checkbox Disabled

Password:

File Input:

HTML5-specific Form Elements

Email:

URL:

Telephone:

Number:

Search:

Date:

Time:

Color:

Datalist:

Range:

Output:
42

Progress:

Meter:
350 degrees

Button Element

Button

Button w/Arrow

Anchor Inline Button

Ghost Button

Ghost Button w/Arrow