Text Formatting

HTML has several tags for formatting text inline, and it's worth knowing which ones carry meaning versus which ones are purely visual.

Bold and emphasis

<p><strong>Warning:</strong> this action cannot be undone.</p>
<p>You <em>really</em> should read the docs first.</p>

<strong> marks text as important — browsers render it bold by default, but the meaning ("this matters") is what screen readers announce, not just the boldness. <em> marks emphasis (like a word you'd stress when speaking aloud) and renders as italic.

There are also purely visual equivalents, <b> and <i>, which just apply bold/italic styling with no added meaning. Prefer <strong> and <em> when the text genuinely is important or emphasized; reach for <b>/<i> only for cases like a keyword or a ship's name where there's no semantic weight, just a stylistic convention.

Other common inline tags

<p>Use the <code>fetch()</code> function to make a request.</p>
<p>Water boils at 100<sup>°C</sup> at sea level.</p>
<p>The company's revenue was <del>$2M</del> <ins>$2.4M</ins> last quarter.</p>
<p><mark>This part</mark> is highlighted for attention.</p>

• <code> — marks inline code or a technical term.
• <sup> / <sub> — superscript and subscript.
• <del> / <ins> — deleted and inserted text, useful for showing edits.
• <mark> — highlights text, like a highlighter pen.

Quotes

<blockquote>
  <p>The best way to predict the future is to invent it.</p>
</blockquote>

<p>As Alan Kay put it, <q>the best way to predict the future is to invent it</q>.</p>

<blockquote> is for a longer, standalone quotation (often indented by browsers by default). <q> is for a short, inline quotation — browsers typically add quotation marks around it automatically.

The theme so far

Notice the pattern across every tag in this lesson: HTML asks what is this text? (important, emphasized, code, a quotation) rather than how should this look? Visual styling is CSS's job — HTML's job is to describe meaning that both browsers and assistive technology can rely on.