Imagine you are reading a textbook. Some words are bold to show they are important. Some terms are written in italics because they come from another language. Some numbers appear like this: H₂O · where the "2" sits below the normal line of text. Some answers appear with a ~~strikethrough~~ because they have been corrected.
All of these are examples of text formatting · giving text a special visual appearance to communicate meaning.
In HTML, you can do all of these things using special formatting tags. These are simple HTML elements that wrap around your text and tell the browser exactly how that piece of text should look or how important it is.
In this lesson, you will learn every HTML formatting element from scratch, understand what each one does, why it exists, and practise using all of them with clear examples and a hands-on mini project.
By the end of this lesson, you will be able to:
- Use bold, italic, highlighted, small, strikethrough, inserted, subscript, and superscript text in HTML
- Understand the difference between visual formatting tags and semantic (meaning-based) formatting tags
- Apply formatting correctly in realistic web pages
- Avoid the most common beginner mistakes
Before we dive in, let's make sure you are comfortable with three foundational ideas from earlier lessons.
What is an HTML Tag?
An HTML tag is a special instruction wrapped in angle brackets that tells the browser what to do with content.
<p>This is a paragraph.</p><p>is the opening tag · it starts the paragraphThis is a paragraph.is the content</p>is the closing tag · it ends the paragraph
The browser reads the opening tag, applies its rules to the content, then stops when it sees the closing tag.
What is Nesting?
Nesting means placing one tag inside another. Think of it like boxes inside boxes.
<p>This is <b>bold</b> inside a paragraph.</p>Here, the <b> tag is nested inside the <p> tag. The bold formatting applies only to the word "bold", while the paragraph wraps around everything.
What Does "Inline" Mean?
An inline element sits within a line of text. It does not create a new line or new block. Formatting tags like <b>, <i>, <mark>, and others are all inline elements · they affect only the text they wrap, without breaking the flow of the surrounding sentence.
<p>I love <b>HTML</b> because it is powerful.</p>Output:
I love HTML because it is powerful.
The bold applies only to "HTML". The rest of the sentence is unchanged.
HTML formatting elements are tags specifically designed to give text a special appearance or special meaning.
There are two types of formatting, and it is very important to understand the difference.
Type 1: Visual Formatting (Presentational)
These tags simply change how text looks. They have no deeper meaning · they just style the text visually.
Examples: <b> (bold), <i> (italic)
Type 2: Semantic Formatting (Meaningful)
These tags not only change how text looks · they also carry meaning. They tell the browser (and tools like screen readers for blind users) something important about the text.
Examples: <strong> (important text), <em> (emphasized text)
💡 Why does this matter? Screen readers (software used by visually impaired people) will read
<strong>text with a strong, serious voice. They will read<em>text with emphasis, like stress in speech. A<b>tag on its own just looks bold · but<strong>communicates that the content is truly important. This is called accessibility.
Think of it this way: <b> is like wearing a bright shirt · it's visible. <strong> is like saying something in a loud voice · it's meaningful.
Here is a full overview of every formatting element you will learn in this lesson.
| Tag | What it does | Visual Result |
|---|---|---|
<b> | Makes text bold (no extra meaning) | bold |
<strong> | Marks text as important (bold visually) | important |
<i> | Makes text italic (no extra meaning) | italic |
<em> | Emphasizes text (italic visually) | emphasized |
<mark> | Highlights text (like a marker pen) | highlighted |
<small> | Makes text smaller than normal | small |
<del> | Shows deleted/removed text (strikethrough) | ~~deleted~~ |
<ins> | Shows inserted/added text (underline) | inserted |
<sub> | Subscript · text sits below the line | H₂O |
<sup> | Superscript · text sits above the line | x² |
Now let us learn each one deeply, one at a time.
What is it?
The <b> element makes text appear bold · that is, thicker and darker than normal text.
Why does it exist?
Sometimes you want a word to stand out visually. Bold text draws the reader's eye to something important on a page · like a keyword, a name, or a product title.
What does it NOT do?
The <b> tag has no semantic meaning. It does not tell search engines, screen readers, or assistive technologies that the text is important. It is purely a visual styling tool.
Syntax
<b>Your bold text here</b>Simple Example
<!DOCTYPE html>
<html>
<body>
<p>My favourite programming language is <b>HTML</b>.</p>
</body>
</html>Expected Output:
My favourite programming language is HTML.
Only the word "HTML" appears bold. The rest of the sentence looks normal.
Second Example
<!DOCTYPE html>
<html>
<body>
<p>The store sells <b>apples</b>, <b>oranges</b>, and <b>bananas</b>.</p>
</body>
</html>Expected Output:
The store sells apples, oranges, and bananas.
🤔 Thinking Prompt: What would happen if you accidentally wrote
<b>apples<b>instead of<b>apples</b>? Try to guess before reading on. (Answer: Without the closing/, the browser might bold everything after that point, or it might behave unpredictably.)
<b> · Bold Text (Visual Only). Open your editor, type the examples above by hand, modify them, and observe what changes.What is it?
The <strong> element marks text as important. Like <b>, it visually displays text in bold. But unlike <b>, it communicates genuine importance to tools that read HTML.
Why does it exist?
When you want to warn someone, highlight a critical rule, or emphasize a safety instruction, you should use <strong> · not just <b>. Screen readers will announce the text with greater emphasis when they encounter <strong>.
Syntax
<strong>Your important text here</strong>Simple Example
<!DOCTYPE html>
<html>
<body>
<p><strong>Warning:</strong> Do not touch hot surfaces.</p>
</body>
</html>Expected Output:
Warning: Do not touch hot surfaces.
Second Example
<!DOCTYPE html>
<html>
<body>
<p>To save your work, press <strong>Ctrl + S</strong> on your keyboard.</p>
</body>
</html>Expected Output:
To save your work, press Ctrl + S on your keyboard.
<b> vs <strong> · Side-by-Side Comparison
<p>This is <b>visually bold</b> but not marked as important.</p>
<p>This is <strong>semantically important</strong> and visually bold.</p>Expected Output:
This is visually bold but not marked as important. This is semantically important and visually bold.
Both look the same in a normal browser · but <strong> carries extra meaning for accessibility tools.
💡 Best Practice: Use
<strong>when the text is genuinely critical, like warnings, rules, key terms, or safety information. Use<b>only for decorative styling.
<strong> · Important Text (Semantic Bold). Open your editor, type the examples above by hand, modify them, and observe what changes.What is it?
The <i> element makes text appear in italics · a slanted style of writing.
Why does it exist?
Italics have many traditional uses in writing: titles of books or films, technical terms, phrases from foreign languages, ship names, and scientific species names. The <i> tag was created to handle these purely visual use cases.
Syntax
<i>Your italic text here</i>Simple Example
<!DOCTYPE html>
<html>
<body>
<p>The ship was named <i>The Golden Star</i>.</p>
</body>
</html>Expected Output:
The ship was named The Golden Star.
Second Example · Technical Term
<!DOCTYPE html>
<html>
<body>
<p>In Latin, the phrase <i>et cetera</i> means "and the rest".</p>
</body>
</html>Expected Output:
In Latin, the phrase et cetera means "and the rest".
<i> · Italic Text (Visual Only). Open your editor, type the examples above by hand, modify them, and observe what changes.What is it?
The <em> element stands for emphasis. Like <i>, it displays text in italic. But it also tells screen readers and search engines that the word carries stress · the same way we raise our voice to emphasize a word when speaking.
Why does it exist?
Read these two sentences aloud:
- I did not say he stole the money.
- I did not say he stole the money.
The emphasis changes the entire meaning of the sentence! The <em> tag is for this kind of meaningful stress in language.
Syntax
<em>Your emphasized text here</em>Simple Example
<!DOCTYPE html>
<html>
<body>
<p>You must <em>always</em> save your work before closing.</p>
</body>
</html>Expected Output:
You must always save your work before closing.
Second Example
<!DOCTYPE html>
<html>
<body>
<p>She is <em>not</em> responsible for this mistake.</p>
</body>
</html>Expected Output:
She is not responsible for this mistake.
<i> vs <em> · Quick Comparison
| Situation | Use |
|---|---|
| Styling a ship name, book title, foreign phrase | <i> |
| Stressing a word to change meaning (like speech) | <em> |
<em> · Emphasized Text (Semantic Italic). Open your editor, type the examples above by hand, modify them, and observe what changes.What is it?
The <small> element makes text appear smaller than the surrounding text. It is typically used for fine print, disclaimers, copyright notices, and supplementary notes.
Analogy
Think of the tiny text at the bottom of an advertisement that says "Terms and conditions apply." That is the kind of content <small> is perfect for.
Syntax
<small>Your small text here</small>Simple Example
<!DOCTYPE html>
<html>
<body>
<p>This product costs $9.99 <small>(plus taxes and shipping)</small>.</p>
</body>
</html>Expected Output:
This product costs $9.99 (plus taxes and shipping). ← The bracketed part appears smaller
Second Example · Copyright Notice
<!DOCTYPE html>
<html>
<body>
<p>MyWebsite.com</p>
<small>Copyright © 2024. All rights reserved.</small>
</body>
</html>Expected Output:
MyWebsite.com (smaller) Copyright © 2024. All rights reserved.
💡 Note:
©is an HTML entity that displays the copyright symbol ©. You will learn more about entities in a later lesson.
<small> · Smaller Text. Open your editor, type the examples above by hand, modify them, and observe what changes.What is it?
The <mark> element highlights text with a yellow background (like using a physical highlighter pen on paper). It draws attention to a specific part of the text.
Why does it exist?
In study guides, search results, and important notices, highlighting specific words helps readers find key information quickly. For example, when you search on Google, the matching word is often highlighted in the results.
Syntax
<mark>Your highlighted text here</mark>Simple Example
<!DOCTYPE html>
<html>
<body>
<p>Do not forget to buy <mark>milk</mark> today.</p>
</body>
</html>Expected Output:
Do not forget to buy ==milk== today. ← "milk" appears with a yellow background
Second Example · Highlighting a Search Term
<!DOCTYPE html>
<html>
<body>
<p>Search results for "HTML": Learn <mark>HTML</mark> from scratch.
<mark>HTML</mark> is the language of the web.</p>
</body>
</html>Expected Output:
Search results for "HTML": Learn ==HTML== from scratch. ==HTML== is the language of the web.
🤔 Thinking Prompt: Where else in real life do you see highlighted or marked text? Think of product labels, warning notices, and textbooks.
<mark> · Highlighted Text. Open your editor, type the examples above by hand, modify them, and observe what changes.What is it?
The <del> element shows text that has been deleted or removed. Browsers display it with a horizontal line through the middle · called a strikethrough.
Why does it exist?
When you update a document, it can be useful to show what the original text was and what replaced it. This is common in legal documents, price tags (showing old vs. new price), and tracked document changes.
Syntax
<del>Your deleted text here</del>Simple Example
<!DOCTYPE html>
<html>
<body>
<p>My favourite colour is <del>blue</del> red.</p>
</body>
</html>Expected Output:
My favourite colour is ~~blue~~ red.
The word "blue" appears with a line through it, showing it was removed.
Second Example · Price Update
<!DOCTYPE html>
<html>
<body>
<p>Original Price: <del>$50.00</del> Now only $35.00!</p>
</body>
</html>Expected Output:
Original Price: ~~$50.00~~ Now only $35.00!
This is a classic use case you see on e-commerce websites showing discounted prices.
<del> · Deleted (Strikethrough) Text. Open your editor, type the examples above by hand, modify them, and observe what changes.What is it?
The <ins> element marks text that has been inserted or added to a document. Browsers display it with an underline.
Why does it exist?
<ins> is the counterpart to <del>. Together they show what was removed and what was added in its place · like tracking changes in a Word document.
Syntax
<ins>Your inserted text here</ins>Simple Example
<!DOCTYPE html>
<html>
<body>
<p>My favourite colour is <del>blue</del> <ins>red</ins>.</p>
</body>
</html>Expected Output:
My favourite colour is ~~blue~~ <u>red</u>.
This clearly shows: "blue" was deleted, and "red" was inserted in its place.
Second Example · Document Revision
<!DOCTYPE html>
<html>
<body>
<p>The meeting is on <del>Monday</del> <ins>Wednesday</ins> at 3pm.</p>
</body>
</html>Expected Output:
The meeting is on ~~Monday~~ <u>Wednesday</u> at 3pm.
💡 Real-World Connection: This combination of
<del>and<ins>is exactly what Git (a version control system used by software developers) uses visually when showing code changes · red for deleted lines, green for inserted lines.
<ins> · Inserted Text (Underline). Open your editor, type the examples above by hand, modify them, and observe what changes.What is it?
The <sub> element creates subscript text · text that appears below the normal line of text and is usually rendered in a smaller font size.
Why does it exist?
In science, mathematics, and chemistry, subscript numbers are used constantly. For example:
- Water is written as H₂O (the 2 is subscript)
- Carbon dioxide is CO₂ (the 2 is subscript)
- Glucose is C₆H₁₂O₆
Without <sub>, you cannot correctly write these formulas in HTML.
Syntax
<sub>Your subscript text here</sub>Simple Example
<!DOCTYPE html>
<html>
<body>
<p>Water is represented as H<sub>2</sub>O.</p>
</body>
</html>Expected Output:
Water is represented as H₂O.
The "2" appears slightly below and smaller than the "H" and "O".
Second Example · Chemistry Formula
<!DOCTYPE html>
<html>
<body>
<p>Carbon dioxide is CO<sub>2</sub>.</p>
<p>Sulphuric acid is H<sub>2</sub>SO<sub>4</sub>.</p>
</body>
</html>Expected Output:
Carbon dioxide is CO₂. Sulphuric acid is H₂SO₄.
🤔 Thinking Prompt: Can you write the chemical formula for glucose (C6H12O6) using
<sub>tags? Try it on your own before checking the next section.
<sub> · Subscript Text. Open your editor, type the examples above by hand, modify them, and observe what changes.What is it?
The <sup> element creates superscript text · text that appears above the normal line of text and is usually rendered in a smaller font size.
Why does it exist?
Superscript is used in:
- Mathematical exponents (x², y³, 10⁴)
- Footnote references (like "See note[1]")
- Ordinal numbers in some languages (1st, 2nd, 3rd)
- Trademark symbols (sometimes)
Syntax
<sup>Your superscript text here</sup>Simple Example
<!DOCTYPE html>
<html>
<body>
<p>The area of a square with side 5 is 5<sup>2</sup> = 25.</p>
</body>
</html>Expected Output:
The area of a square with side 5 is 5² = 25.
Second Example · Footnote Reference
<!DOCTYPE html>
<html>
<body>
<p>According to the study<sup>1</sup>, HTML is the most widely used markup language.</p>
<p><small><sup>1</sup> Smith, J. (2023). Web Languages Report.</small></p>
</body>
</html>Expected Output:
According to the study¹, HTML is the most widely used markup language. (smaller) ¹ Smith, J. (2023). Web Languages Report.
<sub> vs <sup> · Visual Comparison
<p>Normal text with <sub>subscript below</sub> and <sup>superscript above</sup>.</p>Expected Output:
Normal text with ₛᵤᵦₛcᵣᵢₚₜ ᵦₑₗₒw and ˢᵘᵖᵉʳˢᶜʳⁱᵖᵗ ᵃᵇᵒᵛᵉ. (subscript dips below, superscript rises above the baseline)
<sup> · Superscript Text. Open your editor, type the examples above by hand, modify them, and observe what changes.Now that you understand each tag individually, let us look at how they can be combined in a real paragraph.
⚠️ Rule: Always close tags in the correct order. If you open
<b>inside<p>, close<b>before closing<p>.
Combined Example 1 · Science Article Snippet
<!DOCTYPE html>
<html>
<body>
<h2>Chemistry Fact</h2>
<p>
<strong>Water</strong> (H<sub>2</sub>O) is a <em>vital</em> compound
for all living organisms. The boiling point of water is
<mark>100°C</mark> at standard pressure.
</p>
<p><small>Source: Chemistry Textbook, 2023</small></p>
</body>
</html>Expected Output:
Chemistry Fact
Water (H₂O) is a vital compound for all living organisms. The boiling point of water is ==100°C== at standard pressure.
(smaller) Source: Chemistry Textbook, 2023
Combined Example 2 · Product Listing
<!DOCTYPE html>
<html>
<body>
<h2>Laptop Pro X</h2>
<p>
<strong>Special Offer!</strong> Was <del>$1,200</del>,
now only <ins>$899</ins>.
</p>
<p><small>*Offer valid while stocks last. <em>Terms apply.</em></small></p>
</body>
</html>Expected Output:
Laptop Pro X
Special Offer! Was ~~$1,200~~, now only <u>$899</u>.
(smaller) Offer valid while stocks last. Terms apply.
Exercise 1 · Formatting a Science Note
Objective: Use <strong>, <em>, <sub>, and <mark> to format a science sentence.
Scenario: You are building a chemistry revision page for students.
Your Task: Write HTML that produces this output:
Reminder: The formula for sulphuric acid is H₂SO₄. This is an extremely corrosive substance. Handle with ==caution==.
Steps:
- Open a new HTML file with
<!DOCTYPE html>,<html>,<body>structure. - Use a
<p>tag. - Use
<strong>for "Reminder:". - Use
<sub>for the subscript numbers in the formula. - Use
<em>for "extremely". - Use
<mark>for "caution".
Hint: H₂SO₄ needs two <sub> tags · one for the "2" and one for the "4".
Solution:
<!DOCTYPE html>
<html>
<body>
<p>
<strong>Reminder:</strong> The formula for sulphuric acid is
H<sub>2</sub>SO<sub>4</sub>. This is an <em>extremely</em>
corrosive substance. Handle with <mark>caution</mark>.
</p>
</body>
</html>Expected Output:
Reminder: The formula for sulphuric acid is H₂SO₄. This is an extremely corrosive substance. Handle with ==caution==.
Self-Check Questions:
- Did you close every tag you opened?
- Does the subscript appear below the regular text line?
- Is "Reminder:" in bold?
Exercise 2 · Price Update Notice
Objective: Use <del>, <ins>, <strong>, and <small> to build a product price update.
Scenario: An online shop is running a sale. You need to show old and new prices.
Your Task: Write HTML that produces this output:
SALE! Wireless Headphones Was: ~~$120.00~~ Now: <u>$79.99</u> (smaller) Limited stock available. Offer ends Sunday.
Steps:
- Use
<strong>for "SALE!". - Use
<del>for the old price. - Use
<ins>for the new price. - Use
<small>for the disclaimer.
Solution:
<!DOCTYPE html>
<html>
<body>
<p><strong>SALE!</strong> Wireless Headphones</p>
<p>Was: <del>$120.00</del></p>
<p>Now: <ins>$79.99</ins></p>
<small>Limited stock available. Offer ends Sunday.</small>
</body>
</html>Expected Output:
SALE! Wireless Headphones Was: ~~$120.00~~ Now: <u>$79.99</u> (smaller) Limited stock available. Offer ends Sunday.
Exercise 3 · Mathematics Expressions
Objective: Use <sup> to write mathematical expressions correctly.
Scenario: You are creating a maths revision webpage for students.
Your Task: Write HTML that produces this:
The formula for the area of a circle is πr² Einstein's famous equation is E = mc² The speed of light is approximately 3 × 10⁸ metres per second.
Solution:
<!DOCTYPE html>
<html>
<body>
<p>The formula for the area of a circle is πr<sup>2</sup></p>
<p>Einstein's famous equation is E = mc<sup>2</sup></p>
<p>The speed of light is approximately 3 × 10<sup>8</sup> metres per second.</p>
</body>
</html>💡 Note:
πis the HTML entity for the Greek letter π (pi).×is the multiplication symbol ×. You will learn more HTML entities in a later lesson.
Expected Output:
The formula for the area of a circle is πr² Einstein's famous equation is E = mc² The speed of light is approximately 3 × 10⁸ metres per second.
The second source page for this lesson (the W3Schools Code Challenge page) challenges you to test your understanding of formatting elements. Here are equivalent challenge tasks you can practise right now:
Challenge 1
Task: Make the word "important" appear in bold using the semantic tag.
<p>This is <___>important</___ > information.</p>Answer:
<p>This is <strong>important</strong> information.</p>Challenge 2
Task: Make the word "science" appear in italic using the visual-only tag.
<p>I love <___>science</___ >.</p>Answer:
<p>I love <i>science</i>.</p>Challenge 3
Task: Show that the word "bad" has been deleted and "good" has been inserted.
<p>This is a <___>bad</___ > <___>good</___ > idea.</p>Answer:
<p>This is a <del>bad</del> <ins>good</ins> idea.</p>Challenge 4
Task: Write the chemical formula for carbon dioxide using the correct subscript tag.
Answer:
<p>CO<sub>2</sub></p>Challenge 5
Task: Write x to the power of 3 (x³) using the correct superscript tag.
Answer:
<p>x<sup>3</sup></p>Challenge 6
Task: Highlight the word "deadline" in a sentence.
Answer:
<p>The project <mark>deadline</mark> is this Friday.</p>This is <___>important information.
` Answer: `htmlThis is important information.
` ·Here are the most frequent errors beginners make with formatting tags, and how to fix them.
Mistake 1: Forgetting to Close the Tag
Wrong:
<p>This word is <b>bold and so is everything after it.</p>What happens: The bold formatting never ends. Everything after <b> will appear bold, even outside the intended word.
Correct:
<p>This word is <b>bold</b> and the rest is normal.</p>Mistake 2: Using <b> When <strong> Is More Appropriate
Wrong (for a critical warning):
<p><b>Do not run</b> near the swimming pool.</p>Better:
<p><strong>Do not run</strong> near the swimming pool.</p>Use <strong> for genuine warnings, safety rules, and critical content so screen readers announce it properly.
Mistake 3: Incorrect Nesting Order
Wrong:
<p>This is <b><em>bold and italic</b></em>.</p>What happens: The closing tags do not match the opening order. This is invalid HTML and browsers may render it incorrectly.
Correct:
<p>This is <b><em>bold and italic</em></b>.</p>Rule: The last tag you open must be the first tag you close. Think of it like closing brackets: ( [ ] ) · you cannot do ( [ ) ].
Mistake 4: Using <sub> and <sup> for the Wrong Content
Wrong · using <sup> just to make text smaller:
<p>See the disclaimer<sup>*</sup> below.</p>
<!-- This is actually correct, but beginners sometimes use <sup> to just shrink text -->Wrong · using <sup> for a chemical formula subscript:
<p>H<sup>2</sup>O</p> <!-- WRONG: the 2 should be below, not above! -->Correct:
<p>H<sub>2</sub>O</p> <!-- The 2 is subscript (below the line) -->Memory trick: Subscript = below ground (like a submarine). Superscript = above (like a superhero flying up).
Mistake 5: Confusing <del> With Just Styling
Some beginners try to use CSS text-decoration: line-through instead of <del>. While CSS can visually create a strikethrough, only <del> communicates to browsers, search engines, and screen readers that the content has been deleted. Always use the right semantic tag for the right purpose.
Mistake 6: Using <ins> Without <del> (in revision context)
When showing document changes, always pair <del> (removed text) with <ins> (added text). Using <ins> alone to underline normal text can confuse readers into thinking something was changed.
In this project, you will combine everything you have learned to build a styled science fact card for a biology or chemistry class webpage.
Project Brief
You are building a webpage called "Daily Science Fact." It should display a well-formatted fact using as many formatting elements as appropriate.
Stage 1: Setup · Basic HTML Structure
Start with a clean, complete HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Daily Science Fact</title>
</head>
<body>
<!-- Your content will go here -->
</body>
</html>