HTML Kitchen Sink

View the source code.

This web page contains all valid HTML elements listed in the MDN HTML elements reference. There is absolutely no styling applied to the example HTML elements within each display box.

The only CSS used in this page is a page container, extra margins above each section heading, and the padded box for each HTML example.

View this page with common CSS frameworks

Table of Contents

01. Content sectioning

Address

user@example.com
(311) 555-2368

article

Article Heading 1

Lorem ipsum dolor sit amet.

aside

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida eu elit a convallis.

footer

header

Lorem Ipsum Dolor!

headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

hgroup

Multi-level heading line 1

Multi-level heading line 2

main

Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Australia.

Many species of gecko have adhesive toe pads which enable them to climb walls and even windows.

nav

section

Introduction

People have been catching fish for food since before recorded history.

02. Text content

blockquote

Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.

dd

Beast of Bodmin
A large feline inhabiting Bodmin Moor.

div

Beware of the leopard

dl

Beast of Bodmin
A large feline inhabiting Bodmin Moor.

dt

Beast of Bodmin
A large feline inhabiting Bodmin Moor.

figcaption

example image
An example image caption

figure

example image
An example image caption

hr


li

main

Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Australia.

Many species of gecko have adhesive toe pads which enable them to climb walls and even windows.

ol

  1. Mix flour, baking powder, sugar, and salt.
  2. In another bowl, mix eggs, milk, and oil.
  3. Stir both mixtures together.
  4. Fill muffin tray 3/4 full.
  5. Bake for 20 minutes.

p

Some species live in houses where they hunt insects attracted by artificial light.

pre

  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

ul

03. Inline text semantics

a

Website Email Phone

abbr

You can use CSS to style your HTML.

b

The two most popular science courses offered by the school are chemistry (the study of chemicals and the composition of substances) and physics (the study of the nature and properties of matter and energy).

bdi

World wrestling championships

bdo

Famous seaside songs

The English song "Oh I do like to be beside the seaside"

Looks like this in Hebrew: אה, אני אוהב להיות ליד חוף הים

In the computer's memory, this is stored as אה, אני אוהב להיות ליד חוף הים

br

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

It was a bright cold day in April, and the clocks were striking thirteen.

code

The push() method adds one or more elements to the end of an array and returns the new length of the array.

data

New Products:

dfn

A validator is a program that checks for syntax errors in code or documents.

em

Get out of bed now!

We had to do something about it.

This is not a drill!

i

I looked at it and thought This can't be real!

Musa is one of two or three genera in the family Musaceae; it includes bananas and plantains.

The term bandwidth describes the measure of how much information can pass through a data connection in a given amount of time.

kbd

Please press Ctrl + Shift + R to re-render an MDN page.

mark

Search results for "salamander":


Several species of salamander inhabit the temperate rainforest of the Pacific Northwest.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

q

When Dave asks HAL to open the pod bay door, HAL answers: I'm sorry, Dave. I'm afraid I can't do that.

rp

( kan )( ji )

rt

( kan )( ji )

rtc

( ) ( lái ) 西 ( ) ( ) ( Malaysia )

ruby

明日 ( Ashita )

s

There will be a few tickets available at the box office tonight.

SOLD OUT!

samp

I was trying to boot my computer, but I got this hilarious message:

Keyboard not found
Press F1 to continue

small

MDN Web Docs is a learning platform for Web technologies and the software that powers the Web.


The content is licensed under a Creative Commons Attribution-ShareAlike 2.5 Generic License.

span

Add the basil, pine nuts and garlic to a blender and blend into a paste.

Gradually add the olive oil while running the blender slowly.

strong

... the most important rule, the rule you can never forget, no matter how much he cries, no matter how much he begs: never feed him after midnight.

sub

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

sup

The Pythagorean theorem is often expressed as the following equation:

a2 + b2 = c2

time

The Cure will be celebrating their 40th anniversary on in London's Hyde Park.

The concert starts at and you'll be able to enjoy the band for at least .

u

You could use this element to highlight speling mistakes, so the writer can corect them.

var

The volume of a box is l × w × h, where l represents the length, w the width and h the height of the box.

wbr

Fernstraßenbauprivatfinanzierungsgesetz

Fernstraßenbauprivatfinanzierungsgesetz

Fernstraßen­bau­privat­finanzierungs­gesetz

04. Image and multimedia

area

Mozilla MDN Graphics HTML JavaScript Web APIs CSS MDN infographic

audio

Listen to the T-Rex:

img

Grapefruit slice atop a pile of other slices

map

HTML CSS JavaScript MDN infographic

track

video

05. Embedded content

embed

iframe

object

param

picture

Change the browser window width to see the image change.

source

06. Demarcating Edits

del

There is nothing no code either good or bad, but thinking running it makes it so.

ins

“You're late!”

“I apologize for the delay.”

“A wizard is never late …”

07. Table Content

caption

He-Man and Skeletor facts
He-Man Skeletor
Role Hero Villain
Weapon Power Sword Havoc Staff
Dark secret Expert florist Cries at romcoms

col

Superheros and sidekicks
Batman Robin The Flash Kid Flash
Skill Smarts Dex, acrobat Super speed Super speed

colgroup

Superheros and sidekicks
Batman Robin The Flash Kid Flash
Skill Smarts Dex, acrobat Super speed Super speed

table

The table header
The table body with two columns

tbody

Council budget (in £) 2018
Items Expenditure
Donuts 3,000
Stationery 18,000

td

Alien football stars
Player Gloobles Za'taak
TR-7 7 4,569
Khiresh Odo 7 7,223
Mia Oolong 9 6,219

tfoot

Items Expenditure
Donuts 3,000
Stationery 18,000
Totals 21,000

th

Alien football stars
Player Gloobles Za'taak
TR-7 7 4,569
Khiresh Odo 7 7,223
Mia Oolong 9 6,219

thead

Council budget (in £) 2018
Items Expenditure
Donuts 3,000
Stationery 18,000

tr

Alien football stars
Player Gloobles Za'taak
TR-7 7 4,569
Khiresh Odo 7 7,223
Mia Oolong 9 6,219

08. Forms

button

datalist

fieldset

Choose your favorite monster

form

input

label

legend

Choose your favorite monster

meter

at 50/100

optgroup

option

output

+ = 60

progress

70%

select

textarea

09. Interactive Elements

details

Details Something small enough to escape casual notice.

dialog

Warning: The dialog in this box may appear over other elements on the page.

Greetings, one and all!

menu

Right-click to see the adjusted context menu
Action Another action
Separated action

summary

I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I? A keyboard.