HTML Text Formatting

HTML text formatting refers to HTML elements we can use to modify the visual appearance of text within a web page to enhance its visual appeal, readability, and information hierarchy. Here’s how it works:

  • Specific HTML tags are used to apply different formatting styles to text such as bold, italic, etc..
  • These tags are paired like standard HTML tags (opening and closing tags), with the text to be formatted placed between them.
  • Example: <b>bold text</b> (the text between the “b” tags has bold formatting).
  • When a web browser encounters these tags, it interprets them and renders the text accordingly.
  • Each tag has a default visual style, but these can be customized using CSS for more precise control of the appearance.
  • Bold: <b> or <strong> (renders as bold text)
  • Italic: <i> or <em> (renders as italic text)
  • Underline: <u> (underlines text, but often discouraged for stylistic reasons)
  • Monospace: <code> or <pre> (displays text in a fixed-width font, often used for code snippets)
  • Superscript: <sup> (raises text slightly above the baseline)
  • Subscript: <sub> (lowers text slightly below the baseline)
  • Marked Text: <mark> (highlights text, often with a yellow background)
  • Deleted Text: <del> (strikes through text, indicating deletion)
  • Inserted Text: <ins> (underlines text, indicating insertion)
  • While <b> and <i> primarily affect visual appearance, <strong> and <em> convey additional semantic meaning:
    • <strong> signifies strong importance or emphasis.
    • <em> indicates emphasis or a different voice or mood (e.g., a thought, a technical term, etc.).

Additional Formatting Options:

  • Line Breaks: <br> creates a line break within a block of text.
  • Horizontal Rules: <hr> creates a horizontal line for visual separation.
  • Headings: <h1> to <h6> create headings of different levels, adding structure and visual hierarchy to content.


  • Use formatting tags thoughtfully to avoid overwhelming readers with visual clutter.
  • Proper formatting can improve accessibility for users with visual impairments or cognitive disabilities.
  • Consider semantic meaning when choosing tags for better accessibility and search engine optimization.
  • Use CSS for more granular control over text styling and appearance.