Lesson 29 +10 XP

Content Categories

Every HTML element belongs to one or more "content categories." These decide where an element can go and what it can contain.

Think of it like rules for Legos: some blocks only connect in certain places.

Metadata content: info about the page, not shown. Lives in the head: <head>, <title>, <meta>, <link>, <style>, <base>.
Flow content: most things you put in a body. Paragraphs, divs, images, headings, forms, and more.
Sectioning content: elements that define sections of the page: <article>, <aside>, <nav>, <section>.
Heading content: the headings: <h1> to <h6> (and <hgroup>).
Phrasing content: the small text-level bits inside paragraphs: <span>, <em>, <strong>, <a>, <img>, <code>.
Embedded content: things embedded from elsewhere: <img>, <video>, <audio>, <iframe>, <canvas>.
Interactive content: things you can interact with: <a>, <button>, <input>, <select>, <details>.
Palpable content: content you can actually see/experience (non-empty content).

It helps you write valid HTML:

Phrasing content (like <span>) can't hold sectioning content (like <section>).
A <p> shouldn't contain a <div> (a <div> is flow content, not phrasing).

<!-- Invalid: div is not phrasing content -->
<p><div>Oops</div></p>

Some elements are "transparent": they accept whatever their parent accepts. <a>, <ins>, <del>, and <span> work this way.

Categories: metadata, flow, sectioning, heading, phrasing, embedded, interactive, palpable.
They decide what can go where.
Phrasing content stays inside text; sectioning content makes sections.
Transparent elements take whatever their parent allows.