HTML – Formatting
Chapter 5 • Beginner
Formatting tags control how text looks inside the browser. They can make text bold, italic, underlined, and more.
Some of these tags are mainly visual, while others have semantic meaning (they tell why the text is special, not just how it looks). In modern HTML, semantic meaning is very important.
Common text formatting tags
- <b> – bold text (visual)
- Makes text bold but does not add extra meaning.
- Example: <b>Warning</b>
- <strong> – strong importance (semantic)
- Usually displayed in bold.
- Also tells screen readers that this text is important.
- Example: <strong>Important</strong>
- <i> – italic text (visual)
- Makes text italic.
- Example: <i>Title of a book</i>
- <em> – emphasized text (semantic)
- Usually displayed italic.
- Indicates stress/emphasis in the sentence.
- Example: You <em>must</em> save your work.
- <u> – underlined text
- Underlines text, but should be used carefully because underlined text often looks like a link.
- <del> and <ins>
- <del> shows deleted or removed text (often with a line through it).
- <ins> shows inserted text (often underlined).
- Example: I like <del>cola</del> <ins>water</ins>.
- <sup> and <sub>
- <sup> → superscript (above the normal line, like exponents).
- <sub> → subscript (below the normal line, like chemical formulas).
- Examples:
- 2<sup>3</sup> = 8
- H<sub>2</sub>O
- <small> and <big> (big is obsolete in HTML5)
- <small> makes text smaller.
- <big> used to make text bigger, but is not recommended in HTML5.
- <code>, <tt> and monospaced text
- <code> is used for code snippets.
- <tt> is obsolete; use CSS with a monospace font instead.
Visual vs semantic formatting
- Visual tags only change looks.
- Semantic tags also describe meaning.
For accessibility, SEO, and maintainability, prefer semantic tags like <strong> and <em> over just <b> and <i>.
Suggested image prompt
"Side-by-side example of a sentence using <b> vs <strong> and <i> vs <em>, with labels showing ‘visual only’ and ‘semantic meaning’."
Interview-style questions from this topic
- What is the difference between <b> and <strong>?
- What is the difference between <i> and <em>?
- When would you use <sup> and <sub>? Give examples.
- Why is using semantic formatting tags better than only visual ones?
- Why is the <big> tag not recommended in modern HTML?
Hands-on Examples
Text Formatting Example
<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
<p>The following word uses a <strong>strong</strong> typeface.</p>
<p>The following word uses an <i>italicized</i> typeface.</p>
<p>The following word uses an <em>emphasized</em> typeface.</p>
<p>The following word uses an <u>underlined</u> typeface.</p>
<p>The following word uses a <del>deleted</del> typeface.</p>
<p>The following word uses an <ins>inserted</ins> typeface.</p>
<p>Water formula is H<sub>2</sub>O.</p>
<p>2<sup>3</sup> equals 8.</p>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>This example shows many formatting tags. You can see how each tag changes the appearance of the text. Notice how <strong> and <em> are similar to <b> and <i> visually, but they also carry extra meaning about importance and emphasis.