HTML Tutorial

HTML Text Formatting

HTML provides various formatting tags to style and emphasize text. These tags help to make content bold, italic, underlined, and more — improving readability and presentation.

Common Formatting Tags

Tag	Description	Example
<b>	Makes text bold	`<b>Bold Text</b>`
<strong>	Important text (bold + semantic meaning)	`<strong>Important!</strong>`
<i>	Italic text	`<i>Italic Text</i>`
<em>	Emphasized text (italic + semantic meaning)	`<em>Emphasized Text</em>`
<u>	Underlined text	`<u>Underlined Text</u>`
<mark>	Highlights text	`<mark>Highlighted Text</mark>`
<small>	Smaller text	`<small>Small Text</small>`
<del>	Deleted (strikethrough) text	`<del>Deleted Text</del>`
<ins>	Inserted (underlined) text	`<ins>Inserted Text</ins>`
<sub>	Subscript text	`H<sub>2</sub>O`
<sup>	Superscript text	`X<sup>2</sup>`

Example: Text Formatting

Copy Text

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Text Formatting</title>
  </head>
  <body>
    <h1>HTML Text Formatting Example</h1>

    <p><b>Bold text</b> makes words stand out.</p>
    <p><strong>Strong text</strong> shows importance.</p>
    <p><i>Italic text</i> adds emphasis.</p>
    <p><em>Emphasized text</em> is similar to italic but adds meaning.</p>
    <p><u>Underlined text</u> can be used for highlighting links or names.</p>
    <p><mark>Marked text</mark> highlights important content.</p>
    <p><small>This is small text.</small></p>
    <p><del>Deleted text</del> represents removed content.</p>
    <p><ins>Inserted text</ins> shows newly added content.</p>
    <p>Water formula: H<sub>2</sub>O</p>
    <p>Square value: X<sup>2</sup></p>
  </body>
</html>

Output

HTML Text Formatting Example

Bold text makes words stand out.

Strong text shows importance.

Italic text adds emphasis.

Emphasized text is similar to italic but adds meaning.

Underlined text can be used for highlighting links or names.

Marked text highlights important content.

This is small text.

~~Deleted text~~ represents removed content.

Inserted text shows newly added content.

Water formula: H₂O

Square value: X²

Semantic vs Non-Semantic Tags

Semantic Tags (like , , <ins>) give meaning to text — useful for SEO and accessibility.
Non-Semantic Tags (like , , ) only change appearance without adding meaning.

Type	Examples	Meaning
Semantic	<strong>, <em>, <ins>	Describe purpose of text
Non-Semantic	<b>, <i>, <u>	Describe only the style

HTML Tutorial