टेक्स्ट से जुड़ी बुनियादी बातें

जिस तरह आपके टेक्स्ट एडिटर में <h1> से लेकर <h6> तक के हेडिंग उपलब्ध होते हैं. साथ ही, टेक्स्ट के सेक्शन को सही और विज़ुअल तरीके से फ़ॉर्मैट करने के कई तरीके होते हैं. उसी तरह, एचटीएमएल में भी गद्य का मतलब बताने के लिए, सिमेंटिक और नॉन-सिमेंटिक एलिमेंट का एक जैसा सेट उपलब्ध होता है.

इस सेक्शन में, टेक्स्ट को मार्कअप करने के मुख्य तरीकों या टेक्स्ट की बुनियादी बातों के बारे में बताया गया है. इसके बाद, हम एट्रिब्यूट के बारे में चर्चा करेंगे. फिर, टेक्स्ट को मार्कअप करने के अन्य तरीकों के बारे में जानेंगे. जैसे, सूचियां, टेबल, और फ़ॉर्म.

हेडिंग के बारे में दोबारा जानकारी

सेक्शन के छह हेडिंग एलिमेंट होते हैं: <h1>, <h2>, <h3>, <h4>, <h5>, और <h6>. इनमें <h1> सबसे अहम और <h6> सबसे कम अहम होता है. कई सालों तक, डेवलपर को बताया गया कि ब्राउज़र, दस्तावेज़ों की आउटलाइन बनाने के लिए हेडिंग का इस्तेमाल करते थे. असल में, यह एक लक्ष्य था, लेकिन ब्राउज़र ने कभी भी दस्तावेज़ की आउटलाइन बनाने की सुविधाओं को लागू नहीं किया. साथ ही, आउटलाइन बनाने के लिए सुझाए गए एल्गोरिदम को, एचटीएमएल की खास जानकारी से आधिकारिक तौर पर हटा दिया गया था. हालांकि, स्क्रीन रीडर का इस्तेमाल करने वाले लोग, पेज के कॉन्टेंट के बारे में जानने के लिए, हेडिंग पर काफ़ी भरोसा करते हैं. वे h कुंजी की मदद से हेडिंग के बीच नेविगेट करते हैं. यह पक्का करना ज़रूरी है कि हेडिंग के लेवल को लॉजिकल तरीके से लागू किया जाए. जैसे, किसी दस्तावेज़ की आउटलाइन बनाई जाती है. ऐसा करने से, आपका कॉन्टेंट ऐक्सेस किया जा सकता है. इसलिए, ऐसा करने का सुझाव दिया जाता है.

डिफ़ॉल्ट रूप से, ब्राउज़र <h1> को सबसे बड़े, <h2> को उससे थोड़ा छोटा, और इसके बाद के हर हेडिंग लेवल को डिफ़ॉल्ट रूप से छोटा स्टाइल करते हैं. पहले, यूज़र एजेंट स्टाइलशीट, सेक्शनिंग एलिमेंट में नेस्ट किए गए <h1> एलिमेंट के फ़ॉन्ट साइज़ को भी कम कर देती थीं. जैसे, <article>, <aside>, <nav>, या <section>.

कुछ यूज़र एजेंट स्टाइलशीट में, नेस्ट किए गए <h1> एलिमेंट को स्टाइल करने के लिए, ये (या इसी तरह के) सिलेक्टर शामिल थे. इससे ऐसा लगता था कि वे हेडिंग के निचले लेवल पर हैं:

/* Legacy UA stylesheet behavior (now removed from browsers and the HTML spec) */
h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

हालांकि, Accessibility Object Model (AOM) और स्क्रीन रीडर नेस्टिंग के आधार पर, हेडिंग के लेवल में कभी बदलाव नहीं करते थे. नेस्ट किए गए <h1> को हमेशा "हेडिंग, लेवल 1" के तौर पर रिपोर्ट किया जाता था. इससे एक गड़बड़ी हुई. इसमें नेस्ट किए गए हेडिंग, विज़ुअल तौर पर छोटे दिखते थे, जबकि वे सहायक टेक्नोलॉजी के लिए टॉप-लेवल के हेडिंग बने रहते थे.

