| layout | title | description | date | updated |
|---|---|---|---|---|
base.njk |
HTML elements test page |
Examples of the elements of HTML |
2023-05-19 |
2024-01-11 |
This page includes examples of most of the elements of HTML.
Inspired by Poor Man's Styleguide, this page borrows heavily from these excellent resources:
- HTML Elements Index, by Jens Oliver Meiert
- HTML5 Test Page, by Chris Bracco
- HTML5 elements tester, by Alexander Sandberg
- HTML Element test file index, by TPGi
- HTML Tags Memory Test, by Paul Foster
- HTML Test Page for CSS Style Guide
Many of the samples and descriptions included here are adapted from the current HTML specification and the web-platform-tests project.
At the time of writing, this page includes examples for most of the 114 current elements of HTML1, as defined by the HTML living specification. There are a whole load more elements that used to be part of HTML, but have since been deprecated.
This page was last updated on {{ page.updated | date }}.
If you've got any questions or comments about this page, or if you've found a mistake, please [get in touch](mailto:{{ site.author.email }}).
Note: Some of the examples on this page require scripting to work correctly. Follow these instructions for how to enable JavaScript in your web browser if you'd like to see these examples in action.
[[toc]]
The html element represents the root of an
HTML document. All the other
elements of HTML must be descendants of this element.
Note: Because the elements in this section represent metadata about the current HTML document, they don't render anything on the page. To see examples of these elements in action, [view the source for this page]({{ page.outputPath | absoluteUrl(site.repository.url) }}).
The head element represents a collection of metadata for the current
web page. The other elements in this section are descendants of this element.
The title element represents the title or name of the current web
page.
The base element specifies the base
URL to use for all relative URLs
in a document.
The link element links the current web page to other resources.
The meta element represents other metadata that cannot be expressed
using the title, base, link, style, and script elements.
The style element is used to embed CSS style sheets in the current
web page.
The body element represents the contents of the document.
The content of this page is contained within a body element.
The article element represents a self-contained part of a page,
which is distributable outside of the page it's on.
The section element represents a generic section of a page.
The nav element represents a section of a page that links to other
pages or to parts within the page.
See the table of contents, above, for an example of the
nav element in action.
The aside element represents a part of a page which is only
indirectly related to the main content of the page.
This page uses a single h1 element as the page title --- see
"HTML elements test page", above. Subsequent
headings should start with h2 --- see "Sections", above,
for an example h2. More than one h2 may be used per page.
The heading for this section is a h3 element.
The heading above is a h4 element.
The heading above is a h5 element.
The heading above is a h6 element.
The hgroup element represents a heading and related content. The
element may be used to group an h1–h6 element with one or more p elements
containing content representing a subheading, alternative title, or tagline.
For example:
Or: How I Learned to Stop Worrying and Love the Bomb
The header element represents a group of introductory or
navigational aids.
The footer element represents a footer, typically containing
information about the author of the page or section, copyright data or links to
related documents.
The address element represents the contact information for current
page (or an article within the page, if the address element is nested in an
article element). For example:
The address element is not be used to represent arbitrary addresses (e.g.
postal addresses), unless those addresses are in fact the relevant contact
information. The p element is the appropriate element for marking up postal
addresses in general.
The p element represents a paragraph.
All paragraphs on this page are wrapped in p elements.
The hr element represents a paragraph-level thematic break. For
example, a scene change in a story, or a transition to another topic within a
section of a reference book. For example:
The pre element represents a block of preformatted text, in which
structure is represented by typographic conventions rather than by elements.
For example, an e-mail, fragments of computer code or ASCII art. Here's an
example showing the printable characters of ASCII:
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
The blockquote element represents a section that is being
quoted from another source. For example:
I contend that we are both atheists. I just believe in one fewer god than you do. When you understand why you dismiss all the other possible gods, you will understand why I dismiss yours.
Attributions should be provided for quotations. See the
figure element, below.
The ol element represents a list of items, where the items have been
intentionally ordered, such that changing the order would change the meaning
of the document.
- This is the first item in an ordered list.
- This is the second item, which itself contains another list.
- This is the first item of the inner list, which is also ordered.
- This is the second item.
- This is the final item in the list.
The ul element represents a list of items, where the order of the items
is not important — that is, where changing the order would not materially
change the meaning of the document. For example:
- United Kingdom of Great Britain and Northern Ireland:
- England
- Scotland
- Wales
- Northern Ireland
- Republic of Ireland
- Isle of Man
- Channel Islands:
- Bailiwick of Guernsey
- Bailiwick of Jersey
The menu element represents an unordered list of command that a user
can perform or activate. For example:
The li element represents a list item. It's used as a child of an ol,
ul, or menu element. See examples of these, above, for usage of the
li element.
The dl element represents a definition list, a collection of terms and
descriptions. For example:
- Beast of Bodmin
- A large feline inhabiting Bodmin Moor.
- Morgawr
- A sea serpent.
- Owlman
- A giant owl-like creature.
The figure element represents some flow content, optionally with a
caption, represented by the figcaption element, that is
self-contained (like a complete sentence) and is typically referenced as a
single unit from the main flow of the document.
The figure element can be used to annotate illustrations, diagrams,
photos, code listings, etc., often with a citation for the excerpted content.
For example:
Carl Sagan, in "Wonder and Skepticism", from the Skeptical Inquirer Volume 19, Issue 1 (January-February 1995)The truth may be puzzling. It may take some work to grapple with. It may be counterintuitive. It may contradict deeply held prejudices. It may not be consonant with what we desperately want to be true. But our preferences do not determine what's true. We have a method, and that method helps us to reach not absolute truth, only asymptotic approaches to the truth — never there, just closer and closer, always finding vast new oceans of undiscovered possibilities. Cleverly designed experiments are the key.
The main element represents the dominant contents of the document.
The content of this page is contained within a main element.
The search element represents a part of page that contains a set of
form controls or other content related to performing a search or filtering
content. This could be a search of the web site or application; a way of
searching or filtering search results on the current web page; or a global
or Internet-wide search function.
The div element is a generic container for a group of elements. It has
no special meaning of it's own.
It's typically used to wrap a group of elements for styling purposes.
The HTML Living Standard notes that:
Authors are strongly encouraged to view the
divelement as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of thedivelement leads to better accessibility for readers and easier maintainability for authors.
The a element represents a hyperlink to another page or to another part
of the current page. For example:
If an a element doesn't have a href attribute, it represents a placeholder
for where a link might otherwise have been placed, if it had been relevant.
For example:
The em element represents stress emphasis of its contents. For example:
Cats are cute animals.
The strong element represents strong importance, seriousness, or
urgency for its contents. For example:
Warning. This dungeon is dangerous. Avoid the ducks. Take any gold you find. Do not take any of the diamonds, they are explosive and will destroy anything within ten meters. You have been warned.
The small element represents side comments such as small print.
Small print typically features disclaimers, caveats, legal restrictions, or
copyrights. Small print is also sometimes used for attribution, or for
satisfying licensing requirements. For example:
Example Corp today announced record profits for the second quarter (Full Disclosure: Foo News is a subsidiary of Example Corp), leading to speculation about a third quarter merger with Demo Group.
The s element is used to represent content that is no longer accurate or
relevant. The s element is not appropriate when indicating document edits;
to mark a span of text as having been removed from a document, use the del
element. For example:
Buy our Iced Tea and Lemonade!
Recommended retail price: $3.99 per bottle
Now selling for just $2.99 a bottle!
The cite element represents the title of a work (e.g. a book, a
paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game,
a sculpture, a painting, a theatre production, a play, an opera, a musical, an
exhibition, a legal case report, a computer program, etc). This can be a work
that is being quoted or referenced in detail (i.e. a citation), or it can just
be a work that is mentioned in passing.
Universal Declaration of Human Rights, United Nations, December 1948. Adopted by General Assembly resolution 217 A (III).
The q element represents content quoted inline from another source. For
example:
The man said Things that are impossible just take longer
. I disagreed
with him.
The dfn element represents the defining instance of a term. For
example:
The GDO is a device that allows off-world teams to open the iris.
[...]
Teal'c activated his GDO and so Hammond ordered the iris to be opened.
The abbr element represents an abbreviation or acronym, optionally
with it's expansion. For example:
The WHATWG started working on HTML5 in 2004.
The ruby element allows one or more spans of text to be marked with
ruby annotations — short runs of text presented alongside base text, primarily
used in East Asian typography as a guide for pronunciation or to include other
annotations. For example:
編集者
The rt element marks the ruby text component of a ruby annotation.
The rp element can be used to provide parentheses around a ruby text
component of a ruby annotation, used by user agents that don't support ruby
annotations.
The data element represents it's contents, along with a
machine-readable form of the content. For example:
Eight
The time element represents it's contents, along with a
machine-readable form of the content. The kind of content is limited to various
kinds of dates, times, time-zone offsets, and durations. For example:
Today is Friday.
The code element represents a fragment of computer code. For example:
When you call the activate() method on the
robotSnowman object, the eyes glow.
The var element represents a variable. This could be an actual
variable in a mathematical expression or programming context, an identifier
representing a constant, a symbol identifying a physical quantity, a function
parameter, or just be a term used as a placeholder in prose.
In the paragraph below, the letter "n" is being used as a variable in prose:
If there are n pipes leading to the ice cream factory then I expect at least n flavors of ice cream to be available for purchase!
The samp element represents sample or quoted output from another
program or computing system.
This example shows the samp element being used inline:
The computer said Too much cheese in tray two but I didn't know what that meant.
The kbd element represents user input (typically keyboard input,
although it may also be used to represent other input, such as voice commands).
Here the kbd element is used to indicate keys to press:
To make George eat an apple, press Shift+F3.
The sub element represents a subscript and the sup element
represents a superscript.
f(x, n) = log4xn
The i element represents a span of text in an alternate voice or mood,
or otherwise offset from the normal prose in a manner indicating a different
quality of text, such as a taxonomic designation, a technical term, an
idiomatic phrase from another language, transliteration, a thought, or a ship
name in Western texts.
In the following example, a dream sequence is marked up using i elements.
Raymond tried to sleep.
The ship sailed away on Thursday, he dreamt. The ship had many people aboard, including a beautiful princess called Carey. He watched her, day-in, day-out, hoping she would notice him, but she never did.
Finally one night he picked up the courage to speak with her—
Raymond woke with a start as the fire alarm rang out.
The b element represents a span of text to which attention is being
drawn for utilitarian purposes without conveying any extra importance and with
no implication of an alternate voice or mood, such as key words in a document
abstract, product names in a review, actionable words in interactive
text-driven software, or an article lede.
The following example shows a use of the b element to highlight key words
without marking them up as important:
The frobonitor and barbinator components are fried.
The u element represents a span of text with an unarticulated, though
explicitly rendered, non-textual annotation, such as labeling the text as
being a proper name in Chinese text (a Chinese proper name mark), or labeling
the text as being misspelt. For example:
The see is full of fish.
The mark element represents a run of text in one document marked or
highlighted for reference purposes, due to its relevance in another context.
For example:
I also have some kittens who are visiting me these days. They're really cute. I think they like my garden! Maybe I should adopt a kitten.
The bdi element represents a span of text that is to be isolated from
it's surroundings for the purposes of bidirectional text formatting. For
example:
The recommended restaurant is My Juice Café (At The Beach).
The bdo element represents explicit text directionality formatting
control for its children. It allows authors to override the Unicode
bidirectional algorithm by explicitly specifying a direction override. For
example:
The proposal is to write English, but in reverse order. "Juice" would become "Juice".
The span element is a generic inline container for a group of
text-level elements. It has no special meaning of it's own.
It's typically used to wrap a group of elements for styling purposes.
Like the div element, it should be viewed as an element of last resort, for
when no other element is suitable
The br element represents a line break. For example:
P. Sherman
42 Wallaby Way
Sydney
The wbr element represents a line break opportunity.
In the following example, someone is quoted as saying something which, for
effect, is written as one long word. However, to ensure that the text can be
wrapped in a readable fashion, the individual words in the quote are separated
using a wbr element.
So then she pointed at the tiger and screamed "thereisnowayyouareevergoingtocatchme"!
The ins element represents an addition to the page. For example:
I like fruit.
The del element represents a removal from the page. For example:
- Empty the dishwasher
Watch Walter Lewin's lecturesDownload more tracks- Buy a printer
The picture element is a container for an img element (see
below) that can provide alternative sources for an image.
For example, the format of the following image will depend on what image formats your web browser supports. Newer browsers that support the WebP format will use this, and older browsers that don't support WebP will fallback to a (less efficient but widely supported) JPEG image.
The source element describes one of multiple alternative sources
for audio, img, and video elements.
See the examples for the picture (above), img,
video, and audio elements (below)
for usage of the source element.
The img element represents an image.
The iframe element can be used to embed HTML or another HTML page
into the current page.
Note: In the example above, you should only see a blank page and your web
browser's default styles for an iframe.
The embed element embeds external content into the current page. The
content is provided by an external application or a browser plug-in.
embed element, embedding a PDF
document.
For web browsers that support the embed element, you should see a PDF file
embedded in the current page.
The object element embeds an external resource, such as an image, a
nested page, or a resource to be handled by a plugin, into the current page.
Your web browser doesn't support displaying this file. You can download this file instead: sample.pdf (PDF).
An example of theobject element, embedding a PDF
document.
For web browsers that don't support the object element, or don't support
embedding PDFs, you should see a link to the PDF document instead.
Note: The descriptions of embed and object are very similar, so it's
often not clear which to use. There are some minor differences in what
attributes each supports, but the most significant difference is that the
object element supports including fallback content as child elements,
whereas the embed element does not. Generally, it's preferable to avoid both
elements,
MDN notes that:
PDFs tend to be better linked to than embedded, and other content such as images and video have much better, easier elements to handle those.
The video element embeds a media player which supports video
playback into the current page.
For web browsers that support the video element, you should see a video,
with subtitles, embedded in the current page. For web browsers that don't
support the video element, or don't support playing that type of video, you
should see a link to download the video instead.
video element, with captions provided
by the track element. A plain white screen is shown, with
a single subtitle, This is a test subtitle.
Note: The video controls provided by web browsers aren't always accessible.
The audio element embeds a media player which supports sound
playback into the current page.
For web browsers that support the audio element, you should see an audio
player embedded in the current page. For web browsers that don't support the
audio element, or don't support playing that type of audio, you should see
a link to download the audio instead.
Your web browser doesn't support playing this audio. You can download this audio instead: sample.mp3 (MP3).
An example of theaudio element. A 440Hz sine wave
signal, often used to test audio equipment, is played.
Note: The audio controls provided by web browsers aren't always accessible.
The track element associates subtitles and other timed text tracks
or time-based data with audio and video elements. Text track are formatted
in WebVTT format.
See the example for the video element, above, for usage
of the track element.
The map element represents an image map, which allows areas on an
image, represented by an img element, to be associated with hyperlinks.
Strangely, it doesn't represent a map.
The area element represents either a hyperlink with some text and a
corresponding area on an image map, or a dead area on an image map:
-
If the
areaelement has anhrefattribute, then the area element represents a hyperlink. Thealtattribute is the text of the hyperlink. -
If an
areaelement has nohrefattribute, then the area represented by the element cannot be selected. The alt attribute must be omitted in this case.
For example, in the following image, each of the shapes links to a different URL. You should see the URL change in your web browser's address bar when you click on a shape.
Please select a shape:
The math element represents mathematical notations, as defined by
MathML.
For example, here is the quadratic equation expressed in MathML:
x = − b ± b 2 − 4 a c 2 aNote: You'll want to provide an accessible fallback for browsers without MathML support.
The svg element embeds an SVG
image into the page. SVG is an XML-based two-dimensional vector graphics
markup language.
The table element represents tabular data. Tables have rows,
columns, and cells containing data.
This example uses the table, tbody, thead, tfoot, tr, td, and
th elements to markup a table of purchases. The caption element is used to
provide an accessible description of the table, and the colgroup and col
elements are used to style the final column.
| Purchase | Location | Date | Evaluation | Cost (€) |
|---|---|---|---|---|
| Haircut | Hairdresser | 12 Sept. | Great idea | 30 |
| Lasagna | Restaurant | 12 Sept. | Regrets | 18 |
| Shoes | Shoeshop | 13 Sept. | Big regrets | 65 |
| Toothpaste | Supermarket | 13 Sept. | Good | 5 |
| Total | 118 | |||
The form element represents a collection of interactive controls,
such as text, buttons, checkboxes, range, or colour picker controls, for
submitting information.
For example, here is a form that asks a user to enter a single value.
Your answer:
The label element represents a caption for an item in a user
interface. It's typically used for labelling form controls.
See the form example, above, for usage of the label
element.
The following form includes examples of the input element, including it's
various input types.
The default input type: a single-line text field.
A single-line text field for entering search strings.
A control for entering a telephone number.
A field for entering a URL.
A field for entering an email address.
A single-line text field whose value is obscured.
A control for entering a date (year, month, and day, with no time).
A control for entering a month and year, with no time zone.
A control for entering a date consisting of a week-year number and a week number with no time zone.
A control for entering a time value with no time zone.
A control for entering a date and time, with no time zone.
A control for entering a number.
A control for entering a number whose exact value is not important.
A control for specifying a colour.
A check box allowing single values to be selected and deselected.
A radio button, allowing a single value to be selected out of multiple choices.
A control for selecting a file.
A button that submits the form.
A graphical submit button.
A button that resets the contents of the form to default values.
The following form includes examples of the button element, including it's
various input types.
Note: This form doesn't actually do anything.
The select element represents a control for selecting amongst a set
of options.
Select unit type: Miner Puffer Snipey Max Firebot
The datalist element represents a set of option elements that
represent predefined options for other controls.
Course
The optgroup element represents a group of option elements with
a common label.
Note: This form doesn't actually do anything.
CourseWhich course would you like to watch today?
The option element represents an option in a select element or as
part of a list of suggestions in a datalist element. See examples of these,
above, for usage of the option element.
The textarea element represents a multiline plain text edit
control.
If you have any comments, please let us know:
The output element represents the result of a calculation, or the
result of a user action.
In this example, the output element is used to display the result for a
simple calculator:
Number 1: +
Number 2: =
Result: 42
Note: This interactive example requires JavaScript.
The progress element represents the completion progress of a
task. Progress is either determinate or indeterminate.
A determinate progress bar indicates the fraction of work that has so far been completed. For example:
Progress: 50%
An indeterminate indicates that progress is being made but that it is not clear how much more work remains to be done before the task is complete. For example:
The meter element represents a scalar measurement within a known
range, or a fractional value.
In this example, the meter element is used to describe the amount of disk
space used, out of a known amount of total space available.
Disk usage: 170,261,928 bytes used out of 233,257,824 bytes available
The fieldset element represents a set of form controls grouped
together, optionally with a caption, represented by the legend element.
Black on White
White on Black
Use grayscale
Enhance contrast
The details element represents a disclosure widget
from which the user can obtain additional information or controls.
For example, clicking "Details", below, will reveal additional information.
- Transfer rate:
- 452KB/s
- Local filename:
- /home/rpausch/raycd.m4v
- Remote filename:
- /var/www/lectures/raycd.m4v
- Duration:
- 0:16:27
- Color profile:
- SD (6-1-6)
- Dimensions:
- 320×240
The summary element represents a summary, caption, or legend for
the rest of the contents of the summary element's parent details element,
if any.
Without a summary element, a details element will be given a default
summary (see the example above). This is often just the text "Details" in many
browsers. The summary element can be used to provide a more useful synopsis:
Automated Status: Operational
Velocity: 12m/s
Direction: North
The dialog element represents a dialog box or pop-up box. A dialog
can be either non-modal or modal.
When a non-modal dialog is open, it's still possible to interact with the rest of the page.
Note: This interactive example requires JavaScript.
Open dialog
An open dialog. Press "Close" to dismiss this dialog.
CloseWhen a modal dialog is open, only the content within the dialog can be interacted with.
Note: This interactive example requires JavaScript.
Open modal dialog
An open modal dialog. Press "Close" or the Esc key to dismiss this dialog.
CloseThe script element is used to include dynamic script or data blocks
into a page.
In the example below, a message is displayed stating whether JavaScript is
enabled in your web browser. A script element is used to update the message
to indicate that JavaScript is enabled, if JavaScript is in fact enabled.
Otherwise, some default text is displayed which states that JavaScript is
disabled. This message will change if you enable or disable JavaScript and
reload the page.
JavaScript is disabled in your web browser.
<script> var element = document.getElementById("script-example"); if ("textContent" in element) { element.textContent = "enabled"; } else { element.innerText = "enabled"; } </script>The noscript element can be used to show content only if
scripting is disabled.
JavaScript really is disabled in your web browser.
The template element is used to declare fragments of HTML that
can be cloned and inserted in the document by script.
The slot element represents a placeholder inside a
web component.
The canvas element represents a bitmap canvas that can be used to
draw graphics and animations on the fly.
Note: This interactive example requires JavaScript.
Your web browser doesn't support the canvas element.
Update your web browser to
see this example in action.
canvas element, a blue rectangle.
<script>
var canvas = document.getElementById("canvas-example");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#3300f5";
ctx.fillRect(0, 0, 133, 106);
} else {
// An attempt at showing fallback content if the canvas element is not
// supported.
while (canvas.hasChildNodes()) {
canvas.parentNode.insertBefore(canvas.firstChild, canvas);
}
canvas.parentNode.removeChild(canvas);
}
</script>
Footnotes
-
See On the Difficulty of Counting the Number of HTML Elements, for a discussion of how to answer the question "How many HTML elements are there?". This page includes elements that appear in the current specification, the HTML Living Standard, to count the number of elements. As of {{ page.date | date }}, there are 114 HTML elements, if we include
<math>and<svg>. ↩