diff --git a/index.html b/index.html index fe5dce4..73b65d4 100644 --- a/index.html +++ b/index.html @@ -1,489 +1,489 @@ - - - HTML5 Test Page + + + HTML5 Test Page -
-
-

HTML5 Test Page

-

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

-
+
+
+

HTML5 Test Page

+

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

+
- +
-
-
-

Text

+ + -
-
-

Headings

-
+
+

Horizontal rules

-
-

Heading 1

-

Heading 2

-

Heading 3

-

Heading 4

-
Heading 5
-
Heading 6
-
+
+
+
- -
+ +
-
-

Paragraphs

+
+

Tabular data

-
-

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.

-
+ + + + + + + + + + + - - + + + + + + + + + -
-

Blockquotes

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table Caption
Table Heading 1Table Heading 2Table Heading 3Table Heading 4Table Heading 5
Table Footer 1Table Footer 2Table Footer 3Table Footer 4Table Footer 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
-
-
-

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

Code

-
-

Lists

+
+

Keyboard input: Cmd

+

Inline code: <div>code</div>

+

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

-
-

Definition list

-
-
Definition List Title
-
This is a definition list division.
-
+

Pre-formatted text

-

Ordered List

-
    -
  1. List Item 1
    2. -
  2. List Item 2
    3. -
  3. List Item 3
    4. -
- -

Unordered List

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

Horizontal rules

- -
-
-
- - -
- -
-

Tabular data

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

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

-
+
- - + + -
-

Inline elements

+
+

Inline elements

-
-

This is a text link.

+
+

This is a text link.

-

Strong is used to indicate strong importance.

+

Strong is used to indicate strong importance.

-

This text has added emphasis.

+

This text has added emphasis.

-

The b element is stylistically different text from normal text, without any special importance.

+

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

+

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 is deleted and This text is inserted.

-

This text has a strikethrough.

+

This text has a strikethrough.

-

Superscript®.

+

Superscript®.

-

Subscript for things like H2O.

+

Subscript for things like H2O.

-

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

+

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

-

Abbreviation: HTML

+

Abbreviation: HTML

-

This text is a short inline quotation.

+

This text is a short inline quotation.

-

This is a citation. +

This is a citation. -

The dfn element indicates a definition.

+

The dfn element indicates a definition.

-

The mark element indicates a highlight.

+

The mark element indicates a highlight.

-

The variable element, such as x = y.

+

The variable element, such as x = y.

-

The time element:

-
+

The time element:

+
- -
- + +
+ -
-

Embedded content

+
+

Embedded content

-
-

Images

-
-

No <figure> element

-

Image alt text

-

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

-
Image alt text
-

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

-
- Image alt text -
Here is a caption for this image.
-
-
- -
+
+

Images

+
+

No <figure> element

+

Image alt text

+

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

+
Image alt text
+

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

+
+ Image alt text +
Here is a caption for this image.
+
+
+ +
-
-

Audio

-
- -
+
+

Audio

+
+ +
-
-

Video

-
- -
+
+

Video

+
+ +
-
-

Canvas

-
canvas
- -
+
+

Canvas

+
canvas
+ +
-
-

Meter

-
2 out of 10
- -
+
+

Meter

+
2 out of 10
+ +
-
-

Progress

-
progress
- -
+
+

Progress

+
progress
+ +
-
-

Inline SVG

-
- -
+
+

Inline SVG

+
+ +
- -
+
+

IFrame

+
+ +
+
-
-

Form elements

+
+

Form elements

-
-
- Input fields + +
+ Input fields -

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-
+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+
-

[Top]

+

[Top]

-
- Select menus +
+ Select menus -

- - -

-
+

+ + +

+
-

[Top]

+

[Top]

-
- Checkboxes +
+ Checkboxes -
    -
    • -
    • -
    • -
-
+
    +
    • +
    • +
    • +
+
-

[Top]

+

[Top]

-
- Radio buttons +
+ Radio buttons -
    -
    • -
    • -
    • -
-
+
    +
    • +
    • +
    • +
+
-

[Top]

+

[Top]

-
- Textareas +
+ Textareas -

- - -

-
+

+ + +

+
-

[Top]

+

[Top]

-
- HTML5 inputs +
+ HTML5 inputs -

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-
+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+
-

[Top]

+

[Top]

-
- Action buttons +
+ Action buttons -

- - - - -

-
+

+ + + + +

+
-

[Top]

-
-
- +

[Top]

+ +
+ - - + +