✍️ Inline Formatting Elements
Block elements build the skeleton of a page; inline elements give the words their meaning and texture. This lesson covers the inline toolkit — the semantic pairs like em/strong, the code family, quotations, abbreviations, and the humble span — and the crucial difference between meaning and appearance.
🎯 Learning Objectives
By the end of this lesson, you will be able to:
- Distinguish semantic inline elements (
<em>,<strong>) from presentational ones (<i>,<b>) - Use the code family —
<code>,<kbd>,<samp>,<var>— correctly - Mark up abbreviations, citations, quotations, and dates with
<abbr>,<cite>,<q>, and<time> - Apply
<mark>,<small>,<sub>,<sup>, and<span>appropriately - Replace obsolete presentational tags with modern semantic HTML and CSS
Estimated Time: 25–35 minutes • Difficulty: Beginner
Hands-on: Enrich a plain blog post with the right inline elements.
In This Lesson
Inline vs. Block
Recall the two families from the earlier lessons. Block-level elements (paragraphs, headings, lists) each begin on a new line and take the full width. Inline elements flow within a line of text, taking only as much room as their content needs — they are the words within the sentence, not the sentence itself.
| Block elements | Inline elements |
|---|---|
| Start on a new line | Flow within text, no forced break |
| Span the full available width | Take only the width they need |
| May contain block and inline children | Contain text and other inline elements |
e.g. <div> <p> <h1> <section> | e.g. <span> <strong> <em> <a> |
Meaning vs. Appearance
The single most important idea in this lesson: some inline elements carry meaning, and some only change appearance. They can look identical while saying very different things to a screen reader or search engine.
<strong> vs. <b>
Both render bold by default, but <strong> means strong importance, seriousness, or urgency, while <b> is a stylistic bold with no added importance (a keyword, a product name).
<p>Safety first: <strong>always wear eye protection</strong> in the lab.</p>
<p>The novel <b>Moby-Dick</b> was written by Herman Melville.</p><em> vs. <i>
Both render italic, but <em> marks stress emphasis that changes a sentence's meaning, while <i> marks an alternate voice or mood — a foreign phrase, a taxonomic name, a thought.
<p>I <em>really</em> need this finished today.</p>
<p>The phrase <i lang="fr">c'est la vie</i> means "that's life."</p>✅ Rule of thumb
Read the sentence aloud. If you would stress the words or they carry urgency, use <em> or <strong>. If the italic or bold is only a visual convention with no change in meaning, <i> or <b> is honest. When unsure, the semantic pair is the safer default.
Mark, Small, Sub & Sup
<mark> highlights text for reference — like a yellow highlighter — often for search hits or a passage of current interest.
<p>Your search for <mark>machine learning</mark> matched 25 documents.</p><small> represents side comments and fine print — legal disclaimers, copyright lines, caveats.
<p>30-day returns. <small>Shipping fees are non-refundable.</small></p><sub> and <sup> render subscript and superscript — essential for chemistry, math, and footnote markers.
<p>Water is H<sub>2</sub>O.</p>
<p>Einstein's equation: E = mc<sup>2</sup>.</p>
<p>Skills stay in demand<sup>1</sup> through 2030.</p>Renders as:
Water is H2O.
Einstein's equation: E = mc2.
Skills stay in demand1 through 2030.
⚠️ <s> and <u> — handle with care
<s> marks something no longer accurate (an old price), and <u> is a non-textual annotation (e.g. a misspelling). Avoid <u> for general styling: underlined text is easily mistaken for a link. When you just want an underline for visual reasons, use CSS text-decoration instead.
The Code Family
Four inline elements describe computer-related text, each with a distinct role. Using them precisely makes documentation far clearer.
| Element | Represents | Example |
|---|---|---|
<code> | A fragment of computer code | getElementById() |
<kbd> | Keyboard input from the user | Ctrl + S |
<samp> | Sample output from a program | Error: file not found |
<var> | A variable or placeholder | area = πr² |
<p>To create an array, write
<code>const <var>name</var> = [];</code>.</p>
<p>Running it logs
<samp>Array(3) [ "apple", "banana", "orange" ]</samp>.</p>
<p>Open the console with <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd>.</p>💡 Inline <code> vs. a code block
A lone <code> is for a term mentioned mid-sentence. For a multi-line snippet you want to preserve exactly, wrap the <code> in a <pre> block (as in every code sample on this page). The <pre> keeps the whitespace; the <code> declares it's code.
Abbr, Cite, Q & Time
<abbr> marks an abbreviation; its title supplies the full expansion, shown as a tooltip on hover and available to assistive tech.
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p><cite> names the title of a creative work; <q> wraps a short inline quotation (the browser adds the quotation marks); and <time> marks a date or time, with a machine-readable datetime attribute.
<p>In <cite>The Lord of the Rings</cite>, the guide says
<q>not all those who wander are lost</q>.</p>
<p>The concert is on
<time datetime="2026-07-15T20:00">July 15 at 8:00 PM</time>.</p>Renders as:
The WHO was founded in 1948.
In The Lord of the Rings, the guide says not all those who wander are lost
.
The concert is on .
The payoff of these elements is machine-readability. A <time datetime> lets a browser or calendar reliably parse the date; an <abbr title> gives everyone the expansion; a <q> quotes correctly in any language. You describe the content once, and many tools benefit.
Span & Obsolete Tags
<span> — the neutral hook
<span> is a generic inline container with no meaning of its own. Reach for it only when no semantic element fits and you need a hook for CSS or JavaScript — for example, coloring a single word or targeting a phrase for a script.
<p>Use code <span class="promo">SUMMER26</span> at checkout.</p>If a semantic element (<strong>, <code>, <abbr>…) would describe the content, prefer it over a bare <span>.
Retire the obsolete presentational tags
Several old tags styled text directly and have been superseded by CSS or semantic elements. Modern HTML should not use them:
| Obsolete | Use instead |
|---|---|
<font> | CSS font-family, color, font-size |
<center> | CSS text-align: center |
<strike> | <s> or <del> |
<big> | CSS font-size |
<tt> | <code> or CSS font-family: monospace |
📖 The guiding principle
HTML answers "what is this content?"; CSS answers "how should it look?". Keep the two jobs separate: semantic elements for meaning, stylesheets for presentation. That separation is what keeps a site accessible, maintainable, and easy to restyle.
Hands-on Exercise
🏋️ Enrich a Plain Blog Post
Objective: Add the right inline elements to plain prose.
Here is an unformatted snippet. Add appropriate inline elements: a <time> for the date, <abbr> for the acronyms, <strong> for the warning, <code> for the example, and <small> for the copyright.
<article>
<h1>Getting Started with Web Development</h1>
<p>Published on July 15, 2026</p>
<p>Every developer learns three technologies: HTML, CSS, and JS.</p>
<p>A paragraph is written like this: <p>text</p>.</p>
<p>Important: always save files with the .html extension.</p>
<p>Copyright 2026 TechBlog</p>
</article>💡 Hint
Match each need to an element: a publication date → <time datetime="…">; an acronym → <abbr title="…">; an urgent note → <strong>; a literal tag or filename → <code>; fine print → <small>. Remember to escape < and > inside the code example.
✅ Solution
<article>
<h1>Getting Started with Web Development</h1>
<p>Published on
<time datetime="2026-07-15">July 15, 2026</time>.</p>
<p>Every developer learns three technologies:
<abbr title="HyperText Markup Language">HTML</abbr>,
<abbr title="Cascading Style Sheets">CSS</abbr>, and
<abbr title="JavaScript">JS</abbr>.</p>
<p>A paragraph is written like this:
<code><p>text</p></code>.</p>
<p><strong>Important:</strong> always save files with the
<code>.html</code> extension.</p>
<p><small>Copyright 2026 TechBlog</small></p>
</article>The prose reads the same to a sighted user, but now conveys structure and meaning to assistive tech, search engines, and any tool that parses dates or abbreviations.
Best Practices
| ✅ Do | 🚫 Don't |
|---|---|
Use <strong>/<em> when meaning changes | Reach for <b>/<i> to convey importance |
Give every <abbr> a title | Leave acronyms unexplained |
| Pick the precise code-family element | Wrap all technical text in one generic tag |
Use <span> only when nothing semantic fits | Default to <span> and add meaning via classes alone |
| Style with CSS | Use <font>, <center>, <big> or other obsolete tags |
Tag foreign phrases with lang | Rely on color alone to signal meaning |
🎯 Quick Quiz
Question 1: You want to flag an urgent safety warning that a screen reader should convey with added weight. Which element is correct?
Question 2: Which element represents sample output printed by a program?
Question 3: Why should you avoid <font> and <center> in modern HTML?
Summary & Quiz
🎉 Key Takeaways
- Meaning vs. appearance:
<strong>/<em>carry importance and stress;<b>/<i>are stylistic only. - The code family —
<code>,<kbd>,<samp>,<var>— each names a specific kind of computer text. - Semantic inlines like
<abbr>,<cite>,<q>, and<time>make content machine-readable. <span>is a last-resort neutral hook; prefer a semantic element whenever one fits.- Retire
<font>,<center>, and friends — presentation lives in CSS.
📚 Further Reading
🚀 What's Next?
You've now met the inline element that everyone uses most — the anchor, <a>. Next we give it a lesson of its own: link types and navigation, covering absolute vs. relative URLs, in-page anchors, email and download links, and the attributes that keep links safe and accessible.
🎉 Words with meaning!
Your text now says exactly what it means. Let's connect pages together next.