This is a test page filled with common HTML elements. Its main purpose is to be used to provide visual feedback whilst building CSS systems and frameworks.
The HTML elements are loosely categorized or grouped by function following the references from MDN and WHATWG.
Based on the following works:
Sections
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Section Headings
Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
Heading level 6
<address>: Contact Address
Cupertino, CA
95014, USA
Grouping content
<p>: Paragraph
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.
<hr>: Thematic Break (Horizontal Rule
<pre>: Preformatted Text
maxling it is with a heart heavy that i admit loss of a feline so loved a friend lost to the unknown (night) ~cdr 11dec07
L TE A A C V R A DOU LOU REUSE QUE TU PORTES ET QUI T' ORNE O CI VILISÉ OTE- TU VEUX LA BIEN SI RESPI RER - Apollinaire
___________________________ < I'm an expert in my field. > --------------------------- \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || ||
pre {
display: block;
font-family: monospace;
white-space-collapse: preserve;
text-wrap: nowrap;
margin: 1em 0px;
}
You are in an open field west of a big white house with a boarded front door. There is a small mailbox here. > open mailbox Opening the mailbox reveals: A leaflet. >
<blockquote>: Block Quotation
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.
<ol>: Ordered List
- List Item 1
- List Item 2
- List Item 3
<ul>: Unordered List
- List Item 1
- List Item 2
- List Item 3
<dl>: Description List
- Term 1
- Description/definition for Term 1.
- Term 2
- Description/definition for Term 2.
- Term 3
- Description/definition for Term 3.
<figure>: Figure with Optional Caption
Text-level semantics
<a>: Anchor
This is a text link.
<em>: Emphasis
The em element is used to add emphasis.
<strong>: Strong Importance
The strong element is used to indicate strong importance.
<small>: Side Comment
This text is normal. This text is small; it is used to convey something that has very little prominence, that is not important, but still need to be here.
Fine/small print (copyright and legal text): The content is licensed under a Creative Commons License.
Copyright information: © 2021 Fancy Company
<s>: Strikethrough
This text has a strikethrough.
<cite>: Citation
More information can be found in [ISO-0000].
<q>: Inline Quotation
Jeremy Keith said:
You could open an HTML document from back then in a browser today
.
Antoine de Saint-Exupéry a dit :
On ne voit bien qu’avec le cœur. L’essentiel est invisible pour les yeux
.
<dfn>: Definition
The HTML Definition element (<dfn>) is used to indicate the term being defined within the context of a definition phrase or sentence.
<abbr>: Abbreviation
HTML
<ruby>: Ruby Annotation
<time>: (Date) Time
A date: Unix time began
A complete date:
A relative date:
A time:
A time zone:
A date and time:
<code>: Inline Code
Lorem ipsum <code> sit amet
<var>: Variable
The variable element, such as x = y.
<samp>: Sample Output
Keyboard not found. Press F1 to continue.
<kbd>: Keyboard Input
Keyboard keys: command Cmd ⌘ Shift ⇧ option Alt ⌥ control Ctrl ⌃ Caps Lock ⇪ Fn F1
<sub>: Subscript
Footnotes: Lorem1
Math variables: x1,...,xn
Chemical formulas: H2O
<sup>: Superscript
Exponents: E=mc2
Superior lettering: Lorem ipsum®
Ordinal numbers: 5th
<i>: Idiomatic Text
The i element is text that is offset from the normal text.
<b>: Bring Attention To
The b element is stylistically different text from normal text, without any special importance.
<u>: Unarticulated Annotation (Underline)
The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.
<mark>: Mark Text
The mark element indicates a highlight.
<bdi>: Bidirectional Isolate
اَلأَعْشَى - 1st place
Jerry Cruncher - 2nd place
<bdo>: Bidirectional Text Override
This text will go right to left.
<wbr>: Line Break Opportunity
Edits
<del>, <ins>: Deleted and Inserted Text
This text is deleted and This text is inserted.
Embedded content
<picture>: Picture
<img>: Image Embed
<iframe>: Inline Frame
<object>: External Object
<video>: Video Embed
<audio>: Embed Audio
<map>, <area>: Image Map Area
<math>: MathML
<svg>: Scalable Vector Graphics
Tabular data
<table>: Table
| Purchase | Location | Date | Evaluation | Cost (€) |
|---|---|---|---|---|
| Haircut | Hairdresser | 12/09 | Great idea | 30 |
| Lasagna | Restaurant | 12/09 | Regrets | 18 |
| Shoes | Shoeshop | 13/09 | Big regrets | 65 |
| Toothpaste | Supermarket | 13/09 | Good | 5 |
| SUM | 118 | |||
Forms
<fieldset>, <legend>: Fieldset Set, Legend
<label>: Input Label
<input>: Input (Form Input
<select>: Select
<datalist>: Data List
<textarea>: Textarea
<output>: Output
<progress>: Progress Indicator
<meter>: Meter
Interactive elements
<details>: Details disclosure or Disclosure widget
No summary:
Something small enough to escape casual notice.
With summary:
System Requirements
Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.
System Requirements
Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.