Text Elements

Most text on the web is made up of paragraphs and headings. But within a paragraph, individual words and phrases often carry additional meaning. A warning might require emphasis. A technical term might need to be set apart. A date might need to be machine-readable.

HTML provides a set of inline elements for exactly this. Inline elements live inside block elements like <p>, wrapping a word or phrase without breaking the flow of text around them.

The problem with using <span> for everything

Before looking at specific elements, it helps to understand why they exist.

Imagine a page with no semantic inline elements. Every piece of styled text is wrapped in a <span> with a class or inline style:

<p>
  <span style="font-weight: bold">Warning:</span> do not click this button
  while the process is running. It will
  <span style="font-style: italic">cancel</span> all progress.
</p>

Visually, this looks fine. The word "Warning" is bold. The word "cancel" is italicised.

A screen reader reads this aloud as:

Warning: do not click this button while the process is running. It will cancel all progress.

The emphasis is completely lost. The reader has no way of knowing that "Warning" is urgent or that "cancel" has stressed emphasis. The visual styling exists only for sighted users.

Semantic inline elements communicate meaning to browsers, screen readers, and other tools that process your HTML. That meaning travels even when the visual styles do not.

<strong> and <b>

Both elements render as bold text by default. They have different meanings.

<strong>: importance, seriousness, or urgency

Use <strong> when the content is genuinely important, serious, or urgent. Screen readers may announce strongly-marked text with a different voice or tone.

<p>
  <strong>Warning:</strong> do not close this window while your payment is processing.
</p>

<p>
  <strong>Your account will be permanently deleted.</strong> This action cannot be undone.
</p>

The test for <strong>: if a reader missed this text, would they miss something critical? If yes, use <strong>.

<b>: drawing attention without importance

Use <b> to draw attention to text for stylistic reasons, without any claim of importance. Classic uses are product names in a catalog, keywords in a summary, or key terms in a review.

<p>
  The <b>Sony WH-1000XM5</b> headphones offer excellent noise cancellation
  for their price range.
</p>

<p>
  This article covers <b>flexbox</b>, <b>grid</b>, and <b>positioning</b>.
</p>

A screen reader will not stress <b> text. It is a visual signal only.

The wrong way

Using <b> where <strong> is needed silently strips the urgency signal from users who rely on a screen reader:

<!-- Wrong: visually bold, but carries no importance signal -->
<p><b>Warning:</b> this will delete all your data.</p>

<!-- Correct: communicates urgency to all users -->
<p><strong>Warning:</strong> this will delete all your data.</p>

The HTML specification also discourages using <b> as a general-purpose bold wrapper. If you want bold text with no semantic meaning, use CSS.

<em> and <i>

Both elements render as italic text by default. They mean different things.

<em>: stressed emphasis that changes meaning

<em> marks stress emphasis: the kind of emphasis that changes how a sentence is understood when spoken aloud. Moving it to a different word in the same sentence changes the meaning.

<p>I <em>never</em> said she stole the money.</p>
<!-- Meaning: I absolutely did not say it -->

<p>I never said <em>she</em> stole the money.</p>
<!-- Meaning: I said someone stole it, but not necessarily her -->

<p>I never said she <em>stole</em> the money.</p>
<!-- Meaning: I said something about the money, but not that she stole it -->

Screen readers may change vocal pitch or stress for <em> content. The meaning of those three sentences above is completely different based on which word is emphasised.

<i>: text set apart for a technical reason

<i> marks text that is set apart from surrounding prose, but not because it is more important. Common uses:

• A technical term being introduced for the first time
• A foreign word or phrase
• A thought, dream, or internal monologue in a narrative
• A title of a creative work (a ship name, a book, a film)

<p>
  The process is called <i>hydrolysis</i>, where water molecules break chemical bonds.
</p>

<p>
  The Latin phrase <i lang="la">carpe diem</i> translates to "seize the day".
</p>

<p>
  She stared out the window. <i>He is never coming back,</i> she thought.
</p>

Notice the lang attribute on the Latin phrase. When a word is in a different language than the surrounding text, mark it with lang so screen readers know which pronunciation engine to use.

The wrong way

Using <em> when you want italics for stylistic reasons will cause screen readers to stress text that does not need stressing:

<!-- Wrong: using em for a foreign phrase — it will be read with stress emphasis -->
<p>The greeting <em>bonjour</em> means "good day".</p>

<!-- Correct: i marks it as set apart, not stressed -->
<p>The greeting <i lang="fr">bonjour</i> means "good day".</p>

<code>

<code> marks inline code: a function name, a variable, a shell command, an HTML tag name, or any other piece of computer-readable text in the middle of prose.

<p>
  Use <code>document.getElementById()</code> to select an element by its ID attribute.
</p>

<p>
  Set the <code>display</code> property to <code>flex</code> to activate flexbox.
</p>

<p>
  Run <code>npm install</code> in your terminal before starting the development server.
</p>

Without <code>, the technical terms blend into the surrounding prose. The visual distinction (monospace font by default) helps readers scan for the technical content. The semantic distinction tells tools like documentation generators and code indexers what is and is not code.

<code> wraps inline code only. For a block of multiple lines of code, use <pre><code>...</code></pre>.

<!-- Wrong: using a span with a class — no semantic signal to tools -->
<p>Call the <span class="code">render()</span> function.</p>

