HTML Text Formatting

HTML provides a set of tags specifically designed to format text. These tags allow text to be made bold, italic, underlined, highlighted, struck through, and more. Text formatting helps draw attention to important words and improves how content is communicated.

Bold Text – <strong> and <b>

Both tags make text bold, but they have different meanings:

• <strong> – Used for text that is semantically important. Screen readers may announce this text with more emphasis.
• <b> – Used to make text visually bold without adding any extra meaning.

<p>Please <strong>do not open</strong> the file without permission.</p>
<p>The product name is <b>SuperCleaner Pro</b>.</p>

Italic Text – <em> and <i>

Both tags make text italic:

• <em> – Used for emphasized text with meaning. Useful for stress in a sentence.
• <i> – Used for visual italics without semantic meaning, like foreign words or technical terms.

<p>The exam is <em>very important</em> this semester.</p>
<p>The term <i>café</i> comes from French.</p>

Underlined Text – <u>

The <u> tag underlines text. Use sparingly since underlined text is often mistaken for a hyperlink.

<p>Please <u>submit your assignment</u> before Friday.</p>

Strikethrough Text – <s> and <del>

• <s> – Shows text that is no longer accurate or relevant
• <del> – Shows text that has been explicitly deleted from a document

<p>Original Price: <s>$120</s> Now: $85</p>
<p>The meeting is <del>on Monday</del> on Tuesday.</p>

Inserted Text – <ins>

The <ins> tag shows text that has been added or inserted into a document. It typically appears underlined.

<p>The meeting is on <del>Monday</del> <ins>Tuesday</ins>.</p>

Superscript and Subscript

• <sup> – Raises text above the normal text line (superscript). Used for exponents and footnotes.
• <sub> – Lowers text below the normal text line (subscript). Used in chemistry formulas.

<p>2<sup>10</sup> = 1024</p>
<p>The chemical formula for water is H<sub>2</sub>O.</p>

Highlighted / Marked Text – <mark>

The <mark> tag highlights text with a yellow background, similar to using a highlighter marker on paper.

<p>The answer to the question is <mark>photosynthesis</mark>.</p>

Small Text – <small>

The <small> tag renders text in a smaller font size. Useful for footnotes, disclaimers, or copyright notices.

<p>Click here to buy.</p>
<p><small>*Terms and conditions apply. Offer valid until 31st March.</small></p>

Code and Keyboard Text – <code> and <kbd>

• <code> – Used to display a piece of computer code in monospace font
• <kbd> – Represents keyboard input, usually styled like a keyboard key

<p>Use the <code>print()</code> function to display output.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save the file.</p>

All Formatting Tags – Quick Reference

Key Points to Remember

• Use <strong> instead of <b> when the content is genuinely important
• Use <em> instead of <i> when text needs to convey emphasis
• Formatting tags can be combined together (e.g., bold and italic at the same time)
• Do not overuse formatting — apply it only where it genuinely helps readers
• These tags are all inline elements, meaning they flow within normal text