HTML टेक्स्ट फ़ॉर्मैटिंग
आप पहले ही style विशेषता से टेक्स्ट का रूप बदल चुके हैं। फ़ॉर्मेटिंग टैग एक अलग सवाल का जवाब देती हैं: टेक्स्ट का यह हिस्सा क्या मतलब रखता है? ज़रूरी चेतावनियाँ, बोली जैसा ज़ोर, हाइलाइट, संपादन, छोटे नोट और H₂O जैसी सूत्रें समर्पित HTML तत्वों में आती हैं। ब्राउज़र अक्सर उन्हें डिफ़ॉल्ट रूप से मोटा या तिरछा दिखाते हैं, लेकिन सहायक उपकरण और खोज प्रणालियाँ भी अर्थ का उपयोग कर सकती हैं — जो अकेले रंग नहीं देता।
HTML टेक्स्ट फ़ॉर्मेटिंग क्या है?
टेक्स्ट फ़ॉर्मेटिंग तत्व पैराग्राफ़ (या मिलते-जुलते टेक्स्ट) के अंदर किसी शब्द या वाक्यांश को लपेटकर भूमिका चिह्नित करते हैं: महत्व, ज़ोर, हाइलाइट, हटाना, जोड़ना और अधिक। ये इनलाइन तत्व हैं। ये p या h1 की तरह नया ब्लॉक शुरू नहीं करते। उन्हें ठीक उसी टेक्स्ट खंड के चारों ओर रखें जो वह भूमिका रखता है, फिर बंद करें ताकि वाक्य का बाकी हिस्सा सामान्य रह जाए।
सीधा उत्तर
अर्थ के लिए अर्थपूर्ण फ़ॉर्मेटिंग टैग इस्तेमाल करें: strong मज़बूत महत्व के लिए, em दबाव-ज़ोर के लिए (जैसे बोलते समय शब्द पर ज़ोर दें), mark प्रासंगिक हाइलाइट के लिए, small छोटे नोट या किनारे की टिप्पणी के लिए, del और ins हटाए या जोड़े गए टेक्स्ट के लिए, और sub / sup सबस्क्रिप्ट व सुपरस्क्रिप्ट के लिए। जब अर्थ मायने रखे तो इन टैग को प्राथमिकता दें। जब सिर्फ मोटा या तिरछा रूप चाहिए बिना अतिरिक्त अर्थ के, CSS इस्तेमाल करें — पिछली सत्र की इनलाइन style सोच सहित — न कि strong या em का गलत उपयोग।
टैग संदर्भ एक नज़र में
📊 सामान्य फ़ॉर्मेटिंग टैग
| टैग | सामान्य अर्थ | डिफ़ॉल्ट रूप (अक्सर) |
|---|---|---|
| strong | मज़बूत महत्व | मोटा |
| em | ज़ोर / दबाव | तिरछा |
| mark | हाइलाइट / प्रासंगिक | पीला-सा बैकग्राउंड |
| small | किनारे की टिप्पणी / छोटा नोट | छोटा टेक्स्ट |
| del | हटाया गया टेक्स्ट | काटा हुआ |
| ins | जोड़ा गया टेक्स्ट | रेखांकित |
| sub | सबस्क्रिप्ट | नीचे छोटा टेक्स्ट |
| sup | सुपरस्क्रिप्ट | ऊपर छोटा टेक्स्ट |
पहले strong और em
strong और em वह जोड़ी है जिसका आप सबसे अधिक उपयोग करेंगे। जब सामग्री महत्वपूर्ण हो तो strong लें — मुख्य शब्द, चेतावनी, टेक्स्ट में आवश्यक फ़ील्ड लेबल। जब बोलते समय आवाज़ बदलकर शब्द पर ज़ोर देंगे तो em लें। डिफ़ॉल्ट मोटा और तिरछा सिर्फ सामान्य प्रस्तुति है; अगर बाद में स्टाइलशीट रूप बदल दे तो भी टैग अर्थ रखती हैं।
महत्व और ज़ोर
html<p>
<strong>अंतिम कीमत</strong> में कर शामिल है।
कृपया भुगतान करने से <em>पहले</em> रिफ़ंड नियम पढ़ें।
</p>
नमूने को पढ़ना
strong«अंतिम कीमत» को लपेटता है क्योंकि वह वाक्यांश वाक्य में महत्वपूर्ण हैem«पहले» को लपेटता है क्योंकि समय वह विचार है जिस पर ज़ोर है- दोनों टैग एक ही पैराग्राफ़ में हैं; वे
pकी जगह नहीं लेतीं - अगर सिर्फ नेवी रंग का टेक्स्ट चाहिए था बिना महत्व के अर्थ के, तो
style(या बाद में CSS) बेहतर उपकरण होता
एक पैराग्राफ़ में और फ़ॉर्मेटिंग टैग
जब strong और em सहज लगें, हाइलाइट, संपादन, छोटे नोट और सूत्रों के लिए मदद जोड़ें। नेस्टिंग उथली रखें: सिर्फ उन्हीं शब्दों को लपेटें जिन्हें प्रत्येक भूमिका चाहिए।
कई फ़ॉर्मेटिंग टैग साथ
html<p>
पानी H<sub>2</sub>O है। सुरक्षा नोट <strong>महत्वपूर्ण</strong> है।
कृपया इसे <em>ध्यान से</em> पढ़ें।
समयसीमा <del>शुक्रवार</del> से <ins>सोमवार</ins> हो गई।
नोट: <small>कीमतें बदल सकती हैं</small>।
खोज परिणाम: <mark>HTML</mark> फ़ॉर्मेटिंग।
क्षेत्रफल: 12<sup>2</sup> वर्ग मीटर।
</p>
हर मदद क्या कर रही है
subपानी के सूत्र में «2» को नीचे ले जाता है;sup12² में घातांक को ऊपर उठाता हैdelऔरinsसंपादन का निशान दिखाते हैं — पुराना मान बाहर, नया अंदरsmallगौण छोटे नोट को चिह्नित करता है, मुख्य दावे को नहींmarkप्रासंगिक परिणाम हाइलाइट करता है, खोज हाइलाइट जैसाstrongऔरemउसी पैराग्राफ़ में अभी भी महत्व और ज़ोर चिह्नित करते हैं
हर वाक्य में हर टैग की ज़रूरत नहीं। वही चुनें जो आपके टेक्स्ट के असली अर्थ से मेल खाएँ।
अर्थ टैग बनाम केवल दिखावट वाला स्टाइल
पुराने पेज कभी-कभी मोटे और तिरछे रूप के लिए बिना मज़बूत अर्थ के b और i इस्तेमाल करते हैं। इस कोर्स में जब सामग्री महत्वपूर्ण हो तो strong और जब बोलते समय शब्द पर ज़ोर देंगे तो em को प्राथमिकता दें। जब सिर्फ दिखावट चाहिए तो CSS इस्तेमाल करें। यह आदत HTML को ईमानदार रखती है: फ़ॉर्मेटिंग टैग सामग्री बताती हैं, स्टाइलशीट प्रस्तुति बताती हैं।
अपने एडिटर में अभ्यास
- उत्पाद कीमत पर एक सामान्य पैराग्राफ़ लिखें।
- उत्पाद नाम को
strongमें लपेटें। - एक चेतावनी शब्द को
emमें लपेटें। - पुरानी कीमत को
delऔर नई कोinsसे चिह्नित करें। - वैकल्पिक:
smallसे छोटा फ़ुटनोट-जैसा नोट, याsub/supसे सूत्र का टुकड़ा जोड़ें। - सहेजें और पेज खोलें। पुष्टि करें कि टैग बंद हैं और अर्थ साफ़ पढ़ा जाता है।
- जानबूझकर एक अंत टैग छोड़ें, रिफ़्रेश करें, देखें बाकी पंक्ति कैसे स्टाइल रहती है, फिर ठीक करें।
बिना बंद टैग का स्टाइल पैराग्राफ़ में «लीक» होते देखना सावधानीपूर्ण नेस्टिंग सिखाता है — सिर्फ सही नमूने कॉपी करने से तेज़।
गलतियाँ जो फ़ॉर्मेटिंग को कमज़ोर करती हैं
- जब शब्द सच में महत्वपूर्ण हो तो सिर्फ
style="font-weight: bold"— अर्थ के लिएstrongप्राथमिकता दें - सिर्फ टेक्स्ट मोटा करने के लिए हर जगह
strong— महत्व को पतला कर देता है - बिना वजह पाँच फ़ॉर्मेटिंग टैग एक-दूसरे में नेस्ट करना
- असली स्क्रिप्ट (गणित, रसायन, फ़ुटनोट) की जगह सजावट के लिए
sup/sub - अंत टैग भूलना ताकि बाकी पेज मोटा, तिरछा या हाइलाइट विरासत में ले ले
markको असंबंधित पूरे पैराग्राफ़ के लिए सामान्य पीले पेंट की तरह मानना
सारांश
- फ़ॉर्मेटिंग टैग टेक्स्ट के अंदर अर्थ जोड़ती हैं, सिर्फ सजावट नहीं
strongऔरemसे शुरू करें; जरूरत परmark,small,del,ins,subऔरsupजोड़ें- जब महत्व, ज़ोर, संपादन या स्क्रिप्ट मायने रखें तो अर्थपूर्ण टैग प्राथमिकता दें
- जब बिना अतिरिक्त अर्थ के सिर्फ दिखावट चाहिए तो CSS इस्तेमाल करें
- नेस्टिंग सरल रखें और खोली हर टैग हमेशा बंद करें
- टैग वाक्य के अर्थ से चुनें, हर चीज़ मोटा करने की आदत से नहीं
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी