HTML Text Formatting

HTML Text Formatting allows you to enhance and style text to emphasize meaning, highlight important parts, and improve readability.
It combines basic formatting tags with semantic and accessible design to make content look more professional and meaningful.

What Is Text Formatting in HTML?

Text formatting means changing the appearance or meaning of text using HTML tags.

For example, you can make text bold, italic, underlined, marked, or smaller to draw attention or clarify meaning.

<p>This is <b>bold</b> and <i>italic</i> text.</p>

Commonly Used Text Formatting Tags

Combining Multiple Formatting Tags

You can mix several formatting styles together to achieve rich text presentation.

<p>This <b><i><mark>text</mark></i></b> is bold, italic, and highlighted.</p>

Preformatted & Code Text

When displaying code snippets or preserving spaces and line breaks, HTML provides two special tags:

<pre> Tag

<pre>
Line 1
  Line 2 (Indented)
    Line 3
</pre>

<code> Tag

Displays text as computer code:

<code>console.log("Hello World");</code>

Combined <pre> and <code> Tag

<pre><code>function greet() { console.log("Hello!"); }</code></pre>

Accessibility and Best Practices

• Use <strong> and <em> for meaning, not just style.
  Example: <strong> for important text, <em> for emphasis.
• Avoid using <b> and <i> alone unless for visual presentation only.
• Combine CSS for visual styling instead of relying entirely on HTML tags.

<p style="font-weight: bold; color: #29AB87;">Styled with CSS</p>

Practical Example: Product Description

<h2>Smart Watch Features</h2>
<p>
  The <strong>new SmartTime X</strong> comes with a 
  <em>heart rate monitor</em> and <mark>GPS tracking</mark>.
  Battery lasts for <b>7 days</b> and is <u>water-resistant</u>.
</p>
<p>
  Old price: <del>$199</del>  
  New price: <ins>$149</ins>
</p>

Demonstrates semantic, visual, and practical formatting in real-world content.

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE9+
Yes	Yes	Yes	Yes	Yes	Yes

Conclusion

HTML Text Formatting helps you create readable, attractive, and accessible web pages.
By combining formatting tags smartly with CSS and semantics, you can emphasize key information while maintaining a professional look.