HTML Text Formatting क्या है?

HTML Text Formatting:

HTML में Text Formatting का मतलब होता है text को अलग-अलग तरीके से दिखाना, जैसे bold, italic, highlighted, deleted, inserted, subscript और superscript आदि। HTML में इसके लिए कई formatting tags दिए गए हैं, जो browser को बताते हैं कि किसी text को किस तरह display करना है।

Text formatting का इस्तेमाल किसी important word को highlight करने, किसी text पर जोर देने, पुराने और नए content को अलग दिखाने, mathematical expressions लिखने और chemical formulas को सही तरीके से दिखाने के लिए किया जाता है।

HTML Headings

HTML में headings बनाने के लिए <h1> से लेकर <h6> तक के tags का इस्तेमाल किया जाता है। ये headings किसी webpage के content को अलग-अलग levels में organize करने में मदद करती हैं।

<h1> से <h6> तक Headings

<h1> सबसे important और सामान्यतः सबसे बड़ी heading होती है। इसका इस्तेमाल page के main topic या title के लिए किया जाता है। इसके बाद <h2>, <h3> और इसी तरह <h6> तक headings आती हैं। जैसे-जैसे heading level बढ़ता है, default heading size छोटी होती जाती है।

Headings केवल text का size बदलने के लिए नहीं होती हैं। ये webpage के content की structure को समझने में भी मदद करती हैं। उदाहरण के लिए किसी article में <h1> main topic हो सकता है, <h2> major section और <h3> उसके अंदर का sub-section हो सकता है।

SEO के लिए भी proper heading structure useful होता है, क्योंकि search engines headings की मदद से page के content और उसके sections को बेहतर तरीके से समझ सकते हैं। हालांकि केवल headings इस्तेमाल करने से ranking की guarantee नहीं होती; content की quality और overall page structure भी important होते हैं।

एक page में सामान्यतः एक clear main <h1> रखना अच्छा practice है। वहीं <h2>, <h3> आदि को आवश्यकता के अनुसार multiple times इस्तेमाल किया जा सकता है।

Headings को CSS की मदद से भी customize किया जा सकता है। आप उनका font-size, color, text-align, margin और अन्य properties बदल सकते हैं।

HTML Formatting Elements

HTML में formatting elements का इस्तेमाल text को visually और semantically अलग तरीके से represent करने के लिए किया जाता है। नीचे कुछ commonly used formatting tags दिए गए हैं।

<b> – Bold Text

<b> tag किसी text को bold दिखाने के लिए इस्तेमाल किया जाता है। इसका मुख्य उद्देश्य text का visual appearance बदलना है। यह अपने आप यह indicate नहीं करता कि text semantically important है।

<b> का इस्तेमाल तब किया जा सकता है जब आपको केवल किसी text को visually bold दिखाना हो। अगर text का meaning या importance बताना हो, तो <strong> ज्यादा suitable होता है।

<strong> – Important Text

<strong> tag text को सामान्यतः bold दिखाता है और साथ ही यह semantic meaning भी देता है कि उस text का विशेष importance है। इसका इस्तेमाल warnings, important information या किसी जरूरी statement को highlight करने के लिए किया जा सकता है।

<i> – Italic Text

<i> tag text को italic style में दिखाता है। इसका इस्तेमाल किसी word या phrase को अलग visual style देने के लिए किया जा सकता है।

<em> – Emphasized Text

<em> tag भी browser में सामान्यतः italic दिखाई देता है, लेकिन इसका semantic meaning emphasis यानी किसी text पर विशेष जोर देना होता है। इसलिए यह केवल appearance बदलने के बजाय text के meaning में भी role निभाता है।

<mark> – Marked or Highlighted Text

<mark> tag किसी text को highlight करने के लिए इस्तेमाल किया जाता है। Browser में यह सामान्यतः highlighted या marker से marked text जैसा दिखाई देता है। इसका इस्तेमाल किसी important word, search result या खास information को highlight करने में किया जा सकता है।

<small> – Small Text

<small> tag text को सामान्य text की तुलना में छोटा दिखाता है। इसका इस्तेमाल secondary information, notes, copyright information या less prominent text के लिए किया जा सकता है।

<del> – Deleted Text

<del> tag ऐसे text को represent करता है जिसे हटाया गया या अब valid नहीं माना जा रहा है। Browser इसे सामान्यतः line-through यानी text के बीच से एक line के साथ दिखाता है।

<ins> – Inserted Text

<ins> tag ऐसे text को represent करता है जिसे document में नया insert किया गया हो। Browser इसे सामान्यतः underline के साथ दिखाता है। यह <del> के साथ revision या updated content दिखाने में useful हो सकता है।

<sub> – Subscript Text

<sub> tag text को normal baseline से नीचे और थोड़ा छोटा दिखाता है। इसका सबसे common use chemical formulas लिखने में होता है, जैसे पानी का formula H₂O।

इस example में 2 को <sub> के अंदर रखा गया है, इसलिए browser इसे H के नीचे छोटा करके display करता है।

<sup> – Superscript Text

<sup> tag text को normal baseline से ऊपर और थोड़ा छोटा दिखाता है। इसका इस्तेमाल mathematical powers, exponents और कुछ अन्य notations में किया जाता है।

Complete HTML Formatting Example

अब नीचे एक complete example दिया गया है जिसमें ऊपर बताए गए सभी major formatting elements को एक ही HTML page में इस्तेमाल किया गया है। इस example को Run करके आप सभी tags का output एक साथ देख सकते हैं।

Important Points to Remember

• <b> text को visually bold करता है, जबकि <strong> text की importance भी indicate करता है।
• <i> text को italic दिखाता है, जबकि <em> emphasis को represent करता है।
• <mark> text को highlight करने के लिए उपयोगी है।
• <small> text को comparatively छोटा दिखाता है।
• <del> deleted content को represent करता है।
• <ins> inserted content को represent करता है।
• <sub> subscript के लिए और <sup> superscript के लिए इस्तेमाल होता है।
• Headings <h1> से <h6> तक page content की hierarchy बनाने में मदद करती हैं।

Conclusion

HTML formatting elements webpage के text को ज्यादा clear, readable और meaningful बनाने में मदद करते हैं। अलग-अलग tags का इस्तेमाल अलग purpose के लिए किया जाता है। शुरुआत में <b>, <strong>, <i>, <em>, <mark>, <small>, <del>, <ins>, <sub> और <sup> जैसे tags को practical examples के साथ समझना HTML सीखने के लिए काफी useful है।

जब आप इन tags को अपने webpage में use करें, तो केवल text का appearance देखने के बजाय उनके meaning और purpose को भी ध्यान में रखें। इससे आपका HTML code ज्यादा clear और structured रहेगा।

---

---

---

---

---

---

Quizzes in Hindi

---

---

---