• Chapter 4 — Text Block Elements
  • 4.1 — <p> — Paragraph
  • 4.2 — <div> — Generic Block Container
  • 4.3 — <ul> — Unordered List
  • 4.4 — <ol> — Ordered List
  • 4.5 — <li> — List Item
  • 4.6 — <menu> — Toolbar Menu
  • 4.7 — <dl>, <dt>, <dd> — Description List
  • 4.8 — <figure> and <figcaption>
  • 4.9 — <blockquote> — Block Quotation
    • cite
  • 4.10 — <pre> — Preformatted Text
  • 4.11 — <hr> — Thematic Break

§Chapter 4 — Text Block Elements

Block-level text elements organise content into paragraphs, lists, quotations, code blocks, and thematic divisions. They form the backbone of written content.

§4.1 — <p> — Paragraph

The most fundamental block of text. Represents a paragraph of content.

No element-specific attributes.

Auto-close behaviour: A <p> tag is automatically closed by the parser when followed by: <address>, <article>, <aside>, <blockquote>, <details>, <dialog>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>–<h6>, <header>, <hgroup>, <hr>, <main>, <menu>, <nav>, <ol>, <p>, <pre>, <search>, <section>, <table>, or <ul>.

<p>This is a paragraph of text.</p>
<p>This is another paragraph.</p>

Nesting rules: Contains only phrasing content (inline elements and text). Cannot contain block-level elements (<div>, <ul>, <table>, etc.).

§4.2 — <div> — Generic Block Container

A generic block-level container with no semantic meaning. Use only when no semantic element is appropriate.

No element-specific attributes.

<div class="card">
  <h2>Card Title</h2>
  <p>Card content.</p>
</div>

§4.3 — <ul> — Unordered List

A list of items where order is not significant. Renders with bullet points by default.

No element-specific attributes (the type attribute is obsolete — use CSS list-style-type).

Nesting rules: Contains only <li> elements and script-supporting elements (<script>, <template>).

<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
</ul>

§4.4 — <ol> — Ordered List

A list of items where order is meaningful. Renders with numbers by default.

Element-specific attributes:

<!-- Countdown from 5 -->
<ol reversed start="5">
  <li>Prepare</li>
  <li>Configure</li>
  <li>Test</li>
  <li>Deploy</li>
  <li>Monitor</li>
</ol>

<!-- Alphabetical list starting at 'c' -->
<ol type="a" start="3">
  <li>Third item (c)</li>
  <li>Fourth item (d)</li>
</ol>

Nesting rules: Same as <ul> — contains only <li> elements.

§4.5 — <li> — List Item

An item within <ul>, <ol>, or <menu>.

Element-specific attributes:

<ol>
  <li>First</li>
  <li value="5">This is item 5</li>
  <li>This is item 6</li>
</ol>

Nesting rules: Must be a direct child of <ul>, <ol>, or <menu>. Contains flow content.

§4.6 — <menu> — Toolbar Menu

Represents a toolbar of commands. Semantically equivalent to <ul> but signals the items are interactive commands rather than a list of content.

No element-specific attributes (the type and label attributes are obsolete).

Use for: Icon toolbars, command groups, custom context menus.

<menu>
  <li><button type="button">Copy</button></li>
  <li><button type="button">Paste</button></li>
  <li><button type="button">Delete</button></li>
</menu>

§4.7 — <dl>, <dt>, <dd> — Description List

A description list contains term-description pairs (or name-value pairs).

All three elements: No element-specific attributes — globals only.

Content model of <dl>:

• Zero or more groups, each consisting of one or more <dt> followed by one or more <dd>
• Groups can be wrapped in <div> for styling (permitted since HTML Living Standard)

<!-- Basic definition list -->
<dl>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets — a language for describing presentation</dd>

  <dt>HTML</dt>
  <dd>HyperText Markup Language — the structure of web pages</dd>

  <!-- One term, multiple definitions -->
  <dt>JavaScript</dt>
  <dd>A programming language for web browsers</dd>
  <dd>Also runs server-side via Node.js</dd>

  <!-- Multiple terms, one definition -->
  <dt>USA</dt>
  <dt>United States</dt>
  <dt>United States of America</dt>
  <dd>A country in North America</dd>
</dl>

<!-- dl with div wrapping (valid for styling) -->
<dl>
  <div>
    <dt>Name</dt>
    <dd>Alice Smith</dd>
  </div>
  <div>
    <dt>Role</dt>
    <dd>Senior Engineer</dd>
  </div>
</dl>

§4.8 — <figure> and <figcaption>

<figure> represents self-contained content (image, chart, code block, video) that is referenced from the main content but could be moved without affecting the flow.

<figcaption> provides the caption or legend for a <figure>.

Both elements: No element-specific attributes — globals only.

<figure>
  <img src="css-grid-diagram.png" alt="CSS Grid: a 3x3 grid with areas labelled header, sidebar, main, and footer">
  <figcaption>Figure 1: CSS Grid layout areas for a typical page structure.</figcaption>
</figure>

<figure>
  <pre><code>
.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}
  </code></pre>
  <figcaption>Listing 3: A two-column grid container.</figcaption>
</figure>

<figure>
  <blockquote>
    <p>The Web is designed to work for all people, whatever their hardware, software, language, location, or ability.</p>
  </blockquote>
  <figcaption>— Tim Berners-Lee</figcaption>
</figure>

Nesting rules: <figcaption> must be the first or last child of <figure>. <figure> contains flow content.

§4.9 — <blockquote> — Block Quotation

Represents content quoted from another source.

Element-specific attribute:

§cite

A URL pointing to the original source. Not displayed by browsers — intended for private use (server scripts, etc.). For visible attribution, place it outside the <blockquote> in a <cite> element or <figcaption>.

<!-- Basic blockquote -->
<blockquote cite="https://w3.org/TR/html/">
  <p>HTML is the core foundational standard being worked on by the WHATWG community.</p>
</blockquote>

<!-- With visible attribution using figure -->
<figure>
  <blockquote cite="https://example.com/article">
    <p>The Web is for everyone.</p>
  </blockquote>
  <figcaption>— Tim Berners-Lee, <cite><a href="https://example.com/article">World Wide Web Foundation</a></cite></figcaption>
</figure>

Rule: Attribution must be placed outside the <blockquote> — inside a <footer> or <figcaption>.

§4.10 — <pre> — Preformatted Text

Represents preformatted text where whitespace is significant — spaces, tabs, and line breaks are preserved exactly as written.

No element-specific attributes (the width attribute is obsolete).

Use for: Code samples, ASCII art, computer output, poetry with significant whitespace.

<pre><code>
function greet(name) {
  return `Hello, ${name}!`;
}
</code></pre>

Important: HTML entities still work inside <pre>. Use < for <, & for &.

§4.11 — <hr> — Thematic Break

Represents a thematic break between paragraph-level content — a scene change, a transition to a new topic, a dividing line in content.

No element-specific attributes (all presentational attributes are obsolete — use CSS for appearance).

Implicit ARIA role: separator

<p>End of first section content.</p>

<hr>

<p>Beginning of second section content.</p>

Special 2026 context: <hr> can also appear directly inside <select> as a visual separator between options:

<select name="food">
  <option>Apple</option>
  <option>Orange</option>
  <hr>
  <option>Broccoli</option>
  <option>Pepper</option>
</select>

Tags: #html #vdsology #webdevelopment #vdsologyhtml #html5 #htmlreference #htmlreference2026