Skip to content

Instantly share code, notes, and snippets.

@wong-justin

wong-justin/Permitted content and nesting rules for HTML elements.md

Last active October 6, 2024 17:26
Show Gist options
  • Save wong-justin/fdf839cbae6550ca2454c2a503a148f8 to your computer and use it in GitHub Desktop.
Save wong-justin/fdf839cbae6550ca2454c2a503a148f8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Permitted content and nesting rules for HTML elements.md

Permitted content and nesting rules for HTML elements

element permitted content
<a> transparent, except that no descendant may be interactive content or an <a> element, and no descendant may have a specified tabindex attribute.
<abbr> phrasing content
<acronym>
<address> flow content, but with no nested <address> element, no heading content (<hgroup>, <h1>-<h6>), no sectioning content (<article>, <aside>, <section>, <nav>), and no <header> or <footer> element.
<area> None; it is a void element.
<article> flow content.
<aside> flow content.
<audio> If the element has a src attribute: zero or more <track> elements followed by transparent content that contains no <audio> or <video> media elements. Else: zero or more <source> elements followed by zero or more <track> elements followed by transparent content that contains no <audio> or <video> media elements.
<b> phrasing content.
<base> None; it is a void element.
<bdi> phrasing content.
<bdo> phrasing content.
<big>
<blockquote> flow content.
<body> flow content.
<br> None; it is a void element.
<button> phrasing content but there must be no interactive content
<canvas> transparent but with no interactive content descendants except for <a> elements, <button> elements, <input> elements whose type attribute is checkbox, radio, or button.
<caption> flow content.
<center>
<cite> phrasing content.
<code> phrasing content.
<col> None; it is a void element.
<colgroup> If the span attribute is present: none. If the attribute is not present: zero or more <col> element
<data> phrasing content.
<datalist> Either phrasing content or zero or more <option> elements.
<dd> flow content.
<del> transparent.
<details> One <summary> element followed by flow content.
<dfn> phrasing content, but no <dfn> element must be a descendant.
<dialog> flow content
<dir>
<div> flow content. Or (in WHATWG HTML): If the parent is a <dl> element: one or more <dt> elements followed by one or more <dd> elements, optionally intermixed with <script> and <template> elements.
<dl> Either: Zero or more groups each consisting of one or more <dt> elements followed by one or more <dd> elements, optionally intermixed with <script> and <template> elements. Or: (in WHATWG HTML, W3C HTML 5.2 and later) One or more <div> elements, optionally intermixed with <script> and <template> elements.
<dt> flow content, but with no <header>, <footer>, sectioning content or heading content descendants.
<em> phrasing content.
<embed> None; it is a void element.
<fencedframe> None.
<fieldset> An optional <legend> element, followed by flow content.
<figcaption> flow content.
<figure> A <figcaption> element, followed by flow content; or flow content followed by a <figcaption> element; or flow content.
<font>
<footer> flow content, but with no <footer> or <header> descendants.
<form> flow content, but not containing <form> elements
<frame>
<frameset>
<head> If the document is an <iframe> srcdoc document, or if title information is available from a higher level protocol (like the subject line in HTML email), zero or more elements of metadata content. Otherwise, one or more elements of metadata content where exactly one is a <title> element.
<header> flow content, but with no <header> or <footer> descendant.
<h1>-<h6> phrasing content.
<hgroup> Zero or more <p> elements, followed by one <h1>, <h2>, <h3>, <h4>, <h5>, or <h6>, followed by zero or more <p> elements.
<hr> None; it is a void element.
<html> One <head> element, followed by one <body> element.
<i> phrasing content.
<iframe> None.
<img> None; it is a void element.
<input> None; it is a void element.
<ins> transparent.
<kbd> phrasing content.
<label> phrasing content, but no descendant label elements. No labelable elements other than the labeled control are allowed.
<legend> phrasing content and headings (h1–h6 elements).
<li> flow content.
<link> None; it is a void element.
<main> flow content.
<map> Any transparent element.
<mark> phrasing content.
<marquee>
<menu> Zero or more occurrences of <li>, <script>, and <template>.
<meta> None; it is a void element.
<meter> phrasing content, but there must be no <meter> element among its descendants.
<nav> flow content.
<nobr>
<noembed>
<noframes>
<noscript> When scripting is disabled and when it is a descendant of the <head> element: in any order, zero or more <link> elements, zero or more <style> elements, and zero or more <meta> elements. When scripting is disabled and when it isn't a descendant of the <head> element: any transparent content, but no <noscript> element must be among its descendants. Otherwise: flow content or phrasing content.
<object> zero or more <param> elements, then transparent.
<ol> Zero or more <li>, <script> and <template> elements.
<optgroup> Zero or more <option> elements.
<option> Text, possibly with escaped characters (like é).
<output> phrasing content.
<p> phrasing content.
<param> None; it is a void element.
<picture> Zero or more <source> elements, followed by one <img> element, optionally intermixed with script-supporting elements.
<plaintext>
<portal>
<pre> phrasing content.
<progress> phrasing content, but there must be no <progress> element among its descendants.
<q> phrasing content.
<rb> As a child of a <ruby> element.
<rp> Text
<rt> phrasing content.
<rtc> phrasing content or <rt> elements.
<ruby> phrasing content.
<s> phrasing content.
<samp> phrasing content.
<script> Dynamic script such as text/javascript.
<search> flow content.
<section> flow content.
<select> Zero or more <option>, <optgroup> or <hr> elements.
<slot> transparent
<small> phrasing content
<source> None; it is a void element.
<span> phrasing content.
<strike>
<strong> phrasing content.
<style> Text content matching the type attribute, that is text/css.
<sub> phrasing content.
<summary> phrasing content, optionally intermixed with heading content
<sup> phrasing content.
<table> In this order: an optional <caption> element; zero or more <colgroup> elements; an optional <thead> element; either one of the following, zero or more <tbody> elements, or one or more <tr> elements; and an optional <tfoot> element
<tbody> Zero or more <tr> elements.
<td> flow content.
<template> No restrictions
<textarea> Text
<tfoot> Zero or more <tr> elements.
<th> flow content, but with no header, footer, sectioning content, or heading content descendants.
<thead> Zero or more <tr> elements.
<time> phrasing content.
<title> Text that is not inter-element whitespace.
<tr> Zero or more <td> and/or <th> elements; script-supporting elements (<script> and <template>) are also allowed.
<track> None; it is a void element.
<tt> phrasing content.
<u> phrasing content.
<ul> Zero or more <li>, <script> and <template> elements.
<var> phrasing content.
<video> If the element has a src attribute: zero or more <track> elements, followed by transparent content that contains no media elements–that is no <audio> or <video>. Else: zero or more <source> elements, followed by zero or more <track> elements, followed by transparent content that contains no media elements–that is no <audio> or <video>.
<wbr> Empty
<xmp>