एचटीएमएल की खास जानकारी में, दस्तावेज़ की आउटलाइन बनाने के एल्गोरिदम को हटा दिया गया है. इसलिए, ब्राउज़र ने यूज़र एजेंट स्टाइलशीट के इन पुराने नियमों को हटा दिया है. नतीजतन, नेस्ट किए गए <h1> एलिमेंट, अपने-आप सिकुड़ने के बजाय, अपने स्टैंडर्ड <h1> फ़ॉन्ट साइज़ को बनाए रखते हैं.

विज़ुअल स्टाइलिंग या स्ट्रक्चरल क्रम के लिए, सेक्शनिंग एलिमेंट में <h1> एलिमेंट को नेस्ट करने पर भरोसा न करें. दस्तावेज़ के स्ट्रक्चर के आधार पर, हमेशा क्रम से हेडिंग एलिमेंट (<h1> से लेकर <h6>) का इस्तेमाल करके अपने कॉन्टेंट को मार्कअप करें. इससे यह पक्का होता है कि आपका कॉन्टेंट, सर्च इंजन, स्क्रीन रीडर, और आने वाले समय में रखरखाव करने वाले लोगों के लिए साफ़ तौर पर उपलब्ध हो.

हेडिंग के अलावा, ज़्यादातर स्ट्रक्चर्ड टेक्स्ट, पैराग्राफ़ की सीरीज़ से बना होता है. एचटीएमएल में, पैराग्राफ़ को <p> टैग से मार्कअप किया जाता है. क्लोज़िंग टैग ज़रूरी नहीं है, लेकिन इसका इस्तेमाल करने का सुझाव दिया जाता है.

#about सेक्शन में एक हेडिंग और कुछ पैराग्राफ़ हैं:

यह सेक्शन, लैंडमार्क नहीं है, क्योंकि इसका ऐक्सेस किया जा सकने वाला नाम नहीं है. इसे region में बदलने के लिए, जो कि एक लैंडमार्क रोल है, aria-labelledby का इस्तेमाल करके, ऐक्सेस किया जा सकने वाला नाम दिया जा सकता है:

<section id="about"  aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

सिर्फ़ तब लैंडमार्क बनाएं, जब इसकी ज़रूरत हो. बहुत ज़्यादा लैंडमार्क होने पर, स्क्रीन रीडर का इस्तेमाल करने वाले लोगों को परेशानी हो सकती है.

कोटेशन और उद्धरण

किसी लेख या ब्लॉग पोस्ट को मार्कअप करते समय, हो सकता है कि आपको कोटेशन या पुल-कोटेशन शामिल करना हो. इसके साथ, उद्धरण दिख सकता है या नहीं भी दिख सकता है. इन तीन कॉम्पोनेंट के लिए एलिमेंट होते हैं: <blockquote>, <q>, और <cite>. इनसे उद्धरण दिखता है. इसके अलावा, खोज के लिए ज़्यादा जानकारी देने के लिए, cite एट्रिब्यूट का इस्तेमाल किया जा सकता है.

#feedback सेक्शन में एक हेडर और तीन समीक्षाएं हैं. ये समीक्षाएं ब्लॉककोट हैं. इनमें से कुछ में कोटेशन शामिल हैं, इसके बाद, कोटेशन के उद्धरण वाला एक पैराग्राफ़ है. जगह बचाने के लिए, तीसरी समीक्षा को छोड़कर, मार्कअप इस तरह होगा:

कोटेशन के लेखक या उद्धरण के बारे में जानकारी, कोटेशन का हिस्सा नहीं होती. इसलिए, यह <blockquote> में नहीं होती, बल्कि कोटेशन के बाद आती है. आम तौर पर, इन्हें उद्धरण कहा जाता है, लेकिन असल में ये किसी खास संसाधन का हवाला नहीं देते. इसलिए, इन्हें <p> पैराग्राफ़ एलिमेंट में शामिल किया जाता है.

उद्धरण तीन लाइनों में दिखता है. इसमें लेखक का नाम, पिछली भूमिका, और पेशेवर लक्ष्य शामिल हैं. <br> लाइन ब्रेक से, टेक्स्ट के ब्लॉक में लाइन ब्रेक बनता है. इसका इस्तेमाल, पते, कविता, और सिग्नेचर ब्लॉक में किया जा सकता है. पैराग्राफ़ को अलग करने के लिए, लाइन ब्रेक का इस्तेमाल कैरिज रिटर्न के तौर पर नहीं किया जाना चाहिए. इसके बजाय, पहले पैराग्राफ़ को बंद करें और नया पैराग्राफ़ खोलें. पैराग्राफ़ के लिए पैराग्राफ़ का इस्तेमाल करना, सिर्फ़ ऐक्सेस करने की सुविधा के लिए ही नहीं, बल्कि स्टाइलिंग के लिए भी अच्छा है. <br> एलिमेंट सिर्फ़ एक लाइन ब्रेक है. इस पर बहुत कम सीएसएस प्रॉपर्टी का असर पड़ता है.

