HTML में स्रोतों को उद्धृत करने या आसपास के टेक्स्ट से कोट्स को पहचानने के कई तरीके हैं। आज, हम HTML कोटेशन एलिमेंट्स पर जाते हैं: <blockquote>, <q>, <abbr>, <address>, <bdo> और <cite>। प्रत्येक के अपने अनूठे उपयोग के मामले हैं - हम प्रत्येक के बीच अंतर करते हैं और आपको दिखाते हैं कि उन्हें अपने मार्कअप में कैसे उपयोग करें।
ब्लॉककोट (Blockquote)
<blockquote> एलिमेंट का उपयोग बहु-पंक्ति, लंबे उद्धृत टेक्स्ट के लिए किया जाता है। एलिमेंट का उपयोग कोट को स्वयं आसपास के पैराग्राफ या अन्य HTML एलिमेंट्स से अलग करने के लिए किया जाता है। एक निश्चित प्रसिद्ध नाटककार के सॉलिलोक्वी का उपयोग करने वाले इस उदाहरण को देखें:
<html> <head> <style> body { font-family: 'Roboto'; margin: 20px; } blockquote p { width: 80%; margin: 0px 20px; text-align: right; } </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora doloribus quae mollitia vitae inventore minus sed id ut facere officiis cupiditate corporis, ratione, neque repellat cumque temporibus, dicta at labore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos aliquam adipisci at earum, optio consequatur et, alias corrupti voluptatum voluptates repellendus, tenetur suscipit qui nostrum totam veritatis doloremque laborum officia! Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nostrum voluptate, perferendis amet hic totam perspiciatis excepturi. Nam earum, neque, in nihil magni aliquid id, iste deserunt tempore corporis eaque?</p> <blockquote> "होना या न होना: यही प्रश्न है: क्या मन में सहन करना अधिक महान है अपमानजनक भाग्य के प्रहारों और तीरों को, या समस्याओं के सागर के विरुद्ध हथियार उठाना, और विरोध करके उन्हें समाप्त करना?..." <p>—<em>हैमलेट</em>, एक्ट III, दृश्य I</p> </blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora doloribus quae mollitia vitae inventore minus sed id ut facere officiis cupiditate corporis, ratione, neque repellat cumque temporibus, dicta at labore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos aliquam adipisci at earum, optio consequatur et, alias corrupti voluptatum voluptates repellendus, tenetur suscipit qui nostrum totam veritatis doloremque laborum officia! Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nostrum voluptate, perferendis amet hic totam perspiciatis excepturi. Nam earum, neque, in nihil magni aliquid id, iste deserunt tempore corporis eaque?</p> </body> </html>
q
<q> एलिमेंट एक छोटे कोट के चारों ओर कोटेशन मार्क्स लगाता है। यह एक इंलाइन एलिमेंट है, बहुत कुछ <span> या <strong> की तरह, लेकिन कोट्स के लिए। यदि आपका कोट कई पंक्तियों तक फैला है, तो आपको इसके बजाय <blockquote> का उपयोग करना चाहिए।
<html> <head> <style> body { font-family: 'Roboto'; margin: 20px; } </style> </head> <body> <p> मेक-अ-विश फाउंडेशन का मिशन स्टेटमेंट है <q>एक साथ, हम गंभीर बीमारियों वाले बच्चों के लिए जीवन बदलने वाली इच्छाएं बनाते हैं।</q> </p> </body> </html>
abbr
कभी-कभी आप अपने लेखन के प्रवाह में शामिल किए बिना एक संक्षिप्त नाम को परिभाषित करना चाहते हैं। आप इसे <abbr> टैग के साथ करते हैं। यह भी एक इंलाइन एलिमेंट है, <span>, <em>, या <q> के समान। अपने <abbr> टैग में टाइटल विशेषता के अंदर अपने संक्षिप्त नाम को परिभाषित करें।
<html> <head> <style> body { font-family: 'Roboto'; margin: 20px; } </style> </head> <body> <abbr title="COrona VIrus Disease 2019">COVID-19</abbr> दिसंबर 2019 में वुहान, चीन में पहली बार खोजा गया था। </body> </html>
एड्रेस (address)
एड्रेस एलिमेंट निर्माता के लिए संपर्क जानकारी को परिभाषित करता है, चाहे वह व्यक्ति हो या व्यवसाय, और निम्नलिखित में से कोई भी: भौतिक पता, ईमेल पता, सोशल मीडिया लिंक, फोन नंबर, व्यक्तिगत वेबसाइट, और अन्य संपर्क-जैसे आइटम।
टेक्स्ट इटैलिक में रेंडर होता है और एड्रेस ब्लॉक से पहले और बाद में एक लाइन ब्रेक होता है।
<html> <head> <style> body { font-family: 'Roboto'; margin: 20px; } </style> </head> <body> <address> करियर कर्मा के लिए क्रिस्टीना कोपेकी द्वारा लिखित<br /> अन्य लेख: <a href="https://careerkarma.com/blog/author/christina-kopecky/">करियर कर्मा लेखक पेज</a><br/> ट्विटर: <a href="https://twitter.com/cmvnk" target="_blank" rel="noopener noreferrer">@cmvnk</a><br /> गिटहब: <a href="https://github.com/ckopecky" target="_blank" rel="noopener noreferrer">ckopecky</a><br /> </address> </body> </html>
bdo
दाएं से बाएं पढ़ी जाने वाली भाषाओं के साथ काम करते समय, टेक्स्ट को आपके लिए दाएं से बाएं रेंडर करने वाले टैग का उपयोग करना आसान होता है, बजाय इसे स्वयं करने की कोशिश करने के। टेक्स्ट को बाय-डायरेक्शनल ओवरराइड के साथ रेंडर करने के लिए <bdo> एलिमेंट का उपयोग करें। यह एक dir विशेषता लेता है जो दिशा को इंगित करेगा। डिफ़ॉल्ट "ltr" है। "rtl" टेक्स्ट को दाएं से बाएं रेंडर करेगा।
<html> <head> <style> body { font-family: 'Roboto'; margin: 20px; } </style> </head> <body> <bdo dir="rtl">यह दाएं-से-बाएं रेंडर होता है</bdo><br /> <bdo>यह बाएं-से-दाएं रेंडर होता है</bdo> </body> </html>
साइट (cite)
साइट एलिमेंट आज हम जिस अंतिम कोटेशन एलिमेंट के बारे में बात करते हैं। साइट टैग एक रचनात्मक कार्य के शीर्षक को परिभाषित करता है। यह एक इंलाइन एलिमेंट है और इटैलिक में रेंडर होता है।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद वे अपनी टेक जॉब संभावनाओं के बारे में अधिक आश्वस्त महसूस करते हैं। आज ही बूटकैंप से जुड़ें।
औसत बूटकैंप ग्रेजुएट ने करियर ट्रांजिशन में छह महीने से कम समय बिताया, बूटकैंप शुरू करने से लेकर पहली नौकरी पाने तक।
<html> <head> <style> body { font-family: 'Roboto'; margin: 20px; } p { margin: 0; padding: 0; } </style> </head> <body> <p> <cite>मोना लिसा</cite>, लियोनार्डो दा विंची <br /> <sup>द लूव्र (1797 से)</sup> </p> </body> </html>
निष्कर्ष
आइए समीक्षा करें। आज हमने देखा है:
<blockquote>- लंबे कोट्स के लिए उपयोग किया जाता है<q>- एक लाइन से अधिक लंबे छोटे कोट्स के लिए उपयोग किया जाता है<abbr>- हमारे टेक्स्ट में संक्षिप्त नामों को परिभाषित करने के लिए उपयोग किया जाता है<address>- निर्माता या लेखक के लिए संपर्क जानकारी को परिभाषित करने के लिए उपयोग किया जाता है<bdo>- यह नियंत्रित करने के लिए उपयोग किया जाता है कि टेक्स्ट बाएं-से-दाएं या दाएं-से-बाएं रेंडर होता है<cite>- किसी चीज़ के शीर्षक को परिभाषित करने के लिए उपयोग किया जाता है
कई कोटेशन एलिमेंट्स हैं और प्रत्येक का अपना उपयोग का मामला है। अपनी परियोजना के लिए सही एलिमेंट(ट्स) का चयन करना सुनिश्चित करें!
