टेक्स्ट फॉर्मेटिंग
आज हम text formatting tags देखते हैं जो कुछ शब्दों को मतलब के लिए wrap करते हैं: strong महत्व के लिए, em ज़ोर के लिए, और mark उस highlight के लिए जिसे पाठक देखे।
- 1
कुछ शब्दों को format करना
पिछले लेसन में headings और paragraphs से पेज की outline बनाई। कभी-कभी paragraph के अंदर एक शब्द को extra मतलब चाहिए: वह ज़रूरी है, उस पर ज़ोर है, या उसे highlight करना है जैसे नोट पर निशान।
यही text formatting है। सिर्फ़ उन्हीं शब्दों को छोटे inline element में wrap करते हो। आज के उदाहरण में तीन tags हैं:
<strong>,<em>, और<mark>। - 2
समस्या: जब हर शब्द एक जैसा दिखे और जरूरी बात दब जाए
सादा paragraph हर शब्द को एक जैसा मानता है। सेल वाले नोटिस में नई कीमत बाकी वाक्य से ज़्यादा मायने रखती है। बोलते समय एक शब्द पर ज़ोर पूरी लाइन का मतलब बदल देता है। Highlight कहता है, “यहाँ देखो।”
इसलिए HTML ने इन कामों के लिए छोटे signs रखे।
<strong>महत्व बताता है।<em>ज़ोर बताता है।<mark>मौजूदा संदर्भ में highlight बताता है। Browser उन्हें बोल्ड, इटैलिक, या पीले बैकग्राउंड से दिखा सकता है, लेकिन पहला काम मतलब है। - 3
Browser इन Inline Semantic Tags को कैसे रेंडर करता है
ये तीनों tags inline हैं। ये paragraph के अंदर बैठते हैं और नई लाइन नहीं शुरू करते। Browser अब भी एक
<p>देखता है, बस उसके अंदर कुछ शब्द चिह्नित होते हैं — वही बात जो Elements वाले लेसन में<strong>के साथ देखी थी।सिर्फ़ उन्हीं शब्दों को wrap करो जिन्हें मतलब चाहिए। अगर पूरा paragraph
<strong>में डाल दोगे, तो कुछ भी अलग नहीं दिखेगा। - 4
आज की प्रैक्टिस: एक सेल ऑफर में शब्दों को खास बनाना
नीचे वाली छोटी सेल लाइन पढ़ो, फिर browser pane देखो। कौन से शब्द बोल्ड हैं, कहाँ ज़ोर है, और क्या highlight है — ध्यान से देखो।
- 5
अहम नियम: पहले सही अर्थ (Semantics), दिखावट बाद में
जब शब्दों में महत्व या ज़ोर हो,
<strong>और<em>चुनो। दिखने का बदलाव बाद में CSS कर सकती है। आज हम मतलब पर रुकते हैं, और उदाहरण वाले तीन tags पर।
यह शब्दों की गंभीरता और बोलने के लहज़े (Stress) को दर्शाता है। दृष्टिबाधितों के लिए स्क्रीन रीडर्स अपनी आवाज़ का उतार-चढ़ाव बदलकर इसे पढ़ते हैं।
सिर्फ़ फॉन्ट को मोटा या तिरछा करते हैं, बिना किसी अतिरिक्त महत्व के। स्क्रीन रीडर्स इन्हें सामान्य आवाज़ में ही पढ़ते हैं।
आप क्या सीखेंगे
- 1Paragraph के अंदर कुछ शब्दों को मतलब क्यों चाहिए
- 2strong महत्व बताता है
- 3em ज़ोर बताता है
- 4mark संदर्भ में highlight करता है
- 5सिर्फ़ ज़रूरी शब्दों को wrap करो
लाइन-बाय-लाइन
<strong>₹499</strong>ज़रूरी टेक्स्ट को चिह्नित करता है। Browser अक्सर बोल्ड दिखाता है, और assistive tools इसे महत्वपूर्ण मानते हैं।
<em>must</em>ज़ोर बताता है — वह stress जो बोलते समय एक शब्द पर आता है। Browser अक्सर इटैलिक दिखाता है।
<mark>Offer ends Friday.</mark>मौजूदा संदर्भ में टेक्स्ट को highlight करता है, जैसे नोट्स पर पीला मार्कर। Default अक्सर पीला बैकग्राउंड होता है।
खुद ट्राई करो
एक छोटी सेल पर एक paragraph लिखो। कीमत <strong> में हो, एक stressed शब्द <em> में, और आखिरी तारीख <mark> में।
हिंट: सिर्फ़ वे शब्द wrap करो। पूरा paragraph strong में मत डालो।
गलती कहाँ होती है
- 1.पूरा paragraph
<strong>में डाल देना। फिर कुछ भी अलग नहीं बचता। - 2.सिर्फ़ दिखने के लिए tag चुनना। पहले मतलब के लिए
strong,em, याmarkचुनो। दिखना बाद में CSS संभालेगी।
इंटरव्यू की तैयारी (क्लिक करके उत्तर देखें)
Q: <strong> और <b> में क्या अर्थपूर्ण अंतर है?↓
<strong> का अर्थ है गंभीर महत्व (importance)। यह स्क्रीन रीडर्स को आवाज़ का लहज़ा बदलने का संकेत देता है और सर्च इंजनों के लिए महत्वपूर्ण होता है। जबकि <b> सिर्फ़ फॉन्ट को बोल्ड दिखाने के लिए होता है, बिना किसी अतिरिक्त अर्थ के।
Q: <em> और <i> में Accessibility के नज़रिए से क्या फ़र्क है?↓
<em> वाक्य में विशेष ज़ोर (stress emphasis) को दर्शाता है, जिसे स्क्रीन रीडर्स अलग पिच या उतार-चढ़ाव के साथ पढ़ते हैं। <i> सिर्फ़ इटैलिक स्टाइल या वैकल्पिक आवाज़ (जैसे तकनीकी शब्द या विचार) के लिए होता है।
Q: <mark> tag का सही उपयोग कब किया जाना चाहिए?↓
जब किसी पाठ को मौजूदा संदर्भ में विशेष रूप से ध्यान आकर्षित करने के लिए हाइलाइट करना हो (जैसे खोज परिणामों में ढूंढे गए शब्द को हाइलाइटर पेन की तरह चमकाना)।