HTML: The 16 Content Categories and Their Elements

Published on January 20, 2021 (↻ September 5, 2024), filed under Development (RSS feed for all categories).

Enjoying overviews like this one? Check out Rote Learning HTML & CSS, a free ebook to help memorize HTML elements and attributes, and CSS selectors and properties.

HTML puts elements into categories, so-called content categories. The specification describes these in the sections on kinds of content and element content categories.

This article serves as a boring, brief, but updated overview over the broad and overlapping categories of HTML, and which elements fall into them (without going into detail on elements with exceptions):

Contents

1. Metadata Content
2. Flow Content
3. Sectioning Content
4. Heading Content
5. Phrasing Content
6. Embedded Content
7. Interactive Content
8. Sectioning Roots
9. Form-Associated Elements
10. Listed Elements
11. Submittable Elements
12. Resettable Elements
13. Autocapitalize-Inheriting Elements
14. Labelable Elements
15. Palpable Content
16. Script-Supporting Elements

Metadata Content

• base
• link
• meta
• noscript
• script
• style
• template
• title

Flow Content

• a
• abbr
• address
• area (under circumstances)
• article
• aside
• audio
• b
• bdi
• bdo
• blockquote
• br
• button
• canvas
• cite
• code
• data
• date
• datalist
• del
• details
• dfn
• dialog
• div
• dl
• em
• embed
• fieldset
• figure
• footer
• form
• h1
• h2
• h3
• h4
• h5
• h6
• header
• hgroup
• hr
• i
• iframe
• img
• input
• ins
• kbd
• keygen
• label
• link (under circumstances)
• main (under circumstances)
• map
• mark
• math (MathML)
• menu
• meta (under circumstances)
• meter
• nav
• noscript
• object
• ol
• output
• p
• picture
• pre
• progress
• q
• ruby
• s
• samp
• script
• section
• select
• slot
• small
• span
• strong
• sub
• sup
• svg (SVG)
• table
• template
• textarea
• time
• u
• ul
• var
• video
• wbr
• autonomous custom elements
• text content (under circumstances)

Sectioning Content

• article
• aside
• nav
• section

Heading Content

• h1
• h2
• h3
• h4
• h5
• h6
• hgroup

Phrasing Content

• a (under circumstances)
• abbr
• area (under circumstances)
• audio
• b
• bdi
• bdo
• br
• button
• canvas
• cite
• code
• data
• date
• datalist
• del (under circumstances)
• dfn
• em
• embed
• i
• iframe
• img
• input
• ins (under circumstances)
• kbd
• keygen
• label
• link (under circumstances)
• map (under circumstances)
• mark
• math (MathML)
• meta (under circumstances)
• meter
• noscript
• object
• output
• picture
• progress
• q
• ruby
• s
• samp
• script
• select
• slot
• small
• span
• strong
• sub
• sup
• svg (SVG)
• template
• textarea
• time
• u
• var
• video
• wbr
• autonomous custom elements
• text content (under circumstances)

Embedded Content

• audio
• canvas
• embed
• iframe
• img
• math (MathML)
• object
• picture
• svg (SVG)
• video

Interactive Content

• a (under circumstances)
• audio (under circumstances)
• button
• details
• embed
• iframe
• img (under circumstances)
• input (under circumstances)
• keygen
• label
• object (under circumstances)
• select
• textarea
• video (under circumstances)

There are also the following categories:

Sectioning Roots

• blockquote
• body
• details
• dialog
• fieldset
• figure
• td

Form-Associated Elements

• button
• fieldset
• input
• label
• object
• output
• select
• textarea
• img
• form-associated custom elements

Listed Elements

• button
• fieldset
• input
• object
• output
• select
• textarea
• form-associated custom elements

Submittable Elements

• button
• input
• object
• select
• textarea
• form-associated custom elements

Resettable Elements

• input
• output
• select
• textarea
• form-associated custom elements

Autocapitalize-Inheriting Elements

• button
• fieldset
• input
• output
• select
• textarea

Labelable Elements

• button
• input
• meter
• output
• progress
• select
• textarea
• form-associated custom elements

Palpable Content

Per the HTML specification, “palpable content” is content that makes an element non-empty by providing either some descendant non-empty text, or something else users can hear, see, or otherwise interact with.

• a
• abbr
• address
• article
• aside
• b
• bdi
• bdo
• blockquote
• button
• canvas
• cite
• code
• data
• details
• dfn
• div
• em
• embed
• fieldset
• figure
• footer
• form
• h1
• h2
• h3
• h4
• h5
• h6
• header
• hgroup
• i
• iframe
• img
• ins
• kbd
• label
• main
• map
• mark
• math (MathML)
• meter
• nav
• object
• output
• p
• pre
• progress
• q
• ruby
• s
• samp
• section
• select
• small
• span
• strong
• sub
• sup
• svg (SVG)
• table
• textarea
• time
• u
• var
• video
• autonomous custom elements

Script-Supporting Elements

• script
• template

❧ These categories are useful, for example to identify all available as well as the semantically appropriate elements. They can also inform sorting schemes, as with an order to sort CSS selectors by.

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a frontend engineering leader and tech author/publisher. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m a contributor to several web standards, and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development (and engineering management), but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (Please be critical, interpret charitably, and give feedback.)