HTML elements test page

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:

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 16 July 2024.

If you’ve got any questions or comments about this page, or if you’ve found a mistake, please get in touch.

The document element

The html element represents the root of an HTML document. All the other elements of HTML must be descendants of this element.

Document metadata

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.

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.

Sections

Document content

The body element represents the contents of the document.

The content of this page is contained within a body element.

Article contents

The article element represents a self-contained part of a page, which is distributable outside of the page it’s on.

Generic sections

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.

Asides

The aside element represents a part of a page which is only indirectly related to the main content of the page.

Headings

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.

Fourth-level headings

The heading above is a h4 element.

Fifth-level headings

The heading above is a h5 element.

Sixth-level headings

The heading above is a h6 element.

Heading groups

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:

Dr. Strangelove

Or: How I Learned to Stop Worrying and Love the Bomb

Headers

The header element represents a group of introductory or navigational aids.

Footers

The footer element represents a footer, typically containing information about the author of the page or section, copyright data or links to related documents.

Addresses

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:

For more details, contact John Smith.

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.

Grouping content

Paragraphs

The p element represents a paragraph.

All paragraphs on this page are wrapped in p elements.

Horizontal rule

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:

Pre-formatted text

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 { | } ~

Blockquotes

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.

Ordered list

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.

  1. This is the first item in an ordered list.
  2. This is the second item, which itself contains another list.
    1. This is the first item of the inner list, which is also ordered.
    2. This is the second item.
  3. This is the final item in the list.

Unordered 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:

The menu element represents an unordered list of command that a user can perform or activate. For example:

    •

    List items

    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.

    Definition list

    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.

    Figures

    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:

    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.

    Carl Sagan, in "Wonder and Skepticism", from the Skeptical Inquirer Volume 19, Issue 1 (January-February 1995)

    Main content

    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.

    Generic container

    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 div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.

    Text-level semantics

    The a element represents a hyperlink to another page or to another part of the current page. For example:

    Back to the top of the page

    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:

    Current page

    Stressed emphasis

    The em element represents stress emphasis of its contents. For example:

    Cats are cute animals.

    Strong importance

    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.

    Small print

    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.

    Strikethrough

    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!

    Citations

    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).

    Inline quotes

    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.

    Definition

    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.

    Abbreviation

    The abbr element represents an abbreviation or acronym, optionally with it’s expansion. For example:

    The WHATWG started working on HTML5 in 2004.

    Ruby annotations

    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:

    編集者 (editor)

    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.

    Data

    The data element represents it’s contents, along with a machine-readable form of the content. For example:

    Eight

    Time

    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 .

    Code

    The code element represents a fragment of computer code. For example:

    When you call the activate() method on the robotSnowman object, the eyes glow.

    Variables

    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!

    Sample output

    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.

    Keyboard entry

    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.

    Subscripts and superscripts

    The sub element represents a subscript and the sup element represents a superscript.

    f(x, n) = log4xn

    Alternative voice

    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.

    Emboldened

    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.

    Unarticulated annotated text

    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.

    Marked or highlighted text

    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.

    Bidirectional text

    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”.

    Content spans

    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

    Line breaks

    The br element represents a line break. For example:

    P. Sherman
    42 Wallaby Way
    Sydney

    Line break opportunity

    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"!

    Edits

    Additions

    The ins element represents an addition to the page. For example:

    I like fruit.

    Deletions

    The del element represents a removal from the page. For example:

    Embedded content

    Pictures

    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.

    A blue rectangle

    Media sources

    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.

    Images

    The img element represents an image.

    A blue rectangle.

    Inline frames

    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.

    Embedded external content

    The embed element embeds external content into the current page. The content is provided by an external application or a browser plug-in.

    An example of the 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.

    External objects

    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 the object 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.

    Embedded video

    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.

    An example of the 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.

    Embedded audio

    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.

    An example of the audio 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.

    Embedded text tracks

    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.

    Image maps

    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:

    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:

    Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star. Red box. Green circle. Blue triangle. Yellow star.

    Mathematical markup

    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 ⁢ a

    Note: You’ll want to provide an accessible fallback for browsers without MathML support.

    Scalable vector graphics

    The svg element embeds an SVG image into the page. SVG is an XML-based two-dimensional vector graphics markup language.

    An example SVG, a blue rectangle.

    Tabular data

    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.

    How I chose to spend my money
    Purchase Location Date Evaluation Cost (€)
    Haircut Hairdresser Great idea 30
    Lasagna Restaurant Regrets 18
    Shoes Shoeshop Big regrets 65
    Toothpaste Supermarket Good 5
    Total 118

    Forms

    Interactive forms

    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.

    Form field label

    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.

    Form control

    The following form includes examples of the input element, including it’s various input types.

    A control that is not displayed but whose value is submitted to the server with the rest of the form. There is an example here, but it is hidden!

    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.

    A push button with no default behaviour.

    Buttons

    The following form includes examples of the button element, including it’s various input types.

    Note: This form doesn’t actually do anything.

    A button that submits the form.

    A button that resets the contents of the form to default values.

    A push button with no default behaviour.

    Select list

    The select element represents a control for selecting amongst a set of options.

    Data list

    The datalist element represents a set of option elements that represent predefined options for other controls.

    Option group

    The optgroup element represents a group of option elements with a common label.

    Note: This form doesn’t actually do anything.

    Which course would you like to watch today?

    Option

    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.

    Multi-line text

    The textarea element represents a multiline plain text edit control.


    Output

    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:

    : +

    : =

    : 42

    Note: This interactive example requires JavaScript.

    Progress

    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:

    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:

    Scalar measures

    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.

    Form control groups

    The fieldset element represents a set of form controls grouped together, optionally with a caption, represented by the legend element.

    Display

    Interactive elements

    Details disclosure

    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

    Dialog boxes

    The dialog element represents a dialog box or pop-up box. A dialog can be either non-modal or modal.

    Non-modal dialogs

    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.

    An open dialog. Press "Close" to dismiss this dialog.

    When a modal dialog is open, only the content within the dialog can be interacted with.

    Note: This interactive example requires JavaScript.

    An open modal dialog. Press "Close" or the Esc key to dismiss this dialog.

    Scripting

    Dynamic scripts

    The 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.

    The noscript element can be used to show content only if scripting is disabled.

    Content template

    The template element is used to declare fragments of HTML that can be cloned and inserted in the document by script.

    Web component slots

    The slot element represents a placeholder inside a web component.

    Canvas

    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.

    An example of the canvas element, a blue rectangle.