Content

Content is the plain HTML that fills a page's sections: text, lists, media and code. Each element below is covered here, what it is and how the stylesheet styles it. For the main, section and heading structure that holds it, see Sections.

Paragraph

A p is the unit of prose; inline, a link, strong, em, small and code sit in the run of text.

A paragraph with a link, some strong and emphasised words, and small print. Inline code sits in the flow.

<p>
  A paragraph with a <a href="#">link</a>,
  some <strong>strong</strong> and
  <em>emphasised</em> words, and
  <small>small print</small>. Inline
  <code>code</code> sits in the flow.
</p>

Prose and inline elements.

Lists

Three kinds of list, each flowing at the same base gap as the prose around it, with markers hung in the margin so the text stays aligned with the paragraphs.

Unordered list

A ul is a set of items whose order carries no meaning; each li is marked with a bullet.

Unordered one
Unordered two
Unordered three

<ul>
  <li>Unordered one</li>
  <li>Unordered two</li>
  <li>Unordered three</li>
</ul>

Items in no particular order.

Ordered list

An ol is a sequence where the order matters; each li is numbered for you.

Ordered one
Ordered two
Ordered three

<ol>
  <li>Ordered one</li>
  <li>Ordered two</li>
  <li>Ordered three</li>
</ol>

A numbered sequence.

Definition list

A dl pairs terms with descriptions: each dt names something and the dd after it describes it.

HTML: The structure of the page.
CSS: How the page looks.
Stylesheet: Semantic HTML, styled.

<dl>
  <dt>HTML</dt>
  <dd>The structure of the page.</dd>
  <dt>CSS</dt>
  <dd>How the page looks.</dd>
</dl>

Terms paired with their descriptions.

Image

An img displays a picture, flowing in the content like any block. Give it an alt description; wrap it in a figure when it needs a caption.

<img src="chart.png" alt="Quarterly revenue">

A plain image with its alt text.

Quote

A blockquote sets a passage off from the surrounding prose, flowing at the same base gap with a rule down its side.

Make the simple things simple, and the complex things possible.

<blockquote>
  Make the simple things simple,
  and the complex things possible.
</blockquote>

A quote set off from the prose.

Code

Inline code sits in the run of text; a pre holds a fuller sample as a dark block, and a figure can caption one.

function greet(name) {
  return `Hello, ${name}!`;
}

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

The pre and code markup.

Figure

A figure is a self-contained block referenced from the flow: an image, a code listing, a diagram, a demo. Its optional figcaption is tied to it, sitting tight beneath at a fixed distance, apart from the flow rhythm around it. The code blocks above are figures too; the element is general, so it captions any block. Here it wraps an image.

<figure>
  <img src="chart.png" alt="Quarterly revenue">
  <figcaption>Quarterly revenue</figcaption>
</figure>

The figure and figcaption markup.