HTML Formatting

What is HTML Formatting?

HTML provides various formatting elements that allow you to style text without using CSS. These elements make text bold, italic, underlined, and more. However, many of these formatting elements have been deprecated in HTML5 in favor of CSS styling.

Text Formatting Elements

Bold Text

The <b> tag makes text bold. The <strong> tag also makes text bold, but indicates that the text is important:

<p>This is <b>bold</b> text.</p>
<p>This is <strong>strong</strong> text (semantically important).</p>

Italic Text

The <i> tag makes text italic. The <em> tag also makes text italic, but indicates emphasis:

<p>This is <i>italic</i> text.</p>
<p>This is <em>emphasized</em> text.</p>

Underlined Text

The <u> tag underlines text. The <ins> tag also underlines text, but indicates inserted text:

<p>This is <u>underlined</u> text.</p>
<p>This is <ins>inserted</ins> text.</p>

Strikethrough Text

The <s> tag strikes through text. The <del> tag also strikes through text, but indicates deleted text:

<p>This is <s>strikethrough</s> text.</p>
<p>This is <del>deleted</del> text.</p>

Marked/Highlighted Text

The <mark> tag highlights text:

<p>This is <mark>highlighted</mark> text.</p>

Small Text

The <small> tag makes text smaller:

<p>This is normal text. <small>This is small text.</small></p>

Superscript and Subscript

The <sup> tag creates superscript text, and the <sub> tag creates subscript text:

<p>This is <sup>superscript</sup> text.</p>
<p>This is <sub>subscript</sub> text.</p>
<p>H<sub>2</sub>O (water)</p>
<p>E = mc<sup>2</sup></p>

Deprecated Formatting Elements

The following elements are deprecated in HTML5 and should be avoided. Use CSS instead:

<font> (Deprecated)

The <font> tag was used to specify font face, size, and color. Use CSS instead:

<font color="red" size="5" face="Arial">Old way (deprecated)</font>

<p style="color: red; font-size: 18px; font-family: Arial;">Modern way with CSS</p>

<center> (Deprecated)

The <center> tag was used to center text. Use CSS text-align: center instead:

<p style="text-align: center;">Centered text</p>

Complete Formatting Example

<p>
    This paragraph contains <b>bold</b>, 
    <i>italic</i>, 
    <u>underlined</u>, 
    <mark>marked</mark>, 
    <small>small</small>, 
    <del>deleted</del>, 
    <ins>inserted</ins>,
    <sub>subscript</sub>, and 
    <sup>superscript</sup> text.
</p>

Best Practices

• Use semantic elements: Prefer <strong> over <b>, and <em> over <i> for better accessibility
• Avoid deprecated elements: Don't use <font>, <center>, etc.
• Use CSS for styling: For complex formatting, use CSS instead of HTML formatting elements
• Combine formatting: You can nest formatting elements if needed

Formatting Element Reference