HTML has a family of small inline elements for formatting words inside a paragraph. They can mark text as important or emphasised, highlight it, show it as deleted, or display it as computer code.
The key idea is that in modern HTML each tag describes meaning. Bold or italic is just the browser's default way of showing that meaning, and you can change the look with CSS at any time. Choosing tags by meaning makes your content clearer to screen readers and search engines, not only to people looking at the screen.
In this lesson you'll learn which formatting tag fits which situation, including the commonly confused pairs <strong> and <b>, and <em> and <i>.
Importance and emphasis: strong, em, b and i
| Tag | Meaning | Looks like |
|---|---|---|
<strong> | Important, serious or urgent | bold |
<em> | Stress emphasis that changes how you'd say the sentence | italic |
<b> | Draws attention without extra importance, such as product names | bold |
<i> | A different voice: foreign words, thoughts, technical terms | italic |
Rule of thumb: reach for <strong> and <em> first. Screen readers can announce them differently, and they tell other developers why the text stands out. Use <b> and <i> only when the text looks different but isn't more important.
Editing and highlighting text
<mark>highlights text, like a highlighter pen. It's ideal for showing search matches.<del>shows text that was deleted, with a line through it.<ins>shows text that was inserted, usually underlined.<small>is for side comments and fine print, such as copyright lines.<s>shows text that is no longer accurate, such as an old price next to a sale price.
<del> and <ins> are often used together to show what changed in a document, for example on a terms-and-conditions page that lists recent edits.
Code, science and quotations
<sub>creates subscript, like the 2 in H₂O.<sup>creates superscript, like the 2 in x².<code>marks a piece of computer code.<kbd>marks keyboard input, like Ctrl + C.<q>is a short inline quote. Browsers add the quotation marks for you.<blockquote>is a longer quotation that sits on its own, usually indented.<abbr title="…">marks an abbreviation and shows its full meaning on hover.
These tags are common on tutorials, documentation and science pages, where the exact type of text matters.
Formatting is not styling
HTML formatting tags give text a meaning. They are not the place to choose fonts, colours or sizes. If you want all prices on a shop page to be green, use a class and CSS rather than wrapping each price in <b>. Keeping meaning in HTML and appearance in CSS means you can redesign the page later without editing every paragraph.
HTML Text Formatting Syntax
Inline formatting
<strong>important</strong> <em>stressed</em> <mark>highlighted</mark>
<del>old</del> <ins>new</ins> H<sub>2</sub>O x<sup>2</sup>
<code>let x = 1;</code> <kbd>Ctrl</kbd> + <kbd>S</kbd>HTML Text Formatting Summary
- Formatting tags are inline elements that describe the meaning of words.
- Use
<strong>for importance and<em>for spoken emphasis. - Use
<b>and<i>when text looks different but isn't more important. <mark>,<del>,<ins>,<sub>,<sup>,<code>and<kbd>each have a specific purpose.- Change the appearance of text with CSS, not by picking a different tag.
HTML Text Formatting Examples
Each example runs in the page. Edit the code and press Run to see what changes.
A product page
Run it and look at how each tag displays by default.
<h2>The <b>Sprout Runner</b> trainers</h2>
<p>
Price: <s>£80</s> <strong>£55 today only!</strong>
</p>
<p>Made with <em>real</em> recycled ocean plastic.</p>
<p><small>Offer ends at midnight. Terms apply.</small></p>Line-by-line explanation
- Line 1
<b>draws attention to the product name without saying it's "important". - Line 3
<s>shows the old, no-longer-correct price;<strong>marks the urgent deal. - Line 5
<em>stresses the word "real". Read the sentence out loud and you'll hear it. - Line 6
<small>is for fine print.
Science and maths
<p>Water is H<sub>2</sub>O and carbon dioxide is CO<sub>2</sub>.</p>
<p>The area of a square is x<sup>2</sup>.</p>
<p>She finished 1<sup>st</sup> and he finished 3<sup>rd</sup>.</p>
<p>The <abbr title="World Health Organization">WHO</abbr> published new advice.</p>Line-by-line explanation
- Line 1
<sub>lowers the numbers for chemical formulas. - Lines 2 to 3
<sup>raises text for powers and ordinals. - Line 4Hover over "WHO" in the result to see the full name from
title.
Code, keys and quotes
<p>To save, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
<p>In JavaScript, <code>console.log("hi")</code> prints a message.</p>
<p>My teacher said <q>mistakes are proof you are trying</q>.</p>
<blockquote>
The best way to learn to code is to write a lot of code.
</blockquote>
<p>Search results for <mark>flexbox</mark>: 12 lessons found.</p>Line-by-line explanation
- Line 1
<kbd>is for keys the user should press. - Line 2
<code>shows code in a monospace font. - Line 3
<q>adds quotation marks automatically. - Lines 4 to 6
<blockquote>is indented as its own block. - Line 7
<mark>highlights the search term.
Common HTML Text Formatting Mistakes
Using formatting tags for decoration
<p><strong><em>WELCOME TO MY WEBSITE!!!</em></strong></p><h1>Welcome to my website</h1>If text is a title, use a heading. Use <strong> only for words that are genuinely important.
Using old font tags
<font color="red" size="5">Sale!</font>
<center>Hello</center><p class="sale">Sale!</p>
<!-- colour, size and alignment come from CSS --><font>, <center> and <u> for styling are outdated. Looks belong in CSS.
HTML Text Formatting in Real Projects
Formatting with meaning helps everyone
Documentation sites like this one use <code> and <kbd> constantly. News sites use <blockquote> for quotes and <mark> in search results. Shops use <s> for crossed-out prices. Because each tag carries meaning, screen readers, search engines and translation tools all understand the content better.
HTML Text Formatting Exercises
Answer each one and check it instantly. If you get stuck, open the hint before the answer.
Make the warning important and write the chemical formula for water.
<p><>Danger:</strong> do not drink the H<>2</sub>O from the lab!</p><strong> marks importance and <sub> lowers the 2.Which tag should you use to show a crossed-out old price?
<s> is for content that is no longer accurate, such as an old price. <del> is for removed edits in a document.What's the difference between <strong> and <b>?
<strong> carries meaning that screen readers and search engines can use.Fix the maths: "2 to the power of 10" should show the 10 raised, and the keyboard shortcut should use <kbd>.
<p>2<sub>10</sub> = 1024</p>
<p>Copy with <code>Ctrl</code> + <code>C</code></p>- The 10 is in
<sup> - No
<sub>left - Two
<kbd>elements
<sup> raises text for powers; <kbd> marks keys the user presses.HTML Text Formatting Quiz
3 questions to check what you learned.
Which tag highlights text like a highlighter pen?
<mark><highlight><em><hl>
Which element is best for a long, separate quotation?
<q><quote><cite><blockquote>
What does
<abbr title="HyperText Markup Language">HTML</abbr>do?- Makes HTML bold
- Marks HTML as an abbreviation and shows the full form on hover
- Hides the text
- Creates a link
HTML Text Formatting Challenge
Format a tech tip
Write one paragraph that:
- Starts with Tip: in
<strong> - Tells the reader to press
Ctrl+Zusing<kbd>for each key - Mentions the function
undo()inside<code> - Stresses one word with
<em>
<p></p>- Starts with a
<strong>containing "Tip:" - Two
<kbd>elements <code>contains undo()- An
<em>is used
<p> … </p>.