HTML Formatting
HTML Formatting का मतलब होता है — टेक्स्ट को इस तरह दिखाना जिससे उसका मकसद साफ़ समझ में आए। जैसे — कोई चीज़ important हो तो उसे bold में लिखना, या कोई शब्द ज़ोर देकर बोलना हो तो उसे italic में दिखाना।
HTML Formatting Tags क्या होते हैं?
HTML में कई ऐसे tags हैं जो सिर्फ़ टेक्स्ट की स्टाइल और meaning दिखाने के लिए बने हैं। उन्हें Formatting Tags कहा जाता है। ये tags browser को बताते हैं कि टेक्स्ट कैसे दिखाना है — बोल्ड, इटैलिक, अंडरलाइन, बड़ा, छोटा, या किसी खास importance के साथ।
Common HTML Formatting Tags की List
| Tag (टैग) | Description (विवरण) | Example (उदाहरण) | Result (परिणाम) |
|---|---|---|---|
<b> | Bold text दिखाने के लिए | <b>Bold Text</b> | Bold Text |
<strong> | Important text दिखाने के लिए (Bold भी होगा) | <strong>Important</strong> | Important |
<i> | Italic text दिखाने के लिए | <i>Italic Text</i> | Italic Text |
<em> | Emphasized text (ज़ोर देकर बोलने वाला) | <em>Important Note</em> | Important Note |
<mark> | Highlight text | <mark>Highlight</mark> | Highlight |
<small> | छोटा टेक्स्ट दिखाने के लिए | <small>Small text</small> | Small text |
<del> | कटे हुए टेक्स्ट (Deleted) दिखाने के लिए | <del>₹500</del> | |
<ins> | जोड़ा गया टेक्स्ट दिखाने के लिए | <ins>₹400</ins> | ₹400 |
<sub> | Subscript (नीचे लिखा टेक्स्ट) | H<sub>2</sub>O | H2O |
<sup> | Superscript (ऊपर लिखा टेक्स्ट) | X<sup>2</sup> | X2 |
Example 1: Bold Text
<p>यह एक <b>Bold</b> शब्द है।</p>यह एक Bold शब्द है।
Note: <b> सिर्फ़ “visual bold” करता है, जबकि <strong> टेक्स्ट को “important meaning” भी देता है।
Example 2: Strong (Important) Text
<p>कृपया <strong>पासवर्ड</strong> किसी से साझा न करें।</p>Output:
कृपया पासवर्ड किसी से साझा न करें।
यहाँ <strong> का मतलब सिर्फ़ bold नहीं बल्कि “important” भी है, जिससे Screen Readers भी इसे ज़्यादा ज़ोर से पढ़ते हैं (Accessibility के लिए अच्छा है)।
Example 3: Italic & Emphasis
<p>यह शब्द <i>Italic</i> स्टाइल में है।</p>
<p>यह वाक्य <em>ज़ोर देकर</em> बोला गया है।</p>Output:
यह शब्द Italic स्टाइल में है।
यह वाक्य ज़ोर देकर बोला गया है।
Example 4: Highlight Text (<mark>)
<p>आज का टॉपिक है <mark>HTML Formatting</mark>.</p>आज का टॉपिक है HTML Formatting.
Example 5: Small, Deleted & Inserted Text
<p>पुरानी कीमत: <del>₹999</del></p>
<p>नई कीमत: <ins>₹799</ins></p>
<p><small>ऑफर सिर्फ़ आज के लिए है!</small></p>पुरानी कीमत: ₹999
नई कीमत: ₹799
ऑफर सिर्फ़ आज के लिए है!
Example 6: Subscript और Superscript
<p>पानी का फॉर्मूला: H<sub>2</sub>O</p>
<p>Square का फॉर्मूला: X<sup>2</sup></p>पानी का फॉर्मूला: H2O
Square का फॉर्मूला: X2
Example 7: Mix Formatting Together
<p>
यह एक <strong><em>बहुत जरूरी</em></strong> बात है।
कृपया इसे <mark>ध्यान से पढ़ें</mark>।
</p>यह एक बहुत जरूरी बात है। कृपया इसे ध्यान से पढ़ें।
Example 8: Combination with Styles
<p style="color: blue; font-size: 18px;">
यह पैराग्राफ <b>Bold</b>, <i>Italic</i> और <mark>Highlight</mark> टेक्स्ट के साथ है।
</p>यह पैराग्राफ Bold, Italic और Highlight टेक्स्ट के साथ है।
Important Tips:
- <strong> और <em> tags सिर्फ़ visual नहीं होते —
- ये “meaning” भी convey करते हैं, जिससे SEO और Accessibility में मदद मिलती है।
- <b> और <i> tags सिर्फ़ visual formatting करते हैं।
- <mark> user attention खींचने के लिए बहुत बढ़िया tag है।
- <del> और <ins> e-commerce में प्राइस comparison दिखाने में बहुत काम आते हैं।
- Formatting का use सोच-समझकर करें, ज़रूरत से ज़्यादा नहीं।