HTML elements
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
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
- List Item 1
- List Item 2
- List Item 3
Unordered List
- List Item 1
- List Item 2
- List Item 3
Horizontal rules
Tabular data
| 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
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 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 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>
Wrapped in a <figure> element, with a <figcaption>
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.
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 Input *
Password
Web Address
Email Address
Search
Number Input *
Textarea
Error
Valid
Select menusSelect Option OneOption TwoOption Three
Checkboxes Radio buttons HTML5 inputsColor input
Number input
Range input
Date input
Month input
Week input
Datetime input
Datetime-local input
Action buttonsButton