आपने Word Processors जैसे; MS Word, WordPad आदि में Text को Bold, Italic किया होगा? इसे Text Formatting कहा जाता है.
Text Formatting आप HTML में भी कर सकते है. HTML Language में Text Formatting के लिए अलग से Special Elements Define किये गये है. Special Elements को Formatting Elements कहा जाता है.
Formatting Elements Text को Special Meaning में Define करते है. जैसे; <b>
Element Bold Text Define करता है, <i>
Element Italic Text Define करता है. इनके अलावा भी कई प्रकार के Formatting Tags HTML में Design किये गये है. जिनके बारे में नीचे बताया जा रहा है.
HTML में Formatting Tags के विभिन्न प्रकार
Table of Content
- <b> – Bold Text
- <strong> – Strong Text
- <i> – Italic Text in HTML
- <em> – Emphasized Text
- <strike> – Strikethrough Text
- <u> – Underline Text
- <mark> – Marked Text
- <del> – Deleted Text
- <ins> – Inserted Text
- <sup> – Superscript Text
- <sub> – Subscript Text
- <big> – Bigger Text
- <small> – Small Text
- आपने क्या सीखा?
1. Bold Text in HTML
HTML में Bold Text Define करने के लिए Bold Element का इस्तेमाल किया जाता है. इससे Text अपने पास वाले Text की तुलना में गहरा और मोटा हो जाता है. HTML में Bold Text ऐसे लिखा जाता है:
<html>
<head>
<title>Text Formatting Example</title></head>
<body>
<p>This is Normal Text.</p>
<p><b>This is Bold Text.</b></p>
</body>
</html>
जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:
This is Normal Text.
This is Bold Text.
2. Strong Text in HTML
Strong Element से किसी Important (महत्वपूर्ण) शब्द/शब्दांश को Define किया जाता है. Strong Element भी शब्दों को अपने पास वाले शब्दों की तुलना में गहरा और मोटा कर देता है. HTML में Strong Element को इस प्रकार Define किया जाता है.
<html>
<head>
<title>Text Formatting Example</title></head>
<body>
<p>This is Normal Text.</p>
<p><strong>This is Important Text.</strong></p>
</body>
</html>
जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:
This is Normal Text.
This is Important Text.
Bold vs Strong Element
आप सोच रहे होंगे कि दोनों जब एक ही प्रकार की Formatting करते है, तो दोनों की क्या जरूरत है? और इनमे से किसी एक को कब Define करना चाहिए?
इसका सीधा-सा जवाब है. यदि आपका शब्द अन्य शब्दों की तुलना में महत्वपूर्ण है, तो आप Strong Element को Use कीजिए. अन्यथा आप Bold Element का इस्तेमाल कीजिए.
3. Italic Text in HTML
HTML Document में शब्दों को तिरछा लिखने के लिए Italic Element का इस्तेमाल किया जाता है. Italic Element शब्दों को अन्य शब्दों की तुलना में थोडा तिरछा कर देता है. Italic Element को इस प्रकार Define किया जाता है.
<html>
<head>
<title>Text Formatting Example</title></head>
<body>
<p>This is Normal Text.</p>
<p><i>This is Italic Text.</i></p>
</body>
</html>
जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:
This is Normal Text.
This is Italic Text.
4. Emphasized Text in HTML
Emphasized Element से भी शब्दों को तिरछा किया जाता है. लेकिन, एक Emphasized Text का महत्व Italic Text से ज्यादा होता है. Emphasized Element को इस प्रकार Define किया जाता है.
<html>
<head>
<title>Text Formatting Example</title></head>
<body>
<p>This is Normal Text.</p>
<p><em>This is Emphasized Text.</em></p>
</body>
</html>
जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:
This is Normal Text.
This is Emphasized Text.
Italic vs Emphasized Element
यहाँ भी आपको वही बात याद रखनी है, जो आपने Bold vs Strong Element में किया है. यदि आपके Text की Importance अन्य Text की तुलना में ज्यादा है, तो आप Emphasized Tag को Use कीजिए. अन्यथा आप Italic Element का इस्तेमाल कीजिए.
5. Strikethrough Text in HTML
Strikethrough Element शब्द/शब्दांश के बीच में एक आडि रेखा खींच देता है. इसे प्रकार Define किया जाता है.
<html>
<head>
<title>Text Formatting Example</title></head>
<body>
<p>This is Normal Text.</p>
<p><strike>This is Strikethrough Text.</strike></p>
</body>
</html>
जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:
This is Normal Text.
This is Strikethrough Text.
6. Underline Text in HTML
आपको याद होगा जब आप School/College में Notes लिखते है/थे, तो महत्वपूर्ण शब्दों या पंक्ति के नीचे एक Line खींच देते है. जिससे वह शब्द अलग दिखाई देता था. यहि कार्य HTML Document में Underline Element से किया जाता है. Underline Element Text के नीचे एक आडि रेखा खींच देता है. इसे इस प्रकार Define किया जाता है.
<html>
<head>
<title>Text Formatting Example</title></head>
<body>
<p>This is Normal Text.</p>
<p><u>This is Underlined Text.</u></p>
</body>
</html>
जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:
This is Normal Text.
This is Underlined Text.
7. Marked Text in HTML
Marked Text को Mark Element द्वारा Define किया जाता है. इससे खास शब्दों को Highlight किया जाता है. Mark Element को इस प्रकार Define किया जाता है.
<html>
<head>
<title>Text Formatting Example</title></head>
<body>
<p>This is Normal Text.</p>
<p>This is <mark>Marked</mark> Text.</p>
</body>
</html>
जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:
This is Normal Text.
This is Marked Text.
8. Deleted Text in HTML
Delete Element से Document से हटाए गए (Removed) शब्द को Define किया जाता है. जिस शब्द पर Delete Element Apply किया जाता है. वह शब्द बीच में से एक आडि रेखा द्वारा कट जाता है.
<html>
<head>
<title>Text Formatting Example</title></head>
<body>
<p>This is Normal Text.</p>
<p>This is <del>Deleted</del> Text.</p>
</body>
</html>
जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:
This is Normal Text.
This is Deleted Text.
9. Inserted Text in HTML
Insert Element द्वारा Delete किए गए शब्द की जगह पर अन्य शब्द Define किया जाता है. Insert Element को इस प्रकार Define किया जाता है.
<html>
<head>
<title>Text Formatting Example</title></head>
<body>
<p>This is Normal Text.</p>
<p>This is <del>Deleted</del> <ins>Inserted</ins>Text.</p>
</body>
</html>
जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:
This is Normal Text.
This is Deleted Inserted Text.
10. Superscript Text in HTML
Subscript Element द्वारा Superscript Text को Define किया जाता है. यह Text अपने पास वाले Text की तुलना में आधा हो जाता है, और Users को पास वाले शब्द के ऊपर नजर आता है. Subscript Text को इस प्रकार Define किया जाता है.
<html>
<head>
<title>Text Formatting Example</title></head>
<body>
<p>This is Normal Text.</p>
<p>This is <sup>Superscript</sup> Text.</p>
</body>
</html>
जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:
This is Normal Text.
This is Superscript Text.
11. Subscript Text in HTML
Subscript Element द्वारा Subscript Text को Define किया जाता है. यह Text Superscript Text से बिल्कुल उल्टा होता है. क्योंकि यह Text अपने पास वाले शब्द से नीचा दिखाई देता है. Subscript Text इस प्रकार Define किया जाता है.
<html>
<head>
<title>Text Formatting Example</title></head>
<body>
<p>This is Normal Text.</p>
<p>This is <sub>Subscript</sub> Text.</p>
</body>
</html>
जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:
This is Normal Text.
This is Subscript Text.
12. Bigger Text in HTML
Big Element द्वारा Larger Text को Define किया जाता है. Larger Text अपने पास वाले Text की तुलना में थोडा बडा हो जाता है. Big Text को इस प्रकार Define किया जाता है.
<html>
<head>
<title>Text Formatting Example</title></head>
<body>
<p>This is Normal Text.</p>
<p>This is <big>Big</big> Text.</p>
</body>
</html>
जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:
This is Normal Text.
This is Big Text.
13. Small Text in HTML
Small Element द्वारा Small Text को Define किया जाता है. Small Text अपने पास वाले Text की तुलना में थोडा छोटा हो जाता है. Small Text को इस प्रकार Define किया जाता है.
<html>
<head>
<title>Text Formatting Example</title></head>
<body>
<p>This is Normal Text.</p>
<p>This is <small>Small</small> Text.</p>
</body>
</html>
जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:
This is Normal Text.
This is Small Text.
आपने क्या सीखा?
इस Lesson में हमने HTML में Text Formatting की जानकारी दी है. आपने जान कि HTML से विभिन्न प्रकार की Text Formatting जैसे; Bold, Italic, Strikethrough, Big, Small, Strong आदि कैसे की जा सकती है? हमे उम्मीद है कि यह Lesson आपके लिए उपयोगी साबित होगा.
#BeDigital
Very Good Shar ( Shar Ap say ak Qustion ha ) ? Shar html ka all tags kis page
may milyga
शिवम जी, आप इस पोस्ट को देखिए
HTML All Tabs List
Thank u respected sir and mam🙏🙏🙏🙏🙏🙏🙏
Very useful abd helpful notes thanks again