हमने हर ब्लॉककोट के बाद, पैराग्राफ़ में उद्धरण की जानकारी दी है. हालांकि, पहले दिखाए गए कोटेशन को इस तरह कोड किया गया है, क्योंकि वे किसी बाहरी सोर्स से नहीं लिए गए थे. अगर वे किसी बाहरी सोर्स से लिए गए थे, तो सोर्स का हवाला दिया जा सकता है.

अगर समीक्षा, समीक्षा करने वाली किसी वेबसाइट, किताब या किसी अन्य काम से ली गई है, तो <cite> एलिमेंट का इस्तेमाल, सोर्स के टाइटल के लिए किया जा सकता है. <cite> का कॉन्टेंट, किसी किताब का टाइटल, किसी वेबसाइट या टीवी शो का नाम या किसी कंप्यूटर प्रोग्राम का नाम भी हो सकता है. <cite> एनकैप्सुलेशन का इस्तेमाल तब किया जा सकता है, जब सोर्स का ज़िक्र सामान्य तौर पर किया जा रहा हो या सोर्स को कोट किया जा रहा हो या उसका हवाला दिया जा रहा हो. <cite> का कॉन्टेंट, काम होता है, न कि लेखक.

अगर Blendan Smooth का कोटेशन, उनकी ऑफ़लाइन मैगज़ीन से लिया गया था, तो ब्लॉककोट को इस तरह लिखा जाएगा:

उद्धरण एलिमेंट <cite> का कोई इंप्लिसिट रोल नहीं होता. इसे अपने कॉन्टेंट से, ऐक्सेस किया जा सकने वाला नाम मिलना चाहिए. इसमें aria-label शामिल न करें.

जब कॉन्टेंट को दिखाया नहीं जा सकता, तब क्रेडिट देने के लिए, cite एट्रिब्यूट का इस्तेमाल किया जाता है. इसकी वैल्यू के तौर पर, कोट की गई जानकारी के लिए, सोर्स दस्तावेज़ या मैसेज का यूआरएल दिया जाता है. यह एट्रिब्यूट, <q> और <blockquote>, दोनों पर मान्य है. यह एक यूआरएल है. इसे मशीन पढ़ सकती है, लेकिन यह पाठक को नहीं दिखता:

</p> क्लोज़िंग टैग ज़रूरी नहीं है (और इसका इस्तेमाल करने का सुझाव दिया जाता है), लेकिन </blockquote> क्लोज़िंग टैग हमेशा ज़रूरी होता है.

ज़्यादातर ब्राउज़र, <blockquote> इनलाइन दिशाओं में पैडिंग जोड़ते हैं और <cite> कॉन्टेंट को इटैलिक करते हैं. इसे सीएसएस की मदद से कंट्रोल किया जा सकता है. <blockquote> कोटेशन मार्क नहीं जोड़ता, लेकिन सीएसएस से जनरेट किए गए कॉन्टेंट की मदद से, कोटेशन मार्क जोड़े जा सकते हैं. <q> एलिमेंट, डिफ़ॉल्ट रूप से कोटेशन मार्क जोड़ता है. इसके लिए, भाषा के हिसाब से सही कोटेशन मार्क का इस्तेमाल किया जाता है.

#teachers सेक्शन में, HAL को कोट किया गया है. इसमें कहा गया है, "मुझे अफ़सोस है , लेकिन मुझे डर है कि मैं ऐसा नहीं कर सकता, ." अंग्रेज़ी और फ़्रेंच में इसका कोड यह है:

इनलाइन कोटेशन एलिमेंट, <q>, भाषा के हिसाब से सही कोटेशन मार्क जोड़ता है. यूज़र-एजेंट की डिफ़ॉल्ट स्टाइल में, ओपन-कोट और क्लोज़-कोट जनरेट किया गया कॉन्टेंट शामिल होता है:

