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

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

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

टाइटल, दोबारा देखे गए

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

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

कुछ उपयोगकर्ता एजेंट स्टाइलशीट में, नेस्ट किए गए <h1> एलिमेंट को इस तरह स्टाइल करने के लिए नीचे दिए गए सिलेक्टर या इससे मिलते-जुलते टूल शामिल होते हैं जैसे कि वे किसी कम ज़रूरी लेवल पर हों:

h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

हालांकि, सुलभता ऑब्जेक्ट मॉडल या एओएम अब भी एलिमेंट के लेवल को सही तरीके से रिपोर्ट करता है; इस मामले में, "heading, लेवल 1". ध्यान दें कि ब्राउज़र अन्य हेडिंग लेवल के लिए ऐसा नहीं करता. इसलिए, हेडिंग लेवल पर आधारित ब्राउज़र स्टाइल का इस्तेमाल न करें. भले ही ब्राउज़र, आउटलाइन करने की सुविधा नहीं देते, फिर भी अपने कॉन्टेंट की हेडिंग को ऐसे ही मार्क करें जैसे वे करते हैं. ऐसा करने से आपका कॉन्टेंट सर्च इंजन, स्क्रीन रीडर, और आने वाले समय में मैनेज करने वाले लोगों को समझ आएगा.

हेडिंग के अलावा, ज़्यादातर स्ट्रक्चर्ड टेक्स्ट में कई पैराग्राफ़ होते हैं. एचटीएमएल में, पैराग्राफ़ को <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> पर मौजूद कॉन्टेंट का मालिकाना हक होता है, लेखक नहीं.

अगर ब्लेंडन स्मूद का कोट उनकी ऑफ़लाइन पत्रिका से लिया गया था, तो आपको ब्लॉककोट इस तरह लिखा जाएगा:

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

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

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

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

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

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

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

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

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

एचटीएमएल इकाइयां

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

आप कॉपीराइट के लिए © (©),ट्रेडमार्क (TM) के लिए ™, और नॉन-ब्रेकिंग स्पेस के लिए   अन्य इकाइयों का अक्सर इस्तेमाल करेंगे. नॉन-ब्रेकिंग स्पेस तब काम आते हैं, जब आपको दो वर्णों या शब्दों के बीच स्पेस शामिल करना हो और लाइन ब्रेक को रोकना हो. नाम वाले वर्णों के रेफ़रंस की संख्या 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 के तौर पर मार्क किया गया है, इसलिए इसे एस्केप नहीं किया गया है.

आपने जो सीखा है उसकी जांच करें

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