Content categories

Metadata content

element condition, if any
<base>
<link>
<meta>
<noscript>
<script>
<style>
<title>

Flow content

element condition, if any
<a>
<abbr>
<address>
<article>
<aside>
<audio>
<b>
<bdo>
<bdi>
<blockquote>
<br>
<button>
<canvas>
<cite>
<code>
<data>
<datalist>
<del>
<details>
<dfn>
<dialog>
<div>
<dl>
<em>
<embed>
<fieldset>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hgroup>
<hr>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<main>
<map>
<mark>
<math>
<menu>
<meter>
<nav>
<noscript>
<object>
<ol>
<output>
<p>
<picture>
<pre>
<progress>
<q>
<ruby>
<s>
<samp>
<search>
<script>
<section>
<select>
<slot>
<small>
<span>
<strong>
<sub>
<sup>
<svg>
<table>
<template>
<textarea>
<time>
<u>
<ul>
<var>
<video>
<wbr>
plain text
<area> if it is a descendant of a <map> element
<link> if the itemprop attribute is present
<meta> if the itemprop attribute is present

Sectioning content

element condition, if any
<article>
<aside>
<nav>
<section>

Heading content

element condition, if any
<h1>-<h6>
<hgroup>

Phrasing content

element condition, if any
<abbr>
<audio>
<b>
<bdi>
<bdo>
<br>
<button>
<canvas>
<cite>
<code>
<data>
<datalist>
<dfn>
<em>
<embed>
<i>
<iframe>
<img>
<input>
<kbd>
<label>
<mark>
<math>
<meter>
<noscript>
<object>
<output>
<picture>
<progress>
<q>
<ruby>
<s>
<samp>
<script>
<select>
<slot>
<small>
<span>
<strong>
<sub>
<sup>
<svg>
<template>
<textarea>
<time>
<u>
<var>
<video>
<wbr>
plain text including more than just whitespace characters
<a> if it contains only phrasing content
<area> if it is a descendant of a <map> element
<del> if it contains only phrasing content
<ins> if it contains only phrasing content
<link> if the itemprop attribute is present
<map> if it contains only phrasing content
<meta> if the itemprop attribute is present

