Text Semantics and Entities

Introduction

Not all text is equal. HTML gives you elements that describe meaning: importance, emphasis, code, quotes, and abbreviations. This chapter covers those semantic text elements and character entities—the escape sequences you need when you want to show <, &, or other special symbols in the page.

Prerequisites

• Headings, paragraphs, and text
• Basic familiarity with inline vs block flow from earlier chapters

Importance and Emphasis

<strong>

Marks content with strong importance:

<p><strong>Warning:</strong> Do not delete production data without a backup.</p>

Browsers usually render it bold. The point is importance, not appearance.

<em>

Marks emphasized text, often read with stress by screen readers:

<p>I <em>really</em> need the report today.</p>

You can nest them when both apply:

<p><strong><em>Critical:</em></strong> The server is down.</p>

<strong> vs <b>, <em> vs <i>

Legacy presentational tags still exist:

<b>Bold look</b>
<i>Italic look</i>

Prefer <strong> and <em> for new content. Use <b>/<i> only when you want visual style without semantic meaning (rare in modern pages).

Highlighting and Fine Print

<mark>

Highlights text for reference, search results, or notes:

<p>The keyword <mark>semantic HTML</mark> appears here.</p>

<small>

Side comments, disclaimers, or legal fine print:

<p>
  Price shown is before tax.
  <small>Terms apply. Offer ends June 30.</small>
</p>

Do not use <small> just to make normal text tiny—that is a CSS job.

Code and Preformatted Text

<code>

Inline code snippets:

<p>
  Use the <code>&lt;title&gt;</code> element inside
  <code>&lt;head&gt;</code>.
</p>

<pre>

Preserves spaces and line breaks—ideal for multi-line code or ASCII art:

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

Combine with <code> inside <pre> for code blocks:

<pre><code>const total = price * quantity;</code></pre>

Syntax highlighting comes from CSS or JavaScript libraries later; HTML only marks the content as code.

Quotations

Block quote: <blockquote>

For a standalone quotation:

<blockquote>
  <p>
    The web is for everyone. Structure and accessibility are not optional extras.
  </p>
</blockquote>

Optional cite attribute points to the source URL:

<blockquote cite="https://www.w3.org/">
  <p>Web for All.</p>
</blockquote>

Inline quote: <q>

Short quotation inside a sentence:

<p>
  As the spec says, <q>user agents must implement HTML.</q>
</p>

Browsers often add quotation marks around <q> content automatically.

Abbreviations

<abbr> marks an abbreviation with optional expansion:

<p>
  We use <abbr title="HyperText Markup Language">HTML</abbr>
  for page structure.
</p>

The title attribute shows a tooltip on hover in many browsers. Do not rely on title alone for critical information—screen reader support varies.

Why Character Entities Exist

HTML uses < and > to start and end tags. If you write raw angle brackets in text, the parser may get confused:

<!-- Risky -->
<p>Use <p> for paragraphs.</p>

Character entities escape special characters:

Safe example:

<p>
  To show a paragraph tag, write
  <code>&lt;p&gt;Hello&lt;/p&gt;</code>.
</p>

Order matters for &

Write & before other entities when you mean a literal ampersand in tricky cases:

<p>AT&amp;T uses entities correctly.</p>

Showing Code in Tutorial Pages

When your page teaches HTML itself, entities are essential:

<article>
  <h1>Escape Examples</h1>
  <p>A link looks like: <code>&lt;a href="/"&gt;Home&lt;/a&gt;</code></p>
  <p>Copyright <span>&copy;</span> 2026 My Site</p>
</article>

UTF-8 pages can often paste real Unicode symbols (©, →, 你好) directly. Entities remain useful for:

• characters that are awkward on some keyboards
• clarity in teaching materials
• consistency in generated output

  — Use Sparingly

Non-breaking space prevents a line break at that position:

<p>100&nbsp;km</p>

Good for:

• units glued to numbers
• preventing awkward wraps in short phrases

Bad for:

• indenting paragraphs
• creating large horizontal gaps

Use CSS for layout spacing, not stacks of  .

Putting It Together

FAQ

Can I use Unicode instead of entities?

Often yes, with <meta charset="UTF-8">. Entities are still valuable for teaching and for a few escape cases in HTML syntax examples.

Is <b> ever correct?

Yes, when you need bold without added meaning—for example, a product name in a list where emphasis is not intended. Semantic elements are still the default choice.

Does <pre> allow HTML inside?

Text inside <pre> is usually literal. If you need highlighted code on a real site, use a dedicated highlighter or escape < as <.

What is the difference between <blockquote> and <q>?

<blockquote> is a block-level quotation; <q> is inline inside a sentence.

What comes next?

Links and navigation — href, relative URLs, downloads, anchors, and <nav>.