HTML Text Formatting Guide

The Power of Emphasis

In written communication, we don't just use words—we emphasize them. We make them bold to show importance, italicize them for emphasis or titles, and underline them to mark changes. These visual cues are crucial for guiding the reader's attention and conveying subtle meaning. HTML provides a set of inline elements specifically for this purpose. However, it's vital to understand that some tags are merely physical (they just change how text looks), while others are semantic (they change how text looks and what it means). Using semantic tags is a cornerstone of modern, accessible web development. This guide will break down the most common HTML text formatting tags, explaining their proper use, their semantic importance, and how they affect both users and machines.

Key Concepts

  • Emphasis - Visual cues that guide reader attention and convey meaning through formatting.
  • Semantic Tags - Tags that change both appearance and meaning, providing context to browsers and assistive technologies.
  • Physical Tags - Tags that only affect visual presentation without adding semantic meaning.

Semantic vs. Physical Formatting: A Critical Distinction

Before diving into specific tags, understand this key concept: Semantic Tags convey meaning and alter appearance. They tell browsers, search engines, and screen readers why the text is being emphasized. Examples: <strong>, <em>, <ins>, <del>. Physical Tags only alter appearance. They describe how the text should look, but not why. Examples: <b>, <i>. Always prefer semantic tags when possible. They make your content more accessible and provide meaning beyond just visual styling.

html
1<!-- Semantic tags with meaning -->
2<p><strong>Warning:</strong> This action is critical.</p>
3<p>I <em>really</em> mean it.</p>
4
5<!-- Physical tags for styling only -->
6<p>This is <b>bold</b> but not necessarily important.</p>
7<p>This is <i>italic</i> for stylistic effect.</p>

Key Differences

  • Semantic Tags - Provide meaning and context to assistive technologies and search engines.
  • Physical Tags - Only affect visual presentation without conveying additional meaning.
  • Best Practice - Always prefer semantic tags for better accessibility and SEO.

<strong> (Semantic)

Indicates that its contents have strong importance, seriousness, or urgency. It is a semantic tag. Default Styling: Browsers typically render <strong> text in bold. Use Case: Use for warnings, critical alerts, or highly important information. Screen readers may change their tone of voice to convey this importance.

html
1<p><strong>Warning:</strong> This action cannot be undone.</p>
2<p>You <strong>must</strong> complete all fields before submitting.</p>

Key Features

  • Semantic Meaning - Conveys importance, seriousness, or urgency.
  • Accessibility - Screen readers emphasize this content with vocal changes.
  • Use Cases - Warnings, critical alerts, important information.

<b> (Physical)

To draw attention to a span of text without implying any added importance or relevance. It is a purely physical (presentational) tag. Default Styling: Browsers typically render <b> text in bold. Use Case: Use for keywords in a summary, product names in a review, or any text that needs to be stylistically offset without conveying extra semantic importance.

html
1<p>The <b>quantum flux capacitor</b> is the key component of the device.</p>
2<p>She was known for her <b>joie de vivre</b>.</p>

Key Features

  • Presentational Only - Affects visual appearance without adding semantic meaning.
  • Use Cases - Keywords, product names, stylistic offsetting.
  • Accessibility - No special meaning conveyed to assistive technologies.

<em> (Semantic)

Indicates emphasized text. It adds semantic stress to a word or phrase, subtly changing the meaning of a sentence. Default Styling: Browsers typically render <em> text in italics. Use Case: Use to emphasize a key word in a sentence that changes its meaning. Screen readers will add verbal stress to this text.

html
1<p>I <em>love</em> driving my car.</p>
2<p>I love <em>driving</em> my car.</p>
3<p>I love driving <em>my</em> car.</p>

Key Features

  • Semantic Stress - Changes the meaning of a sentence through emphasis.
  • Accessibility - Screen readers add verbal stress to emphasized content.
  • Use Cases - Emphasizing key words that alter sentence meaning.

<i> (Physical)

