Skip to content

Instantly share code, notes, and snippets.

@qnighy
Created April 26, 2022 13:34
Show Gist options
  • Save qnighy/99f268251813c4ef81961ca4dd47e49c to your computer and use it in GitHub Desktop.
Save qnighy/99f268251813c4ef81961ca4dd47e49c to your computer and use it in GitHub Desktop.
HTML elements in content model Venn diagram

https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content

  • Node
    • Flow content (a, abbr, address, area (if it is a descendant of a map element), article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, data, 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, label, link (if it is allowed in the body), main (if it is a hierarchically correct main element), map, mark, MathML math, menu, meta (if the itemprop attribute is present), 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)
      • Sectioning (article, aside, nav, section)
      • Heading (h1, h2, h3, h4, h5, h6, hgroup)
      • Phrasing (a, abbr, area (if it is a descendant of a map element), audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, label, link (if it is allowed in the body), map, mark, MathML math, meta (if the itemprop attribute is present), 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)
        • Phrasing embedded (audio, canvas, embed, iframe, img, MathML math, object, picture, SVG svg, video)
          • Phrasing, embedded, and interactive (audio, embed, iframe, img (if the usemap attribute is present), video (if the controls attribute is present))
          • Phrasig and embedded, but not interactive (canvas, img (if the usemap attribute is not present), MathML math, object, picture, SVG svg)
        • Phrasing meta (link (if it is allowed in the body), noscript, script, template)
        • Phrasing non-embedded non-meta (a, abbr, area (if it is a descendant of a map element), b, bdi, bdo, br, button, cite, code, data, datalist, del, dfn, em, i, input, ins, kbd, label, map, mark, meta (if the itemprop attribute is present), meter, output, progress, q, ruby, s, samp, select, slot, small, span, strong, sub, sup, textarea, time, u, var, wbr, autonomous custom elements, text)
          • Phrasing non-embedded non-meta, but interactive (a (if the href attribute is present), button, input (if the type attribute is not in the Hidden state), label, select, textarea)
          • Phrasing non-embedded non-meta non-interactive (a (if the href attribute is not present), abbr, area (if it is a descendant of a map element), b, bdi, br, cite, code, data, datalist, del, dfn, em, i, ins, kbd, link (if it is allowed in the body), map, mark, meta (if the itemprop attribute is present), meter, noscript, output, progress, q, ruby, s, samp, script, slot, small, span, strong, sub, sup, template, time, u, var, wbr, autonomous custom elements, text)
      • Flow but not phrasing, heading, nor sectioning (address, blockquote, details, dialog, div, dl, fieldset, figure, footer, form, header, hr, main (if it is a hierarchically correct main element), menu, ol, p, pre, table, ul)
        • Flow but not phrasing, heading, nor sectioning, though interactive (details)
        • Flow but not phrasing, heading, sectioning, nor interactive (address, blockquote, dialog, div, dl, fieldset, figure, footer, form, header, hr, main (if it is a hierarchically correct main element), menu, ol, p, pre, table, ul)
    • Non-flow content
      • Non-flow meta content (base, link (if it is not allowed in the body), meta (if the itemprop attribute is not present), style, title)
      • Non-flow non-meta content
        • Document structure: html, head, body
        • Related to table: caption, colgroup, col, tbody, thead, tfoot, tr, td, th
        • Related to figure: figcaption
        • Related to ruby: rt, rp
        • Related to picture and img: source
        • Related to audio and video: track
        • Related to select: optgroup, option
        • Related to form: legend
        • Related to details: summary

See also https://html.spec.whatwg.org/multipage/obsolete.html#non-conforming-features for obsolte elements

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