HTML elements test page

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:


<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

Infinite Loop,
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


it is with a          heart

that i admit loss of a feline
        so           loved

a friend lost to the

~cdr 11dec07
  L          TE
    A       A
      C    V
       R A
      QUE TU
    ET QUI T'
     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

  1. List Item 1
  2. List Item 2
  3. 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

A photo of a dog.
Here is a caption for this image.

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


<ruby>: Ruby Annotation

( Kan )( ji )

<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

I was trying to boot my computer, but I got this hilarious message:
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





<del>, <ins>: Deleted and Inserted Text

This text is deleted and This text is inserted.

Embedded content

<picture>: Picture

A photo of a dog.

<img>: Image Embed

A photo of a dog.

<iframe>: Inline Frame

<object>: External Object

<video>: Video Embed

<audio>: Embed Audio

<map>, <area>: Image Map Area

World continents

<math>: MathML

a 2 + b 2 = c 2

<svg>: Scalable Vector Graphics

Tabular data

<table>: Table

How I chose to spend my money
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


<fieldset>, <legend>: Fieldset Set, Legend

Field Set Legend

<label>: Input Label

<input>: Input (Form Input


<button>: Button

<select>: Select

<datalist>: Data List

<textarea>: Textarea

<output>: Output

+ = 4

<progress>: Progress Indicator

No value

<meter>: Meter

at 32/100
at 50/100
at 66/100
at 90/100

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.

<dialog>: Dialog

Greetings, one and all!


<canvas>: Graphics Canvas