← Back to HTML Course | Chapter 1: Introduction & Basics | Lesson 9 of 11

HTML Formatting

When you write an essay, you use highlighters, bold pens, and italics to mark down key formulas and quote sentences. You do this so important concepts jump out at you immediately. HTML formatting tags work exactly like that stationery set. They let you modify words to make them stand out. These formatting options make your text visually engaging and tell search engines and screen readers which words carry extra importance.

In this page:

  1. Bold vs. Strong Text
  2. Italics vs. Emphasized Text
  3. Marking and Highlighting Text
  4. Subscript and Superscript
  5. Inserted and Deleted Elements
  6. The small Element
Syntax
markup 
<b>Bold text</b>
<i>Italic text</i>
<mark>Highlighted text</mark>
<sub>Subscript</sub> <sup>Superscript</sup>

Bold vs. Strong Text

The b tag makes text physically bold for styling purposes. The strong tag also bolds text, but it carries deep semantic meaning. It signals to search engines and screen-reader software that the text inside has critical importance.

Note: Use strong for words that must be emphasized, and save b for purely cosmetic bolding.
Warning: Do not wrap whole paragraphs in strong tags as it dilutes the structural importance of the text.

Example: Bold vs. Strong Text

markup 
<p><b>Bold for style</b> and <strong>strong for importance</strong>.</p>

Italics vs. Emphasized Text

Similar to bolding, there is a visual and structural pair for slanted text. The i tag slants text strictly for styling, while the em tag adds verbal emphasis. A screen reader will read em text with slightly elevated voice stress.

Note: Use the em tag to stress specific words that change the meaning of a sentence.
Warning: Ensure italicized text remains readable on compact smartphone displays.

Example: Italics vs. Emphasized Text

markup 
<p><i>Italic for style</i> and <em>emphasized for meaning</em>.</p>

Marking and Highlighting Text

The mark tag highlights text with a default bright yellow background, looking exactly like a physical marker highlight. This is incredibly useful for pointing out matching search results on your pages.

Note: The mark element is perfect for highlighting matching keywords on an search results interface.
Warning: Ensure the bright background color keeps the text readable for colorblind users.

Example: Marking and Highlighting Text

markup 
<p>Search results for <mark>HTML</mark> tutorials.</p>

Subscript and Superscript

Subscript (sub) pushes text slightly downward and makes it smaller, while Superscript (sup) pushes text upward. These are necessary elements for formatting dates, mathematical squares, and chemical equations.

Note: Use superscript for ordinal indicators like the th in 10th or mathematical powers.
Warning: Be careful when nesting sub and sup inside compact paragraphs as they can distort line height spacing.

Example: Subscript and Superscript

markup 
<p>H<sub>2</sub>O and 10<sup>th</sup> place.</p>

Inserted and Deleted Elements

The del tag indicates that text has been deleted from a document, typically rendering with a strike-through line. The ins tag represents newly added content, which is displayed with an underline by default.

Note:
  • Use del and ins together to create highly professional changelogs and document revision histories.
  • Accepted attributes:
  • cite — URL explaining the change
  • datetime — valid date/time string of the change, e.g. 2026-01-15 or 2026-01-15T10:30
  • Applies to both ins and del
Warning: Do not confuse the underlined ins tag with a standard hyperlink, as it could confuse your visitors.

Example: Inserted and Deleted Elements

markup 
<p><del>Old price: $50</del> <ins>New price: $40</ins></p>

The small Element

The small element represents side comments and small print, like copyright notices, legal disclaimers, or licensing terms, and browsers render it in a visually smaller font by default. It carries semantic meaning beyond just visual styling.

Note: Use small for genuinely secondary information like fine print, not just any time you want smaller looking text — that is what CSS font-size is for.
Warning: Overusing small purely for visual styling instead of its intended semantic purpose confuses its meaning for assistive technology.

Example: The small Element

markup 
<p>Product details here.</p>
<small>&copy; 2024 Example Company. All rights reserved.</small>
Live Example
Related Topics

HTML Styles · HTML Quotations · HTML Paragraphs · HTML Headings

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using physical tags like b and i for everything, ignoring semantic accessibility tags like strong and em.
  2. Assuming the ins element functions as an actual clickable web link just because it is underlined.
  3. Nesting formatting tags inside each other incorrectly, which can distort the overall paragraph flow.
Chapter Summary
  • Formatting elements apply both physical look and semantic weight to text.
  • The strong and em elements are crucial for web accessibility and screen readers.
  • Use del to indicate deleted content, ins for additions, and mark for yellow highlighted text.
Browser Support

Standard HTML formatting tags have universal support on all desktop and mobile browsers.

🔒

Chapter Quiz — Complete all 11 topics to unlock

0/11 topics done

Complete these topics first:

← Previous Lesson HTML Styles Next Lesson → HTML Text Semantics

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.