html5 tag / 検証用

last update: 2020/12/19

based on "necolas/test.html","html5.jp","htmq"

---

1) plain
sample

---

2) with reset.css
sample

---

ex) with 3300.css

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 2 (in section)

Heading 3 (in section)

Heading 4 (in section)

Heading 5 (in section)

Heading 6 (in section)

Heading 2 (in article)

Heading 3 (in article)

Heading 4 (in article)

Heading 5 (in article)

Heading 6 (in article)

Heading 1 (in header)

Text-level semantics

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

Address: somewhere, world

The a element example
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The ~~del element~~ example
The dfn element and dfn element with title examples
The em element example
The i element example
The img element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The ~~s element~~ example
The samp element example
The small element example
The span element example
The strong element example
The _{sub element} example
The ^{sup element} example
The u element example
The var element example

Embedded content

audio

img

svg element

video

Interactive content

details / summary

More info

Additional information

Point 1
Point 2

object, embed element

Grouping content

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

pre, code element

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 element

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.

ol element

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

ul element

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

dl element

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

figure element

table element

Jimi Hendrix - albums
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
Album	Year	Price

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

PW input

Radio input

Checkbox input

Radio input

Checkbox input

Select field

Textarea Textarea text

Inputs as siblings of labels

Number input

Range input

Radio input

Checkbox input

Radio input

Checkbox input

Select field

Textarea Textarea text

Clickable inputs and buttons

box-sizing tests

etc content

map, area(rect,ciecle,poly) element

canvas element

datalist element

math element

x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}

meter element

Storage space usage: 6 blocks used (out of 8 total) Voter turnout: Tickets sold:

optgroup element

Which course would you like to watch today?

Course:

ruby element

漢かん字じ　

time element

Our first date was a Saturday.

↑↑
↓
↑