Introduction
This page is a comprehensive demonstration of every HTML element supported by modern web browsers. It serves as a visual reference and testbed.
Content Sectioning & Text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a standard paragraph <p>. It can contain various inline elements. For
instance, you can have <strong> (important) text, <em>
(emphasized) text, <b> (bolded, no extra importance) text, or <i>
(italicized, alternate voice) text. Use <u> (unarticulated annotation) for things
like spelling errors, or <s> (strikethrough) for inaccurate content. <small>
text is for side comments.
This is a blockquote, often used for long citations.
— A knowledgeable source
A short inline quotation uses the q element
.
The HTML element (HyperText Markup Language) is the standard markup language for creating web
pages. The <dfn> tag is used to indicate the defining instance of a term.
You can use the HTML tag. The <abbr>
tag is for abbreviations.
Visit us at: example.com
Duxbury, VT
This text preserves spaces
and line breaks. It's ideal
for displaying code blocks.
Lists
Unordered List <ul>
- List item 1
- List item 2
Ordered List <ol>
- First item
- Second item
Menu List <menu>
Description List <dl>
- Term 1
- Description for Term 1.
- Term 2
- Description for Term 2.
Other Text Elements
Use mark to highlight text. Code can be represented with <code>. Keyboard
input with Ctrl + S. Sample output with File not found. And variables
with x = y + 2.
H2O (using <sub>) and E=MC2 (using <sup>).
The current date is .
This word is spelled עִבְרִית correctly. The <bdi> tag isolates text that
might be formatted in a different direction. Contrast with this text which forces
right-to-left direction.
The tomato element links content with a machine-readable translation.
This line includes a
line break.
This line includes a potential line break opportunity here:
A generic
<div> container, often used for styling purposes with a generic <span> inside.Forms
Image and Multimedia
Images
<figcaption> for the image above.Picture Element
Audio
Video
Embedded Content
SVG and MathML
Embedded SVG
Embedded MathML
The quadratic formula is:
Table Content
| Month | Savings | Notes |
|---|---|---|
| January | $100 | Good start |
| February | $80 | |
| Total Savings | $180 | |
Interactive Elements & Web Components
Details & Summary
Click to see details
Here is some hidden information that is now revealed. The <details> and
<summary> elements create a disclosure widget.
Dialog
Canvas
Template & Slot (Web Components)
The content below is not visible on the page, but can be used by JavaScript to instantiate new elements.
Default Title