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

Lorem ipsum

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

Nested in Paragraph

Inline

Test Button Elem Test - .button class Test Button elem in a

Separate

Test Button Elem

Test - .button class

Test Button elem in a

Nested in Div

Inline

Separate

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.

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.

background-color in P

background-color in Div

Word Colors

Hexcolors

RGB(A) Colors

HSL(A) Colors

Definition list

Definition List Title

This is a definition list division.

Ordered Lists

Numerical

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

Alphabetical Uppercase

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

Alphabetical Lowercase

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

Roman Numeral Uppercase

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

Roman Numeral Lowercase

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

Unordered Lists

disc

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

circle

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

square

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

none

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

Ordered List

Unordered List

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

Here is a text link shown.

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 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

There is comment here:

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

No <figure> element

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

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

This page is comprised of my own additions and either partially or heavily modified elements from the following source(s):

• Most elements used are from the following project and it's forks here: https://github.com/cbracco/html5-test-page/blob/master/index.html
• Checkboxes, radio buttons, and switch variants of checkboxes were based on buttons found here: https://codepen.io/aaroniker/pen/ZEYoxEY
• Range inputs were based on work found here: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/