HTML Formatting

HTML Formatting का उपयोग text को visually clear, meaningful और readable बनाने के लिए किया जाता है।

Formatting tags text के appearance के साथ-साथ उसके semantic meaning को भी define करते हैं, जो SEO और accessibility के लिए महत्वपूर्ण है।

HTML Formatting Tags Overview

HTML में कई text formatting tags available हैं:

<b>Bold text</b>
<strong>Important text</strong>
<i>Italic text</i>
<em>Emphasized text</em>
<mark>Marked text</mark>
<small>Small text</small>
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript</sub>
<sup>Superscript</sup>

<b> vs <strong>

<b> Tag

• Text को bold दिखाता है
• No semantic importance

Example:

<b>Bold Text</b>

<strong> Tag

• Text को important meaning देता है
• SEO और accessibility friendly

Example:

<strong>Important Text</strong>

Best Practice:
Important content के लिए <strong> use करें।

<i> vs <em>

<i> Tag

• Italic style देता है
• Visual purpose only

<em> Tag

• Emphasized meaning देता है
• Screen readers emphasis समझते हैं

Example:

<em>Emphasized text</em>

<mark> Tag

<mark> tag text को highlight करता है।

Example:

<p>This is <mark>important</mark> information.</p>

Search result highlighting जैसे use cases में useful होता है।

<small> Tag

<small> tag small text show करता है।

Example:

<small>Terms and conditions apply</small>

<del> और <ins> Tags

<del>

Deleted या removed text दिखाने के लिए।

<ins>

Inserted या new text दिखाने के लिए।

Example:

<p>Price: <del>₹1000</del> <ins>₹800</ins></p>

<sub> और <sup> Tags

Subscript <sub>

Chemical formulas के लिए useful।

Superscript <sup>

Math equations और footnotes के लिए।

Example:

H<sub>2</sub>O  
x<sup>2</sup>

Semantic vs Non-Semantic Formatting

Tag	Type	Meaning
<b>	Non-Semantic	Visual only
<i>	Non-Semantic	Visual only
<strong>	Semantic	Importance
<em>	Semantic	Emphasis

SEO और accessibility के लिए semantic tags prefer करें।

Formatting और CSS

Formatting tags content meaning के लिए होते हैं,
Styling (color, font, size) CSS से control करनी चाहिए।

Wrong Practice:

<b style="font-size:30px;">Text</b>

Correct Practice:

<strong class="title">Text</strong>

Common Beginner Mistakes

• <b> और <strong> को same समझना
• <i> का overuse
• Formatting tags से layout control करना
• Semantic meaning ignore करना

Quick Summary

• Formatting tags text को highlight और emphasize करते हैं
• Semantic tags SEO और accessibility improve करते हैं
• <strong> और <em> preferred tags हैं
• Styling हमेशा CSS से करें

Practice Questions

1. <b> और <strong> में difference क्या है?
2. Semantic formatting क्या होती है?
3. <sub> और <sup> का उपयोग कहाँ होता है?