<!-- Correct -->
<p>Call the <code>render()</code> function.</p>

<abbr>

<abbr> marks an abbreviation or acronym. The title attribute provides the full expansion.

<p>
  <abbr title="HyperText Markup Language">HTML</abbr> is the standard language
  for building web pages.
</p>

<p>
  The <abbr title="World Wide Web Consortium">W3C</abbr> maintains the HTML specification.
</p>

Hovering over an <abbr> element in most browsers shows the full expansion as a tooltip. Screen readers may read the expanded form to users who cannot see that tooltip. A reader who does not know what an abbreviation stands for gets the answer without leaving the page.

The title attribute on <abbr> is one of the few places where using title is genuinely useful. Most other uses of title create inaccessible tooltips that keyboard users and touch screen users cannot access.

<!-- Wrong: no expansion provided — the abbreviation is opaque -->
<p>Use the <abbr>API</abbr> to fetch data.</p>

<!-- Correct -->
<p>Use the <abbr title="Application Programming Interface">API</abbr> to fetch data.</p>

<time>

<time> marks a date, a time, or a duration. The datetime attribute gives the machine-readable version.

<p>Published on <time datetime="2024-03-15">March 15, 2024</time>.</p>

<p>The event starts at <time datetime="2024-06-01T09:00">9:00 AM on June 1</time>.</p>

<p>The process takes <time datetime="PT30M">about 30 minutes</time>.</p>

The text between the tags is what the user sees. The datetime value is what machines read.

Without <time>, a date in prose is just a string of characters. Search engines cannot reliably parse it. Browser features that add events to calendars cannot use it. Translation tools do not know to leave it unchanged. Scrapers and aggregators cannot sort articles by date.

The datetime format for dates is YYYY-MM-DD. For times: HH:MM. For datetimes: YYYY-MM-DDTHH:MM. Durations use PT followed by the duration: PT30M is 30 minutes, PT2H is 2 hours.

<!-- Wrong: just a string, machine-unreadable -->
<p>Posted March 15, 2024.</p>

<!-- Correct: machine-readable datetime attribute -->
<p>Posted <time datetime="2024-03-15">March 15, 2024</time>.</p>

<address>

<address> marks contact information for the author or owner of the nearest <article> or <body>. This is specifically for author contact details, not for arbitrary postal addresses on the page.

<article>
  <h2>How I Built a Static Site Generator</h2>
  <p>The build process involves three stages...</p>
  <address>
    Written by <a href="mailto:jane@example.com">Jane Smith</a>
  </address>
</article>

Screen readers announce <address> content as contact information. This helps users who need to find the author's details quickly.

The common mistake is using <address> for any postal address on the page, such as a company's office address in a contact page. An office address is not contact information for the content's author. Use a <p> instead, and style it however you need.

<!-- Wrong: not the author's contact info — this is a location address -->
<address>
  123 Main Street, Springfield, IL 62701
</address>

<!-- Correct: leave location addresses as plain paragraphs -->
<p>123 Main Street, Springfield, IL 62701</p>

<mark>

<mark> highlights text as relevant in the current context. The typical use case is search results: when a user searches for "flexbox", every appearance of "flexbox" in the results is wrapped in <mark>.

<p>
  CSS <mark>flexbox</mark> is a layout model that arranges items in a single direction.
  <mark>Flexbox</mark> is ideal for navigation bars and card rows.
</p>

Do not use <mark> for general visual highlighting or decoration. It carries a semantic signal: this text is relevant because of the current context (a search, a filter, a comparison). Using it for decoration gives screen reader users misleading information about why the text is highlighted.

<del> and <ins>

<del> marks text as deleted. <ins> marks text as inserted. Together they show how a piece of content changed.

<p>
  Price: <del>$99</del> <ins>$79</ins>
</p>

<p>
  The deadline is <del datetime="2024-01-10">January 10</del>
  <ins datetime="2024-01-15">January 15</ins>.
</p>

Both elements accept a datetime attribute, which records when the change happened. Screen readers may announce the deleted and inserted text with labels like "deleted" and "inserted," helping users understand what changed.

The <del> element renders with a strikethrough by default. This is visually clear, but do not rely on visual styling alone. A user who cannot see the strikethrough still needs to know the original value was changed.

Common mistakes

Using <b> and <i> everywhere instead of <strong> and <em>. <b> and <i> are valid HTML, but they have no semantic weight. If the emphasis matters, use <strong> or <em>.

Using <em> when you want italics for style. If a foreign word, title, or technical term does not need spoken stress emphasis, use <i>. An <em> inside a screen reader will be read with stress, which can make the sentence sound strange.

Nesting block elements inside inline elements. A <p> inside a <span> or <code> is invalid HTML. Inline elements go inside block elements, not the other way around.

Using <address> for any address on the page. It is for the author's contact information only, not for business locations, shipping addresses, or any other geographic data.

Omitting the datetime attribute on <time>. The user-visible text can be in any format. The machine-readable value lives in datetime. Without it, <time> is only marginally more useful than a plain <span>.

Using <mark> for general highlighting. Reserve it for contextually relevant highlights (search matches, comparisons). If you just want a yellow background on some text, use CSS.

Exercise

Build a short article about a command-line tool. Apply the correct inline elements as you go.