<main>

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:

Content sectioning

<article>

Example

Jurassic Park

Review

Dinos were great!

User reviews
Too scary!

Way too scary for me.

Posted on by Lisa.

Love the dinos!

I agree, dinos are my favorite.

Posted on by Tom.

Posted on by Staff.

More on MDN…

<aside>

Example

The Little Mermaid

The Disney movie The Little Mermaid was first released to theatres in 1989.

More info about the movie…

More on MDN…

<footer>

Example

FIFA World Cup top goalscorers

  1. Miroslav Klose, 16
  2. Ronaldo Nazário, 15
  3. Gerd Müller, 14
Copyright © 2023 Football History Archives. All Rights Reserved.
More on MDN…

<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.

Continue reading…

More on MDN…

<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…

More on MDN…

<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.

More on MDN…

<nav>

Example: list
Example: prose
More on MDN…

<section>

Example: with heading

Heading

Bunch of awesome content

Example: without heading
More on MDN…

<search>

Example: form

Movie website

Example: no form

Results:

No results found.
More on MDN…

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.

More on MDN…

<div>

Example

Any kind of content here. Such as <p>, <table>. You name it!

More on MDN…

<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
More on MDN…

<figure>

Example: uncaptioned
Coonhound in a window sill with her tongue out
Example: captioned
Coonhound in a window sill with her tongue out
Treeing walker coonhound
More on MDN…

<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.

More on MDN…

<ol>

Example: basic
  1. Fee
  2. Fi
  3. Fo
  4. Fum
Example: Roman numerals
  1. Introduction
  2. List of Grievances
  3. Conclusion
Example: start after one

Finishing places of contestants not in the winners' circle:

  1. Speedwalk Stu
  2. Saunterin' Sam
  3. Slowpoke Rodriguez
Example: nested
  1. first item
  2. second item
    1. second item first subitem
    2. second item second subitem
    3. second item third subitem
  3. third item
Example: nested unordered list
  1. first item
  2. second item
    • second item first subitem
    • second item second subitem
    • second item third subitem
  3. third item
More on MDN…

<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.

More on MDN…

<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 |
                  ||     ||
                
A cow saying, "I'm an expert in my field." The cow is illustrated using preformatted text characters.
Example: code

Using CSS to change the font color is easy.

body {
  color: red;
}
More on MDN…

<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
    1. second item first subitem
    2. second item second subitem
    3. second item third subitem
  • third item
More on MDN…

Inline text semantics

<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.

More on MDN…

<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.
More on MDN…

<bdi>

Example
  • اَلأَعْشَى - 1st place
  • Jerry Cruncher - 2nd place
More on MDN…

<bdo>

Example

This text will go left to right.

This text will go right to left.

More on MDN…

<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.

More on MDN…

<cite>

Example

More information can be found in [ISO-0000].

More on MDN…

<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;
More on MDN…

<data>

Example

New Products

  • Mini Ketchup
  • Jumbo Ketchup
  • Mega Jumbo Ketchup
More on MDN…

<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.

More on MDN…

<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.

More on MDN…

<i>

Example

The Latin phrase Veni, vidi, vici is often mentioned in music, art, and literature.

More on MDN…

<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 FileNew Document menu option.

Don't forget to click the OK button to confirm once you've entered the name of the new file.

More on MDN…

<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.

More on MDN…

<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.

More on MDN…

<ruby>

Example: character (Kan)(ji)
Example: word 明日 (Ashita)
More on MDN…

<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:~$ 
More on MDN…

<small>

Example

This is the first sentence. This whole sentence is in small letters.

More on MDN…

<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.

More on MDN…

<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 x1xn.

Example: chemical formula

Almost every developer's favorite molecule is C8H10N4O2, which is commonly known as "caffeine."

More on MDN…

<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
More on MDN…

<time>

Example: time

The concert starts at .

Example: date

The concert took place on .

More on MDN…

<u>

Example: typo

This paragraph includes a wrnogly spelled word.

More on MDN…

<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).

More on MDN…

<wbr>

Example

http://this.is.a.really.long.example.com/With/deeper/level/pages/deeper/level/pages/deeper/level/pages/deeper/level/pages/deeper/level/pages

More on MDN…

Image and multimedia

<video>

Example
More on MDN…

Embedded content

<iframe>

Example: basic
Example: srcdoc

Comment

Nine minutes ago, jc wrote:
More on MDN…

<picture>

Example: media Coonhound in a window sill
Example: srcset Coonhound in a window sill
Example: sizes Coonhound in a window sill
More on MDN…

SVG and MathML

<math>

Example

The infinite sum n = 1 + 1 n 2 is equal to the real number π 2 6 .

More on MDN…

Demarcating edits

<del>

Example

This text has been deleted, here is the rest of the paragraph.

This paragraph has been deleted.

More on MDN…

Table content

<colgroup>

Example
Personal weekly activities
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
More on MDN…

<table>

Example: basic
Name Age
Maria Sanchez 28
Michael Johnson 34
Example: full
Status of the club members 2021
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
More on MDN…

<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
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
More on MDN…

Forms

<datalist>

Example: text
Example: time
Example: range
Example: color
More on MDN…

<fieldset>

Example: basic
Do you agree?
Example: disabled
Disabled login fieldset
More on MDN…

<input>

Example: button
Example: checkbox
Choose your monster's features:
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
Select a maintenance drone:
Example: range

Audio settings:

Example: reset
>
Example: searcn
Example: submit
Example: tel
Example: text
Example: time Office hours are 9am to 6pm
Example: url
>
Example: week
More on MDN…

<label>

Example: implicit
Example: explicit
More on MDN…

<select>

Example: option
Example: optgroup
Example: advanced
More on MDN…

<textarea>

Example: basic
Example: bounded length
Example: placeholder
Example: readonly
Example: disabled
More on MDN…

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.

More on MDN…

<dialog>

Example: invoker

This dialog was opened using an invoker command.

Example: popover

This dialog was opened using a popovertargetaction attribute.

More on MDN…

<summary>

Example:heading

Overview

  1. Cash on hand: $500.00
  2. Current invoice: $75.30
  3. Due date: 5/6/19
Example: HTML
Overview
  1. Cash on hand: $500.00
  2. Current invoice: $75.30
  3. Due date: 5/6/19
More on MDN…
</main>