DocHero
Lesson 4 +10 XP

Formatting Text

Formatting Text

Words can be important, funny, loud, or tiny. HTML has a tag for every mood!

Emphasize: <em> and <strong>

  • <em>: emphasis. Reads like stressed speech: "I really want that."
  • <strong>: strong importance. Reads loudly: "I really want that!"
<p>I <em>love</em> this. It is <strong>very</strong> important.</p>

The lookalikes: <b> and <i>

  • <b>: makes text bold (but without extra meaning).
  • <i>: makes text italic (like a foreign word or a thought).
<p><b>Bold</b> and <i>italic</i> just for looks.</p>

Struck through and underlined

  • <s>: ~~struck-through~~ text (something that is no longer correct or relevant).
  • <u>: underlined text (like an old-fashioned title).
<p><s>Was $10</s> Now $5!</p>
<p><u>Important</u> title.</p>

Small print: <small>

<small> makes text smaller, like "Terms and conditions" fine print.

Highlighted: <mark>

<mark> highlights text with a marker color, like a highlighter pen.

<p>Remember to <mark>water the plants</mark>!</p>

Up and down: <sub> and <sup>

  • <sub>: subscript, small text below the line: H2O
  • <sup>: superscript, small text above the line: 23 = 8
<p>H<sub>2</sub>O and 2<sup>3</sup></p>

Code: <code>, <kbd>, <samp>, <var>

  • <code>: computer code text.
  • <kbd>: keyboard keys you should press (like "Press <kbd>Ctrl</kbd>").
  • <samp>: sample output from a computer.
  • <var>: a variable name, like x.

Quotes: <q> and <blockquote>

  • <q>: a short inline quote, browsers add quote marks automatically.
  • <blockquote>: a long quote on its own block.
<p>She said, <q>Let's go!</q></p>

<blockquote>
  This is a longer quote that gets its own block.
</blockquote>

Shortcut for titles: <abbr> and <dfn>

  • <abbr>: an abbreviation. The title attribute shows the full meaning when you hover.
  • <dfn>: marks the place a term is first defined.
<p><abbr title="World Wide Web">WWW</abbr></p>
<p><dfn>HTML</dfn> is the language of the web.</p>

Times and dates: <time> and <data>

  • <time>: tells the browser something is a date or time (computers love knowing what a date really is!).
  • <data>: links text to a value.

Edits: <del> and <ins>

  • <del>: ~~deleted text~~, something that was removed.
  • <ins>: added text, something that was inserted.

Together they can show what changed in a document!

<p>I used to eat <del>candy</del> <ins>fruit</ins> every day.</p>
<p>Party on <time datetime="2026-12-31">New Year's Eve</time>!</p>

Generic helpers: <span> and <div>

  • <span>: an inline helper with no built-in meaning. Use it to style a bit of text.
  • <div>: a block-level helper that groups stuff. More on this later!
<p>Paint this <span style="color:red">word red</span>.</p>

Direction: <bdi> and <bdo>

  • <bdi>: "bi-directional isolation". Keeps text that reads right-to-left (like Arabic) from messing up the rest.
  • <bdo>: forces text to go a certain direction.

Break opportunities: <wbr>

<wbr> tells the browser "you may break the line here if you need to." Useful for long URLs or words.

Ruby annotations

<ruby>, <rt>, and <rp> are used for East Asian pronunciation guides (like furigana in Japanese).

TL;DR

  • <em> = stress, <strong> = importance.
  • <b>/<i> = just looks.
  • <mark> = highlighter, <small> = fine print.
  • <sub>/<sup> = below/above the line.
  • <code>/<kbd>/<samp>/<var> = code words.
  • <q>/<blockquote> = quotes.
  • <abbr>/<dfn> = abbreviations/definitions.
  • <time>/<data> = real values for computers.
  • <span>/<div> = helpers.