HTML

HTML Text Formatting

💡 What is HTML Formatting?

HTML formatting is used to define the appearance and emphasis of text. These tags help you make text bold, underlined, italic, or highlighted for better readability and expression.

>>“Well-formatted content is easier to read, easier to understand, and more accessible.” 📚

🎯 Common HTML Formatting Tags

Tag	Purpose	Appearance
<b>	Bold text (non-semantic)	Bold
<strong>	Important text (semantic)	Strong
<i>	Italic text (non-semantic)	Italic
<em>	Emphasized text (semantic)	Emphasized
<u>	Underline text	Underline
<mark>	Highlight text	Highlighted
<small>	Smaller text	Small Text
<del>	Deleted text	~~Deleted~~
<ins>	Inserted text	Inserted
<s>	No longer accurate or relevant	~~Old Price~~
<sub>	Subscript text	H₂O
<sup>	Superscript text	X²
<code>	Inline code	const x = 10;
<kbd>	Keyboard input	`Ctrl` + `C`
<samp>	Sample output	`Hello World`
<var>	Variable name	`x`

🧪 Examples of Text Formatting

HTML Formatting Example

<p>This is <b>bold</b>, <i>italic</i>, and <u>underlined</u>.</p>

<p>This is <strong>important</strong> and <em>emphasized</em>.</p>

<p>This text is <mark>highlighted</mark>, <del>deleted</del>, and <ins>inserted</ins>.</p>

<p>This product costs <s>$99</s> $79.</p>

<p>Water: H<sub>2</sub>O | Math: X<sup>2</sup></p>

<p>Use <code>console.log()</code> to print output.</p>

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>

<p>Program Output: <samp>Hello World</samp></p>

<p><var>x</var> = 10</p>

Information

💡 The <kbd> element represents keyboard input. Its appearance depends on the browser or your CSS, so it may look like normal text unless custom styles are applied.

🔍 Semantic vs Non-Semantic Formatting

Use semantic tags like and to provide meaning for screen readers and search engines, not just visual changes.

Note

⚠️ and change appearance only — they carry no semantic meaning. Prefer and when meaning matters.

📚 Learn More

>>“Formatting gives words power — not just how they’re said, but how they’re seen.” ✍️