HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

HTML Text and Links

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.

Text Formatting Example

html

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

Commonly Used Text Formatting Tags

TagDescriptionExample
<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 textH<sub>2</sub>O
<sup>Superscript textx<sup>2</sup>

Combining Multiple Formatting Tags

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

Multiple Formatting Example

html

<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 Tag Example

html

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

<code> Tag

Displays text as computer code:

Code Tag Example

html

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

Combined <pre> and <code> Tag

Combined Example

html

<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.

Example

html

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

Practical Example: Product Description

Practical Example

html

<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+
YesYesYesYesYesYes

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.

PreviousHTML StylesNextHTML Quotations & Citations