HTML5 Kitchen Sink

A collection of all current HTML5 elements, grouped by function. Each element is linked to its Mozilla Developers Network documentation. Note that some of these elements are still experimental, and may not be supported in some browsers yet.

Use this kitchen sink to test/create CSS styles for your next project.


Content Sectioning


address

1081 N. Fair Oaks Ave.
Pasadena, CA 91103

article

Article Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


aside


footer


h1-h6

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

header

Main Page Title

Just a placeholder

hgroup

HTML

Living Standard — Last Updated 12 August 2016


nav


section

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



Content Sectioning


dl, dt, dd

Firefox
A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.

div

Anything goes in here.


figure, figcaption

Some picture I'm using without permission
Fig1. MDN Logo

hr



ol, ul, li

  1. First
  2. Second
  3. Third

main

Apples

The apple is the fruit of the apple tree.

Red Delicious

These bright red apples are the most common found in many supermarkets.

Granny Smith

These juicy, green apples make a great filling for apple pies.


p

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod consequat. Duis aute irure dolor in reprehenderit in voluptate velit ess cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


pre

  a {
    color: red;
  }
  


Inline Text Semantics


a

External Link

abbr

I18N

b, strong

Some text is bold, but should probably be strong.


bdi

This arabic word ARABIC_PLACEHOLDER is automatically displayed right-to-left.


bdo

This text will go left to right.

This text will go right to left.


br

Mozilla Foundation
1981 Landings Drive
Building K
Mountain View, CA 94043-0801
USA

blockquote, q, cite

This is a quotation taken from the Mozilla Developer Center.

- Somebody, Somewhere

According to Mozilla's website, Firefox 1.0 was released in 2004 and became a big success.


code

var i = 0;

data


dfn

Dab An Atlanta term used to describe a dance move (bowing head into elbow) which represents confidence, accomplishment, and pride.


em

In HTML 5, what was previously called block-level content is now called flow content.


i

This dumbass done did it again.


kbd

Type the following in the Run dialog: cmd


mark

The <mark> element is used to highlight text.


ruby, rp, rt, rtc

(Kan)(ji) San Francisco

s

Today's Special: Salmon SOLD OUT


samp

The diet-tracking app said: You're not eating your veggies and that was true


small

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


span

Basically, if you need to wrap it in something

sub

The chemical formula of water: H2O


sup

This text is superscripted


time

The concert starts at .


u

Today's Special: Salmon


var

A simple equation: x = y + 2


wbr

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



Image and Multimedia


map, area

350 x 150 pic

audio


img


track


video



Embedded Content


embed


object, param


source



Scripting


canvas

An alternative text describing what your canvas displays.

noscript

Rocks!


script



Demarcating Edits


del

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


ins

Normal text and some inserted text.



Table Content


table, caption, col, colgroup, tbody, td, tfoot, th, thead, tr

Awesome caption
Header content 1 Header content 2
Body content 1 Body content 2
Footer content 1 Footer content 2


Forms


form, button, datalist, option, fieldset, input, label, legend, meter, select, optgroup, output, progress, textarea

Title
+ = 60
70 %

Interactive Elements


details summary

Some details

More info about the details.

dialog

Greetings, one and all!

menu menuitem

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

Web Components


slot template