HTML: The 16 Content Categories and Their Elements
Published on January 20, 2021 (↻ May 27, 2021), filed under Web Development (RSS feed).
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
- Metadata Content
- Flow Content
- Sectioning Content
- Heading Content
- Phrasing Content
- Embedded Content
- Interactive Content
- Sectioning Roots
- Form-Associated Elements
- Listed Elements
- Submittable Elements
- Resettable Elements
- Autocapitalize-Inheriting Elements
- Labelable Elements
- Palpable Content
- Script-Supporting Elements
Metadata Content
baselinkmetanoscriptscriptstyletemplatetitle
Flow Content
aabbraddressarea(under circumstances)articleasideaudiobbdibdoblockquotebrbuttoncanvascitecodedatadatedatalistdeldetailsdfndialogdivdlemembedfieldsetfigurefooterformh1h2h3h4h5h6headerhgrouphriiframeimginputinskbdkeygenlabellink(under circumstances)main(under circumstances)mapmarkmath(MathML)menumeta(under circumstances)meternavnoscriptobjectoloutputppicturepreprogressqrubyssampscriptsectionselectslotsmallspanstrongsubsupsvg(SVG)tabletemplatetextareatimeuulvarvideowbr- autonomous custom elements
- text content (under circumstances)
Sectioning Content
articleasidenavsection
Heading Content
h1h2h3h4h5h6hgroup
Phrasing Content
a(under circumstances)abbrarea(under circumstances)audiobbdibdobrbuttoncanvascitecodedatadatedatalistdel(under circumstances)dfnemembediiframeimginputins(under circumstances)kbdkeygenlabellink(under circumstances)map(under circumstances)markmath(MathML)meta(under circumstances)meternoscriptobjectoutputpictureprogressqrubyssampscriptselectslotsmallspanstrongsubsupsvg(SVG)templatetextareatimeuvarvideowbr- autonomous custom elements
- text content (under circumstances)
Embedded Content
audiocanvasembediframeimgmath(MathML)objectpicturesvg(SVG)video
Interactive Content
a(under circumstances)audio(under circumstances)buttondetailsembediframeimg(under circumstances)input(under circumstances)keygenlabelobject(under circumstances)selecttextareavideo(under circumstances)
There are also the following categories:
Sectioning Roots
blockquotebodydetailsdialogfieldsetfiguretd
Form-Associated Elements
buttonfieldsetinputlabelobjectoutputselecttextareaimg- form-associated custom elements
Listed Elements
buttonfieldsetinputobjectoutputselecttextarea- form-associated custom elements
Submittable Elements
buttoninputobjectselecttextarea- form-associated custom elements
Resettable Elements
inputoutputselecttextarea- form-associated custom elements
Autocapitalize-Inheriting Elements
buttonfieldsetinputoutputselecttextarea
Labelable Elements
buttoninputmeteroutputprogressselecttextarea- 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.
aabbraddressarticleasidebbdibdoblockquotebuttoncanvascitecodedatadetailsdfndivemembedfieldsetfigurefooterformh1h2h3h4h5h6headerhgroupiiframeimginskbdlabelmainmapmarkmath(MathML)meternavobjectoutputppreprogressqrubyssampsectionselectsmallspanstrongsubsupsvg(SVG)tabletextareatimeuvarvideo- autonomous custom elements
Script-Supporting Elements
scripttemplate
❧ 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, and I’m an engineering lead and author. I’ve worked as a technical lead for companies like Google, I’m close to W3C and WHATWG, and I write and review books for O’Reilly and Frontend Dogma. I love trying things, not only in web development, but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences.
If you have a question or suggestion about what I write, please leave a comment (if available) or a message. Thank you!
Read More
Maybe of interest to you, too:
- Next: The Internet Shedding a Free-Rider Problem
- Previous: In Critical Defense of Frontend Development
- More under Web Development, or from 2021
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try WebGlossary.info—and The Web Development Glossary 3K (2023). With explanations and definitions for thousands of terms of web development, web design, and related fields, building on Wikipedia as well as MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.