HTML elements without style (CSS) applied to them

Created by Jon Henshaw

HTML looks and functions well by default without the need for CSS or JavaScript. This page includes the majority of HTML elements, including semantic HTML elements, that have a unique visual style or interaction. Web developers should consider writing custom CSS instead of relying on bloated libraries where a significant portion of CSS code isn't used. Click the "Show HTML" button to reveal the tags. Note: Not every HTML element and attribute is visible, and some overlap. You are encouraged to click on the heading link to learn more from Mozilla's MDN Web Docs.

Bookmark (aka Jump) links to examples ⬇

Details

This is the summary for the <details> element. Click or tap to reveal its details.

These are the details for the summary, and an example of how HTML can be interactive without using CSS and JavaScript.

Progress Bar

Downloading progress: 32%

Meter

75% of tickets have been sold:

Mark

The <mark> element highlights text.

Dialog Box

Click Show HTML button and then View Dialog Box button to display dialog box with HTML elements.

Audio

An MP3 using the <audio> element and the <controls> attribute.

Video

An MP4 using the <video> element and the <controls> attribute.

Forms

Table

What an unstyled <table> looks like:

Heading	Heading	Heading	Heading	Heading	Heading
Data	Data	Data	Data	Data	Data
Data	Data	Data	Data	Data	Data

Ordered List

item
item
item

Unordered List

item
item
item

Description List

group 1: term; term; term
group 2: term; term; term

Preformatted Text

Preformatted text
  displays
    exactly
      how
        you
          save
            it in the HTML
        spaces, line breaks, and all

Small

Sometimes it's nice to comment about something on the side.

Blockquote

This is a blockquote. The only thing a blockquote does is indent the text.

Superscript and Subscript

Sometimes you superscript^⬆ and other times you need subscript_⬇.

Sample Output from Computer

File not found. Press F1 to continue

Keyboard Input

Press Ctrl + C to copy text (Windows).

Press Cmd + C to copy text (Mac OS).

Definition, Inline Quote, and Citation

A coywolf is an informal term for a canid hybrid descended from coyotes, eastern wolves, gray wolves and dogs.

The <dfn> element italizes the word or phrase being defined within the sentence or paragraph. The <q> element inserts quotation marks and should have a <cite> attribute that points to the page where the quote came from.

Abbreviations and Acronyms

SEO is an acronym for search engine optimization and ATTN is an abbreviation for attention, and both use the same <abbr> element.

Strong and Emphasis

Sometimes you want your text to be strong and other times you want to put emphasis on it.