Embedded content

audio

img

svg

video

Interactive content

details / summary

More info

Additional information

Point 1
Point 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.

<html>
  <head>
  </head>
  <body>
  <div class="main"> <div>
  </body>
  </html>

blockquote

Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

Even better philosophical quote marked up with just a <blockquote> element.

ordered list

list item 1
list item 1
1. list item 2
2. list item 2
  1. list item 3
  2. list item 3
3. list item 2
4. list item 2
list item 1
list item 1

unordered list

list item 1
list item 1
- list item 2
- list item 2
  - list item 3
  - list item 3
- list item 2
- list item 2
list item 1
list item 1

description list

Description name: Description value
Description name: Description value; Description value
Description name
Description name: Description value

figure

Tabular data

Jimi Hendrix - albums
Album	Year	Price
Album	Year	Price
Are You Experienced	1967	10.00
Axis: Bold as Love	1967	12.00
Electric Ladyland	1968	10.00
Band of Gypsys	1970	12.00

Forms

Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping.

Text input

Email input

Search input

Tel input

URL input

Password input

File input

Radio input

Checkbox input

Radio input

Checkbox input

Select field

Textarea Textarea text

Inputs as siblings of labels

Color input

Number input

Range input

Date input

Month input

Week input

Datetime input

Datetime-local input

Radio input

Checkbox input

Radio input

Checkbox input

Select field

Textarea Textarea text

Clickable inputs and buttons

box-sizing tests