HTML PROGRAMMING:HTML – Formatting

Mastering html – formatting concepts and implementation.

Formatting tags control how text appears inside the browser. They allow you to highlight important words, emphasize meaning, show deletions or insertions, and represent special text like formulas or code.

In HTML, formatting tags fall into two broad categories:

  • Visual formatting: changes how text looks
  • Semantic formatting: explains why the text is important

In modern HTML, semantic meaning is strongly preferred because it improves accessibility, SEO, and long-term maintainability.

Common text formatting tags

  1. <b> – Bold text (visual)
  • Makes text bold visually.
  • Does not add any extra meaning.
  • Example: <b>Warning</b>
  1. <strong> – Strong importance (semantic)
  • Usually displayed in bold.
  • Communicates importance to screen readers.
  • Example: <strong>Important</strong>
  1. <i> – Italic text (visual)
  • Makes text italic.
  • Often used for stylistic purposes.
  • Example: <i>Book title</i>
  1. <em> – Emphasized text (semantic)
  • Indicates emphasis or stress in a sentence.
  • Usually displayed in italics.
  • Example: You <em>must</em> save your work.
  1. <u> – Underlined text
  • Underlines text visually.
  • Use carefully, as underlined text can be confused with links.
  1. <del> and <ins>
  • <del> represents deleted or removed text.
  • <ins> represents inserted or added text.
  • Useful for edits, version history, or change tracking.
  • Example: I like <del>cola</del> <ins>water</ins>.
  1. <sup> and <sub>
  • <sup> creates superscript text (above the line).
  • <sub> creates subscript text (below the line).
  • Examples:
  • 2<sup>3</sup> = 8
  • H<sub>2</sub>O
  1. <small> and <big>
  • <small> reduces text size.
  • <big> is obsolete in HTML5 and should not be used.
  • Use CSS for size control instead.
  1. <code> and monospaced text
  • <code> is used for inline code snippets.
  • Displayed in a monospace font.
  • <tt> is obsolete and should be avoided.

Visual vs semantic formatting

  • Visual tags only affect appearance.
  • Semantic tags communicate meaning and intent.

For accessibility, SEO, and professional HTML, prefer:

  • <strong> over <b>
  • <em> over <i>

Suggested image prompt

"Side-by-side comparison showing <b> vs <strong> and <i> vs <em>, with labels highlighting visual-only formatting versus semantic meaning."

Interview-style questions from this topic

  1. What is the difference between <b> and <strong>?
  2. What is the difference between <i> and <em>?
  3. When would you use <sup> and <sub>? Give examples.
  4. Why are semantic formatting tags preferred in modern HTML?
  5. Why is the <big> tag not recommended in HTML5?

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 demonstrates how different formatting tags affect text. Notice that <strong> and <em> not only change appearance but also convey meaning, making them better choices for accessible and semantic HTML.

Progress
PreviousNext: HTML – Phrase Tags

Related Page