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
| Tag | Description | Example |
|---|---|---|
<b> | Makes text bold (visual only) | <b>Bold text</b> |
<strong> | Emphasizes important text (semantic) | <strong>Important!</strong> |
<i> | Italic text (visual only) | <i>Italic text</i> |
<em> | Emphasized text (semantic meaning) | <em>Emphasized text</em> |
<u> | Underlined text | <u>Underlined</u> |
<mark> | Highlights text | <mark>Highlighted text</mark> |
<small> | Makes text smaller | <small>Fine print</small> |
<del> | Shows deleted text | <del>Old price</del> |
<ins> | Shows inserted text | <ins>New price</ins> |
<sub> | Subscript text | H<sub>2</sub>O |
<sup> | Superscript text | x<sup>2</sup> |
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.
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.