q::before {content: open-quote;}
q::after {content: close-quote;}

lang एट्रिब्यूट को इसलिए शामिल किया जाता है, ताकि ब्राउज़र को पता चल सके कि पेज की मुख्य भाषा, <html lang="en-US"> ओपनिंग टैग में अंग्रेज़ी के तौर पर तय की गई थी. हालांकि, टेक्स्ट का यह पैराग्राफ़ किसी दूसरी भाषा में है. इससे Siri, Alexa, और VoiceOver जैसे वॉइस कंट्रोल, फ़्रेंच उच्चारण का इस्तेमाल कर पाते हैं. इससे ब्राउज़र को यह भी पता चलता है कि किस तरह के कोटेशन रेंडर करने हैं.

<blockquote> की तरह, <q> एलिमेंट, cite एट्रिब्यूट के साथ काम करता है.

एचटीएमएल एंटिटी

शायद आपने एस्केप सीक्वेंस या "एंटिटी" देखी होगी. एचटीएमएल में < का इस्तेमाल किया जाता है. इसलिए, आपको इसे < या < का इस्तेमाल करके एस्केप करना होगा. < को याद रखना थोड़ा मुश्किल है. एचटीएमएल में चार रिज़र्व एंटिटी होती हैं: <, >, &, और ". इनके कैरेक्टर रेफ़रंस, क्रमशः <, >, &, और " हैं.

कुछ अन्य एंटिटी जिनका इस्तेमाल अक्सर किया जाता है वे हैं: कॉपीराइट (©) के लिए ©, ट्रेडमार्क (™) के लिए ™, और नॉन-ब्रेकिंग स्पेस के लिए  . नॉन-ब्रेकिंग स्पेस तब काम आते हैं, जब आपको दो वर्णों या शब्दों के बीच स्पेस शामिल करना हो और वहां लाइन ब्रेक न होने देना हो. नाम वाले 2,000 से ज़्यादा कैरेक्टर रेफ़रंस हैं. हालांकि, ज़रूरत पड़ने पर, हर वर्ण, जिसमें इमोजी भी शामिल है, का एक एन्कोड किया गया वर्शन होता है. यह &# से शुरू होता है.

अगर आपने ToastyMcToastface की वर्कशॉप की समीक्षा देखी है (यह ऊपर दिए गए कोड सैंपल में शामिल नहीं है), तो इसमें टेक्स्ट के कुछ असामान्य वर्ण हैं:

<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇</blockquote>

इस ब्लॉककोट के आखिरी वाक्य को इस तरह भी लिखा जा सकता है:

This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙
͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟
̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱
͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳
̯̮͇

इस कोड में, कुछ वर्ण एस्केप नहीं किए गए हैं और नाम वाले कुछ कैरेक्टर रेफ़रंस हैं. वर्ण सेट UTF-8 है. इसलिए, ब्लॉककोट के आखिरी कुछ वर्णों को एस्केप करने की ज़रूरत नहीं है. जैसे, इस उदाहरण में. सिर्फ़ उन वर्णों को एस्केप करने की ज़रूरत होती है जो वर्ण सेट के साथ काम नहीं करते. ज़रूरत पड़ने पर, कई टूल उपलब्ध हैं. इनकी मदद से, अलग-अलग वर्णों को एस्केप किया जा सकता है. इसके अलावा, यह पक्का करें कि आपने <head> में <meta charset="UTF-8"> शामिल किया हो.

वर्ण सेट को UTF-8 के तौर पर तय करने पर भी, स्क्रीन पर < वर्ण को प्रिंट करने के लिए, आपको इसे एस्केप करना होगा. आम तौर पर, आपको >, ", या & के लिए, नाम वाले कैरेक्टर रेफ़रंस शामिल करने की ज़रूरत नहीं होती. हालांकि, अगर आपको एचटीएमएल एंटिटी पर कोई ट्यूटोरियल लिखना है, तो आपको किसी को < को कोड करने का तरीका सिखाते समय, < लिखना होगा. 😀

स्माइली इमोजी 😀 है. हालांकि, इस दस्तावेज़ को UTF-8 के तौर पर तय किया गया है. इसलिए, इसे एस्केप नहीं किया गया है.

देखें कि आपको कितना समझ आया

एचटीएमएल में टेक्स्ट के बारे में अपनी जानकारी को टेस्ट करें.