This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.

Accordions

[widgetkit id=”4″]

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

[Top]

Paragraphs

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

[Top]

Blockquotes

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.

It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.

Said no one, ever.

[Top]

Lists

Definition list

Definition List TitleThis is a definition list division.

Ordered List

1. List Item 1
2. List Item 2
3. List Item 3

Unordered List

• List Item 1
• List Item 2
• List Item 3

[Top]

Horizontal rules

---

[Top]

Tabular data

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5

[Top]

Code

Keyboard input: Cmd

Inline code: <div>code</div>

Sample output: This is sample output from a computer program.

Pre-formatted 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 { | } ~ 

[Top]

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 offset 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 H₂O.

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

Abbreviation: HTML

This text is a short inline quotation.

This is a citation.

The dfn element indicates a definition.

The mark element indicates a highlight.

The variable element, such as x = y.

The time element: 2 weeks ago

[Top]

HTML Comments

There is comment here:

There is a comment spanning multiple tags and lines below here.

[Top]

Embedded content

Images

No <figure> element

Wrapped in a <figure> element, no <figcaption>

Wrapped in a <figure> element, with a <figcaption>

[Top]

Audio

[Top]

Video

[Top]

Canvas

[Top]

Meter

[Top]

Progress

[Top]

Inline SVG

[Top]

IFrame

[Top]

Form elements

Input fields

Text Input 

Password 

Web Address 

Email Address 

Phone Number 

Search 

Number Input 

Error 

Valid 

[Top]Select menus

Select                                         Option One                     Option Two                     Option Three                                    

[Top]Checkboxes

•  Choice A
•  Choice B
•  Choice C

[Top]Radio buttons

•  Option 1
•  Option 2
•  Option 3

[Top]Textareas

Textarea 

[Top]HTML5 inputs

Color input 

Number input 

Range input 

Date input 

Month input 

Week input 

Datetime input 

Datetime-local input 

[Top]Action buttons

<button type=submit> <button type=button> <button type=reset> <button disabled>

[Top]

Made by @cbracco. Code on GitHub.