Text formatting and meaning

Headings and paragraphs separate large pieces of content. Within a paragraph, smaller elements can identify an important warning, spoken emphasis or code. Ask why the words are special before choosing a tag.

Importance and emphasis

strong identifies importance, seriousness or urgency. em indicates stress emphasis. Browsers usually render them in bold and italics respectively, but their meanings are the main distinction:

<p><strong>Register in advance.</strong> Please attend <em>in person</em>.</p>

The first sentence is an important instruction; “in person” is the emphasis. b can draw attention without extra importance, such as a keyword. i can identify text of a different nature, such as a technical term. They are not exact semantic substitutes for strong and em. Pure decoration belongs in CSS.

Highlights and code

mark highlights text relevant in the current context, such as a search match. code identifies computer code, commonly shown in a monospace font:

<p>Search result: weekend <mark>reading</mark> club.</p>
<p>A paragraph uses <code>&lt;p&gt;</code>.</p>

code does not disable HTML parsing: escape brackets with character references. For multiple lines with preserved whitespace, nest code inside pre, meaning preformatted text:

<pre><code>&lt;h1&gt;My page&lt;/h1&gt;
&lt;p&gt;My introduction.&lt;/p&gt;</code></pre>

Unlike a normal paragraph, pre preserves spaces and line breaks. Extra indentation may therefore become visible. In the Lab, compare an event reminder with a code notebook. Edit the strong boundaries and the line breaks in pre. Default appearance helps you observe, but meaning should guide your element choice.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Leaflet Club</title>
</head>
<body>
  <h1>Reading reminder</h1>
  <p><strong>Register in advance.</strong> Please attend <em>in person</em>.</p>
  <p>Search: weekend <mark>reading</mark> club.</p>
</body>
</html>