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

Contents

Text

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs

Treasure Island


SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having asked me to write down the whole particulars about Treasure Island, from the beginning to the end, keeping nothing back but the bearings of the island, and that only because there is still treasure not yet lifted, I take up my pen in the year of grace 17 and go back to the time when my father kept the Admiral Benbow inn and the brown old seaman with the sabre cut first took up his lodging under our roof.

I remember him as if it were yesterday, as he came plodding to the inn door, his sea-chest following behind him in a hand-barrow—a tall, strong, heavy, nut-brown man, his tarry pigtail falling over the shoulder of his soiled blue coat, his hands ragged and scarred, with black, broken nails, and the sabre cut across one cheek, a dirty, livid white. I remember him looking round the cover and whistling to himself as he did so, and then breaking out in that old sea-song that he sang so often afterwards:

"Fifteen men on the dead man's chest—
Yo-ho-ho, and a bottle of rum!"

in the high, old tottering voice that seemed to have been tuned and broken at the capstan bars. Then he rapped on the door with a bit of stick like a handspike that he carried, and when my father appeared, called roughly for a glass of rum. This, when it was brought to him, he drank slowly, like a connoisseur, lingering on the taste and still looking about him at the cliffs and up at our signboard.

"This is a handy cove," says he at length; "and a pleasant sittyated grog-shop. Much company, mate?"

My father told him no, very little company, the more was the pity.

"Well, then," said he, "this is the berth for me. Here you, matey," he cried to the man who trundled the barrow; "bring up alongside and help up my chest. I'll stay here a bit," he continued. "I'm a plain man; rum and bacon and eggs is what I want, and that head up there for to watch ships off. What you mought call me? You mought call me captain. Oh, I see what you're at—there"; and he threw down three or four gold pieces on the threshold. "You can tell me when I've worked through that," says he, looking as fierce as a commander.

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.

Anonymous

Lists

Definition list

definition list dt
definition list dd
definition list dt
definition list dd
Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit

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

Tabular data

Table Caption
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4 Table Footer 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

Syntax

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

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

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

Embedded content

Images

No <figure> element

Image alt text

Image alt text Image with .align-left class so that it floats to the left with suitable spacing between adjacent content.

It will limit to a maximum of 50% of the content column on medium-up screens so nearby text isn't squashed.

Image alt text Image with .align-right class so that it floats to the right with suitable spacing between adjacent content.

It will limit to a maximum of 50% of the content column on medium-up screens so nearby text isn't squashed.

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.
Image alt text
Here is a caption for this image.

Figure with .align-left class so that it floats to the left with suitable spacing between adjacent content.

It will limit to a maximum of 50% of the content column on medium-up screens so nearby text isn't squashed.

Image alt text
Here is a caption for this image.

Figure with .align-right class so that it floats to the right with suitable spacing between adjacent content.

It will limit to a maximum of 50% of the content column on medium-up screens so nearby text isn't squashed.

Form elements

The WYSIWYG editor strips form elements so these examples are only for reference not functional testing or representation of CMS capability.

Text fields

Text Input *

Password

Web Address

Email Address

Search

Number Input *

Textarea

Error

Valid

[Top]

Select menus

Select Option OneOption TwoOption Three

[Top]

Checkboxes
  • Choice A
  • Choice B
  • Choice C

[Top]

Radio buttons
  • Option 1
  • Option 2
  • Option 3

[Top]

HTML5 inputs

Color input

Number input

Range input

Date input

Month input

Week input

Datetime input

Datetime-local input

[Top]

Action buttons

Button

[Top]