Text Elements

Use the right tag for the right meaning. Master inline text elements like strong, em, code, and the typographic helpers blockquote, sub, sup.

textsemanticblockquotecode

Duration

⏱ About 1 hour

Level

📊 Beginner

Prerequisite

🎯 html-01

OUTCOME

Mark up rich text content with correct semantic tags

What you'll learn

1Use and for meaning, not just bold/italic
2Mark code samples with <code> and <pre>
3Quote external content with <blockquote> and <cite>
4Use and for math and footnotes

1. Emphasis: strong vs em

html

<p>Press <kbd>Ctrl</kbd>+<kbd>S</kbd> to save.</p>
<p><strong>Warning:</strong> this action cannot be undone.</p>
<p>This is <em>really</em> important.</p>

= strong importance (often bold)
= stress emphasis (often italic)
and are visual-only — use sparingly

2. Code and Preformatted Text

html

<p>Run <code>npm install</code> to add a package.</p>
<pre><code>function greet(name) {
  return `Hello, ${name}`;
}</code></pre>

<pre> preserves whitespace; <code> marks something as code. They are commonly nested together for multi-line snippets.

3. Quotes and Citations

html

<blockquote cite="https://example.com">
  <p>Programs must be written for people to read.</p>
  <footer>— <cite>Hal Abelson</cite></footer>
</blockquote>

<p>As <q>he said</q> in passing.</p>

4. Math and Footnotes

html

<p>H<sub>2</sub>O is water.</p>
<p>E = mc<sup>2</sup>.</p>
<p>See note<sup><a href="#fn1">1</a></sup>.</p>

Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub ↗