HTML tasting menu
A menu dégustation to explore the HTML cuisine.
A single document can't capture all the world's HTML any more than one meal can feature every global dish. The goal of this document is a curated, diverse sample of HTML designed to throughly test your CSS. Most examples are gathered from the MDN HTML Reference. Some edits are made to:
- validate as a single document
- remain on this page as elements are clicked
- feature my dogs
Content sectioning
<address>
Example: expansive
Contact the author at www.example.com.If you see any bugs, please email the webmaster.
You may also want to visit us:
Example.com Foundation
5029 Foothill Trail
Indianapolis, IN
USA
Example: minimal
webmaster@example.com<article>
Example
Jurassic Park
Review
Dinos were great!
User reviews
Too scary!
Way too scary for me.
Love the dinos!
I agree, dinos are my favorite.
<aside>
Example
The Little Mermaid
The Disney movie The Little Mermaid was first released to theatres in 1989.
More info about the movie…
<footer>
Example
FIFA World Cup top goalscorers
- Miroslav Klose, 16
- Ronaldo Nazário, 15
- Gerd Müller, 14
<header>
Example
The Planet Earth
Posted on Wednesday, by Jane Smith
We live on a planet that's blue and green, with so many things still unseen.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Example: outline, headers only
Beetles
Etymology
Distribution and Diversity
Evolution
Late Paleozoic
Jurassic
Cretaceous
Cenozoic
External Morphology
Head
Mouthparts
Thorax
Prothorax
Pterothorax
Legs
Wings
Abdomen
Example: descending
Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
Heading level 6
Example: leaf paragraphs
Heading elements
Summary
Some text here…
Examples
Example 1
Some text here…
Example 2
Some text here…
See also
Some text here…
<hgroup>
Example
HTML: Living Standard
Last Updated 12 July 2022
Some intro to the document.
Table of contents
- …
First section
Some intro to the first section.
<main>
There is at most one unhidden <main>
per document. The beginning
and end are marked for
visibility.
<nav>
Example: list
Example: prose
<section>
Example: with heading
Heading
Bunch of awesome content
Example: without heading
Warning-avoiding heading
<search>
Example: form
Movie website
Example: no form
Results:
Text content
<blockquote>
Example: external cite
Words can be like X-rays, if you use them properly—they'll go through anything. You read and you're pierced.
—Aldous Huxley, Brave New World
Example: cite attribute
Avian carriers can provide high delay, low throughput, and low altitude service. The connection topology is limited to a single point-to-point path for each carrier, used with standard carriers, but many carriers can be used without significant interference with each other, outside early spring. This is because of the 3D ether space available to the carriers, in contrast to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision avoidance system, which increases availability.
<div>
Example
Any kind of content here. Such as <p>, <table>. You name it!
<dd>
See <dl>.
<dl>
Example: one term, one description
- Firefox
- A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.
Example: many terms, one description
- Firefox
- Mozilla Firefox
- Fx
- A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.
Example: one term, many descriptions
- Firefox
- A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.
- The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).
Example: term-description pairs, no div
- Name
- Godzilla
- Born
- 1952
- Birthplace
- Japan
- Color
- Green
Example: term-description pairs, wrapped in div
- Name
- Godzilla
- Born
- 1952
- Birthplace
- Japan
- Color
- Green
<dt>
See <dl>.
<figcaption>
See <figure>.
<figure>
Example: uncaptioned
Example: captioned
<hr>
Example
This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text.
This is the second paragraph of text. This is the second paragraph of text. This is the second paragraph of text. This is the second paragraph of text.
<li>
More on MDN…
<menu>
Example
<ol>
Example: basic
- Fee
- Fi
- Fo
- Fum
Example: Roman numerals
- Introduction
- List of Grievances
- Conclusion
Example: start after one
Finishing places of contestants not in the winners' circle:
- Speedwalk Stu
- Saunterin' Sam
- Slowpoke Rodriguez
Example: nested
- first item
-
second item
- second item first subitem
- second item second subitem
- second item third subitem
- third item
Example: nested unordered list
- first item
-
second item
- second item first subitem
- second item second subitem
- second item third subitem
- third item
<p>
Example
This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text.
This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph.
<pre>
Example: poem
S
A
LUT
M
O N
D E
DONT
JE SUIS
LA LAN
G U E É
L O Q U E N
TE QUESA
B O U C H E
O P A R I S
T I R E ET TIRERA
T O U JOURS
AUX A L
LEM ANDS - Apollinaire
Example: figure
____________________________
< I'm an expert in my field. >
----------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
Example: code
Using CSS to change the font color is easy.
body {
color: red;
}
<ul>
Example: basic
- first item
- second item
- third item
Example: nested unordered
- first item
-
second item
- second item first subitem
-
second item second subitem
- second item second subitem first sub-subitem
- second item second subitem second sub-subitem
- second item second subitem third sub-subitem
- second item third subitem
- third item
Example: nested ordered
- first item
-
second item
- second item first subitem
- second item second subitem
- second item third subitem
- third item
Inline text semantics
<a>
Example
Learn more about our products.
<abbr>
Example: next to expansion
JavaScript Object Notation (JSON) is a lightweight data-interchange format.
Example: acronym, no expansion
Using HTML is fun and easy!
Example: acronym, with expansion
Ashok's joke made me LOL big time.
Example: inside dfn
HTML is a markup language used to create the semantics and structure of a web page.
A Specification (spec) is a document that outlines in detail how a technology or API is intended to function and how it is accessed.
<b>
Example
This article describes several text-level elements. It explains their usage in an HTML document.
Keywords are displayed with the default style of the element, likely in bold.<bdi>
Example
- اَلأَعْشَى - 1st place
- Jerry Cruncher - 2nd place
<bdo>
Example
This text will go left to right.
This text will go right to left.
<br>
Example
O'er all the hilltops
Is quiet now,
In all the treetops
Hearest thou
Hardly a breath;
The birds are asleep in the trees:
Wait, soon like these
Thou too shalt rest.
<cite>
Example
More information can be found in [ISO-0000].
<code>
Example: inline
The function selectAll() highlights all the text in the input
field so the user can, for example, copy or delete the text.
Example: preformatted block
builtins.mapAttrs (system: pkgs: {
default = pkgs.mkShell {
packages = [
pkgs.html5validator
pkgs.reuse
];
};
}) inputs.nixpkgs.legacyPackages;
<data>
Example
New Products
- Mini Ketchup
- Jumbo Ketchup
- Mega Jumbo Ketchup
<dfn>
Example: basic
The HTML Definition element (<dfn>) is used to indicate the term being defined within the context of a definition phrase or sentence.
Example: link to definition
The HTML Definition element (<dfn>) is used to indicate the term being defined within the context of a definition phrase or sentence.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece donan, Latine voluptatem vocant. Confecta res esset. Duo Reges: constructio interrete. Scrupulum, inquam, abeunti;
Because of all of that, we decided to use the
<dfn> element for this
project.
<em>
Example
Ice cream is made with milk, sweetener, and cream. Frozen custard, on the other hand, is made of milk, cream, sweetener, and egg yolks.
<i>
Example
The Latin phrase Veni, vidi, vici is often mentioned in music, art, and literature.
<kbd>
Example: basic
Use the command help my-command to view documentation for the command "my-command".
Example: keystrokes
You can also create a new document using the Ctrl+N keyboard shortcut.
Example: echoed input
If a syntax error occurs, the tool will output the initial command you typed for your review:
custom-git ad my-new-file.cpp
Example: on-screen input
To create a new file, choose the File ⇒ New Document menu option.
Don't forget to click the OK button to confirm once you've entered the name of the new file.
<mark>
Example: text of interest
It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire. During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
Example: search results
It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.
Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth.
<q>
Example: English
According to Mozilla's website,
Firefox 1.0 was released in 2004 and became a big success.
Example: German
Laut Mozillas Website
Firefox 1.0 wurde 2004 veröffentlicht und war ein großer Erfolg.
<rp>
See <ruby>.
<rt>
See <ruby>.
<ruby>
Example: character
漢 字Example: word
明日<s>
Example
<samp>
Example: basic
When the process is complete, the utility will output the text Scan complete. Found N results. You can then proceed to the next step.
Example: with user input
mike@interwebz:~$ md5 -s "Hello world" MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62 mike@interwebz:~$ █
<small>
Example
This is the first sentence. This whole sentence is in small letters.
<span>
Example
Some text
<strong>
Example: basic
Before proceeding, make sure you put on your safety goggles.
Example: labeling
Important: Before proceeding, make sure you add plenty of butter.
<sub>
Example: footnote
According to the computations by Nakamura, Johnson, and Mason1 this will result in the complete annihilation of both particles.
Example: variable subscript
The horizontal coordinates' positions along the X-axis are represented as x1 … xn.
Example: chemical formula
Almost every developer's favorite molecule is C8H10N4O2, which is commonly known as "caffeine."
<sup>
Example: exponents
One of the most common equations in all of physics is E=mc2.
Example: superior lettering
Robert a présenté son rapport à Mlle Bernard.
Example: ordinal numbers
The ordinal number "fifth" can be abbreviated in various languages as follows:
- English: 5th
- French: 5ème
<time>
Example: time
The concert starts at .
Example: date
The concert took place on .
<u>
Example: typo
This paragraph includes a wrnogly spelled word.
<var>
Example: equation
An algebraic equation: x = y + 2
Example: basic
The variables minSpeed and maxSpeed control the minimum and maximum speed of the apparatus in revolutions per minute (RPM).
<wbr>
Example
http://this
Image and multimedia
<area>
See <map>.
<audio>
Example
<img>
Example
<map>
Example
<track>
Example
<video>
Example
Embedded content
<embed>
Example
<fencedframe>
More on MDN…
<iframe>
Example: basic
Example: srcdoc
Comment
<object>
Example
<picture>
Example: media
Example: srcset
Example: sizes
<source>
More on MDN…
SVG and MathML
<svg>
Example: basic
Example: dynamic viewport units
<math>
Example
The infinite sum is equal to the real number .
Demarcating edits
<del>
Example
This text has been deleted, here is the rest of the paragraph.
This paragraph has been deleted.
<ins>
Example
This text has been insertedTable content
<caption>
See <table>.
<col>
See <colgroup>.
<colgroup>
Example
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
| Clean room | Football training | Dance Course | History Class | Buy drinks | Study hour | Free time |
| Yoga | Chess Club | Meet friends | Gymnastics | Birthday party | Fishing trip | Free time |
<table>
Example: basic
| Name | Age |
|---|---|
| Maria Sanchez | 28 |
| Michael Johnson | 34 |
Example: full
| Name | ID | Membership Dates | Balance | |
|---|---|---|---|---|
| Joined | Canceled | |||
| Margaret Nguyen | 427311 | n/a | 0.00 | |
| Edvard Galinski | 533175 | 37.00 | ||
| Hoshi Nakamura | 601942 | n/a | 15.00 | |
| Total balance | 52.00 | |||
<tbody>
Example: implicit
| 3741255 | Jones, Martha | Computer Science | 240 |
| 3971244 | Nim, Victor | Russian Literature | 220 |
| 4100332 | Petrov, Alexandra | Astrophysics | 260 |
Example: explicit, with thead
| Student ID | Name | Major | Credits |
|---|---|---|---|
| 3741255 | Jones, Martha | Computer Science | 240 |
| 3971244 | Nim, Victor | Russian Literature | 220 |
| 4100332 | Petrov, Alexandra | Astrophysics | 260 |
<td>
See <table>.
<tfoot>
See <table>.
<th>
More on MDN…
<thead>
Example: single row
| Student ID | Name | Major | Credits |
|---|---|---|---|
| 3741255 | Jones, Martha | Computer Science | 240 |
| 3971244 | Nim, Victor | Russian Literature | 220 |
| 4100332 | Petrov, Alexandra | Astrophysics | 260 |
Example: multiple rows
| Student ID | Student | Major | Credits | |
|---|---|---|---|---|
| First name | Last name | |||
| 3741255 | Martha | Jones | Computer Science | 240 |
| 3971244 | Victor | Nim | Russian Literature | 220 |
| 4100332 | Alexandra | Petrov | Astrophysics | 260 |
<tr>
See <table>.
Forms
<button>
Example
<datalist>
Example: text
Example: time
Example: range
Example: color
<fieldset>
Example: basic
Example: disabled
<form>
Example
<input>
Example: button
Example: checkbox
Example: color
Choose your colors:
Example: date
Example: datetime-local
Example: email
Example: file
Example: image
Sign in to your account:
Example: month
Example: password
Example: radio
Example: range
Audio settings:
Example: reset
Example: searcn
Example: submit
Example: tel
Example: text
Example: time
Office hours are 9am to 6pmExample: url
Example: week
<label>
Example: implicit
Example: explicit
<legend>
Example
<meter>
Example
Battery level:
<optgroup>
See <select>.
<option>
See <select>.
<output>
Example
<progress>
Example
<select>
Example: option
Example: optgroup
Example: advanced
<selectedcontent>
More on MDN…
<textarea>
Example: basic
Example: bounded length
Example: placeholder
Example: readonly
Example: disabled
Interactive elements
<details>
Example: closed
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.
Example: open
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.
Example: mutually exclusive
Graduation Requirements
Requires 40 credits, including a passing grade in health, geography, history, economics, and wood shop.
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.
Job Requirements
Requires knowledge of HTML, CSS, JavaScript, accessibility, web performance, privacy, security, and internationalization, as well as a dislike of broccoli.
<dialog>
Example: invoker
Example: popover
<geolocation>
More on MDN…
<summary>
Example:heading
Overview
- Cash on hand: $500.00
- Current invoice: $75.30
- Due date: 5/6/19
Example: HTML
Overview
- Cash on hand: $500.00
- Current invoice: $75.30
- Due date: 5/6/19