To define text in an alternate voice or mood. It is now a semantic tag in HTML5, but its meaning is more about offsetting text rather than emphasizing it. Default Styling: Browsers typically render <i> text in italics. Use Case: Use for technical terms, foreign words, thoughts, or ship names.

html
1<p>The term <i>et cetera</i> is often abbreviated as <i>etc.</i></p>
2<p>The ship <i>USS Enterprise</i> sailed into the bay.</p>
3<p>She thought to herself, <i>What a beautiful day!</i></p>

Key Features

  • Alternate Voice - Indicates text in a different voice or mood.
  • Use Cases - Technical terms, foreign words, thoughts, ship names.
  • HTML5 Evolution - Now has semantic meaning beyond just italics.

<mark> (Highlighted Text)

Represents text which is marked or highlighted for reference or notation purposes due to its relevance in another context. Default Styling: Browsers typically render <mark> text with a yellow background highlight. Use Case: Perfect for highlighting search terms within a page or marking text as relevant for the user.

html
1<p>Search results for "HTML formatting":</p>
2<p>This guide will teach you all about <mark>HTML formatting</mark> tags and their use.</p>

Key Features

  • Highlighting - Marks text as relevant or noteworthy.
  • Default Styling - Yellow background highlight in most browsers.
  • Use Cases - Search term highlighting, marking relevant content.

<small> (Side Comments)

Represents side-comments and small print, like copyright and legal text. It is semantic, meaning it's not just for smaller text, but for specific types of content. Default Styling: Browsers typically render <small> text one font size smaller than its parent (e.g., from 16px to 14px). Use Case: Copyright notices, legal disclaimers, licensing information.

html
1<p><small>© 2023 Your Company Name. All Rights Reserved.</small></p>
2<p>Price: $99.99 <small>(excl. tax)</small></p>

Key Features

  • Semantic Meaning - Indicates side comments or small print, not just smaller text.
  • Default Styling - Renders text one font size smaller than parent element.
  • Use Cases - Copyright notices, legal disclaimers, licensing information.

<del> (Deleted Text)

Represents a range of text that has been deleted from a document. Default Styling: Browsers typically render <del> with a strikethrough. Use Case: Showing edits, tracking changes, or displaying price changes on an e-commerce site.

html
1<p>My favorite color is <del>blue</del> red.</p>
2<p>Sale: <del>$199.99</del> $149.99!</p>

Key Features

  • Semantic Meaning - Indicates text that has been removed from a document.
  • Default Styling - Renders text with a strikethrough effect.
  • Use Cases - Document edits, change tracking, price changes.

<ins> (Inserted Text)

Represents a range of text that has been added to a document. Default Styling: Browsers typically render <ins> with an underline. Use Case: Showing edits, tracking changes, or displaying price changes on an e-commerce site.

html
1<p>My favorite color is blue <ins>red</ins>.</p>
2<p>Sale: $199.99 <ins>$149.99</ins>!</p>

Key Features

  • Semantic Meaning - Indicates text that has been added to a document.
  • Default Styling - Renders text with an underline effect.
  • Use Cases - Document edits, change tracking, price changes.

<sub> (Subscript)

Renders text as subscript, which appears half a character below the normal line and is often rendered in a smaller font. Used for chemical formulas (H₂O) and mathematical variables (Xₙ).

html
1<p>The chemical formula for water is H<sub>2</sub>O.</p>
2<p>The variable X<sub>n</sub> represents the nth element.</p>

Key Features

  • Positioning - Renders text half a character below the normal line.
  • Font Size - Typically rendered in a smaller font size.
  • Use Cases - Chemical formulas, mathematical variables, footnotes.

<sup> (Superscript)

Renders text as superscript, which appears half a character above the normal line and is often rendered in a smaller font. Used for footnotes¹, mathematical exponents (10²), and ordinal indicators (1ˢᵗ).