Embedded content

element condition, if any
<audio>
<canvas>
<embed>
<iframe>
<img>
<math>
<object>
<picture>
<svg>
<video>

Interactive content

element condition, if any
<button>
<details>
<embed>
<label>
<select>
<textarea>
<a> if the href attribute is present
<audio> if the controls attribute is present
<img> if the usemap attribute is present
<input> if the type attribute is not in the hidden state
<object> if the usemap attribute is present
<video> if the controls attribute is present

Palpable content

element condition, if any
<a>
<abbr>
<address>
<article>
<aside>
<b>
<bdi>
<bdo>
<blockquote>
<button>
<canvas>
<cite>
<code>
<data>
<del>
<details>
<dfn>
<div>
<em>
<embed>
<fieldset>
<footer>
<figure>
<form>
<iframe>
<img>
<ins>
<kbd>
<label>
<main>
<map>
<mark>
<math> from MathML
<meter>
<nav>
<object>
<p>
<picture>
<pre>
<progress>
<q>
<ruby>
<s>
<samp>
<search>
<section>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<svg> from SVG
<table>
<textarea>
<time>
<u>
<var>
<video>
Autonomous custom elements
text that is not inter-element whitespace
<audio> if the controls attribute is present
<dl> if the element's children include at least one name-value group
<input> if the type attribute is not in the hidden state
<ol> if it's children include at least one <li> element
<ul> if it's children include at least one <li> element

Form-associated content

element condition, if any
<button>
<fieldset>
<input>
<label>
<meter>
<object>
<output>
<progress>
<select>
<textarea>

Listed form subcategory

element
<button>
<fieldset>
<input>
<object>
<output>
<select>
<textarea>

Labelable form subcategory

element
<button>
<input>
<meter>
<output>
<progress>
<select>
<textarea>

Submittable form subcategory

element
<button>
<input>
<object>
<select>
<textarea>

Resettable form subcategory

element
<input>
<output>
<select>
<textarea>

Script-supporting elements

element
<script>
<template>

Transparent content

?? Not sure, see: transparent content model

Void elements

element
<area>
<base>
<br>
<col>
<embed>
<hr>
<img>
<input>
<link>
<meta>
<param>
<source>
<track>
<wbr>

Deprecated elements

element
<acronym>
<big>
<center>
<content>
<dir>
<font>
<frame>
<frameset>
<image>
<marquee>
<menuitem>
<nobr>
<noembed>
<noframes>
<param>
<plaintext>
<rb>
<rtc>
<shadow>
<strike>
<tt>
<xmp>

Whitespace

according to HTML standard:

character abbreviation
U+0009 TAB
U+000A LF
U+000C FF
U+000D CR
U+0020 SPACE

according to ECMAScript:

character abbreviation
U+0009 CHARACTER TABULATION TAB
U+000B LINE TABULATION VT
U+000C FORM FEED FF
U+0020 SPACE SP
U+00A0 NO-BREAK SPACE NBSP
U+FEFF ZERO WIDTH NO-BREAK SPACE ZWNBSP
any other Unicode "Space_Separator" code points USP

Sources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment