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<address>
: Contact Address<p>
: ParagraphA 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 Textmaxling 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 QuotationA 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<ul>
: Unordered List<dl>
: Description List<figure>
: Figure with Optional Caption<a>
: AnchorThis is a text link.
<em>
: EmphasisThe em element is used to add emphasis.
<strong>
: Strong ImportanceThe strong element is used to indicate strong importance.
<small>
: Side CommentThis 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>
: StrikethroughThis text has a strikethrough.
<cite>
: CitationMore 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>
: DefinitionThe HTML Definition element (<dfn>) is used to indicate the term being defined within the context of a definition phrase or sentence.
<abbr>
: AbbreviationHTML
<ruby>
: Ruby Annotation<time>
: (Date) TimeA date: Unix time began
A complete date:
A relative date:
A time:
A time zone:
A date and time:
<code>
: Inline CodeLorem ipsum <code>
sit amet
<var>
: VariableThe variable element, such as x = y.
<samp>
: Sample Output<kbd>
: Keyboard InputKeyboard keys: command Cmd ⌘ Shift ⇧ option Alt ⌥ control Ctrl ⌃ Caps Lock ⇪ Fn F1
<sub>
: SubscriptFootnotes: Lorem1
Math variables: x1,...,xn
Chemical formulas: H2O
<sup>
: SuperscriptExponents: E=mc2
Superior lettering: Lorem ipsum®
Ordinal numbers: 5th
<i>
: Idiomatic TextThe i element is text that is offset from the normal text.
<b>
: Bring Attention ToThe 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 TextThe mark element indicates a highlight.
<bdi>
: Bidirectional Isolateاَلأَعْشَى - 1st place
Jerry Cruncher - 2nd place
<bdo>
: Bidirectional Text OverrideThis text will go right to left.
<wbr>
: Line Break Opportunity<del>
, <ins>
: Deleted and Inserted TextThis text is deleted and This text is inserted.
<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<table>
: TablePurchase | 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<label>
: Input Label<input>
: Input (Form Input<select>
: Select<datalist>
: Data List<textarea>
: Textarea<output>
: Output<progress>
: Progress Indicator<meter>
: Meter<details>
: Details disclosure or Disclosure widgetsummary
:Something small enough to escape casual notice.
summary
: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.
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<canvas>
: Graphics Canvas