html
1<p>This sentence requires a footnote.<sup>1</sup></p>
2<p>2<sup>3</sup> equals 8.</p>
3<p>She finished in 1<sup>st</sup> place.</p>

Key Features

  • Positioning - Renders text half a character above the normal line.
  • Font Size - Typically rendered in a smaller font size.
  • Use Cases - Footnotes, mathematical exponents, ordinal indicators.

Best Practices for Using Formatting Tags

1. Prefer Semantic Meaning: Always choose a semantic tag (<strong>, <em>, <mark>) over a physical one (<b>, <i>) if it accurately describes the meaning of the text. 2. Don't Use for Purely Visual Effects: If you just want text to be bold or italic for decorative reasons, use CSS instead. For example, <span class="product-name"> styled with font-weight: bold; is better than misusing <b>. 3. Nesting is Allowed: You can nest these tags for combined meaning and styling. 4. Use in Moderation: Overusing these tags, especially <strong> and <em>, can make text difficult to read and dilute their impact. Use them to highlight truly important information.

html
1<p>This is <strong><em>very important and emphasized</em></strong> text.</p>
2<p>E = mc<sup>2</sup> is <mark>Einstein's most famous equation</mark>.</p>

Key Guidelines

  • Semantic First - Choose semantic tags when they accurately convey meaning.
  • CSS for Styling - Use CSS for purely visual effects instead of HTML tags.
  • Nesting - Combine tags for enhanced meaning and styling.
  • Moderation - Avoid overuse to maintain readability and impact.

Conclusion: Formatting with Intention

HTML text formatting tags are powerful tools for adding nuance and clarity to your content. By understanding the difference between semantic and physical tags, you can create web pages that are not only visually engaging but also more accessible to users with disabilities and more understandable to search engines. This practice elevates your content from simple text to a well-structured, meaningful communication. Use these tags intentionally to guide your readers and give your words the emphasis they deserve. The next step in building your web pages is to learn how to connect them together using the most important element of the web: the hyperlink.

html
1<!-- Semantic formatting in action -->
2<article>
3  <h1>Understanding Web Accessibility</h1>
4  <p>When creating content, <strong>always consider accessibility</strong>. This means using <em>semantic HTML</em> to ensure your site is usable by everyone.</p>
5  <p>For more information, see our <mark>accessibility guidelines</mark>.</p>
6  <footer><small>Last updated: <time datetime="2023-05-15">May 15, 2023</time></small></footer>
7</article>

Key Takeaways

  • Semantic Advantage - Semantic tags improve accessibility and SEO.
  • Intentional Formatting - Use formatting tags purposefully to guide readers.
  • Next Steps - Learn about hyperlinks to connect your web pages.

Frequently Asked Questions (FAQ)

Should I stop using <b> and <i> entirely?

Not necessarily. While <strong> and <em> are preferred for conveying importance and emphasis, the <b> and <i> tags still have valid uses in HTML5 for stylistically offsetting text without giving it extra semantic importance (e.g., keywords, foreign phrases). The key is to choose the right tag for the right job.

Can I change the default styling of these tags?

Absolutely! You can use CSS to style any of these tags exactly how you want. For example, you could make your <mark> tag highlighted with a pink background instead of yellow, or your <small> text a different color.

Do these tags affect SEO?

Indirectly, yes. Search engines like Google use these semantic tags to better understand the context and importance of your content. Text within <strong> and <em> tags may be given slightly more weight. More importantly, using them correctly improves user experience and accessibility, which are both key ranking factors.

What should I use for underlining text?

The <ins> tag is semantic and comes with an underline by default. However, if you just want to underline text for decorative purposes (not to indicate an insertion), you should use the CSS text-decoration property on a <span> tag to avoid semantic confusion.

How do screen readers handle these tags?

Screen readers announce text within <strong> and <em> tags with a different tone of voice to convey importance and emphasis. They will typically announce text within <del> as "deleted" and <ins> as "inserted." This is the primary reason to use semantic tags—they provide crucial context to users who cannot see the visual styling.