डिव और स्पैन
विकिपीडिया में स्पैन के उपयोग के लिए, विकिपीडिया:स्पैन टैग देखें
| HTML |
|---|
| Comparisons |
एचटीएमएल में,divऔरspanटैग तत्व वे तत्व हैं जिनका उपयोग वेब दस्तावेज़ के कुछ भागों को परिभाषित करने के लिए किया जाता है, ताकि जब एक अद्वितीय वर्गीकरण आवश्यक हो तो वे पहचाने जा सकें। जहां अन्य हाइपर टेक्स्ट मार्कअप भाषा तत्व जैसे p (प्रकरण), em (अवधारणा), और इसी तरह, वस्तु के सिमेंटिक वेब का परिशुद्ध रूप से प्रतिनिधित्व करते हैं, span और div टैग के अतिरिक्त उपयोग से पाठकों (रीडर) के लिए अधिकतम वेब अभिगम्य और लेखकों के लिए आसान संरक्षण की ओर ले जाते हैं। जहां कोई सम्मिलित हाइपर टेक्स्ट मार्कअप भाषा तत्व प्रयुक्त नहीं है, span और div मूल्यवान रूप से किसी दस्तावेज़ के कुछ भागों का प्रतिनिधित्व कर सकता है ताकि class, id, lang, या dir जैसी हाइपर टेक्स्ट मार्कअप भाषा विशेषताएँ प्रयुक्त कर सकते हे।[1][2]
span किसी दस्तावेज़ के एक इनलाइन भाग का प्रतिनिधित्व करता है, उदाहरण के लिए एक वाक्य के अंदर के शब्द है। div किसी दस्तावेज़ के ब्लॉक-स्तरीय भाग का प्रतिनिधित्व करता है जैसे कि कुछ प्रकरण, या उसके शीर्षक के साथ एक छवि है। div का तात्पर्य विभाजन है। तत्व सिमेंटिक एट्रिब्यूट की स्वीकृति देते हैं (उदाहरण के लिए lang="en-US"), सीएसएस शैली (उदाहरण के लिए, रंग और प्ररूप लेख), या क्लाइंट-साइड स्क्रिप्टिंग (उदाहरण के लिए, चलचित्र, गोपनीयता और वृद्धि) को प्रयुक्त करने की स्वीकृति देते हैं।[1][2]
उदाहरण
उदाहरण के लिए, पैराग्राफ (प्रकरण) के अंदर टेक्स्ट का एक निश्चित भाग बनाने के लिए लाल span का उपयोग निम्नानुसार किया जा सकता है
| एचटीएमएल सिंटैक्स
(टेक्स्ट में फ़ॉर्मेटिंग (संरूपण) जोड़ने के लिए वेब कोड का उपयोग किया जाता है) |
प्रस्तुत आउटपुट
(जैसा कि वेबपेज के विज़िटर्स ने देखा) |
|---|---|
I am <span style="color: red;">red</span> and I am <span style="color: blue;">blue</span>!
|
I am red and I am blue! |
इतिहास
1995 में अंतर्राष्ट्रीयकरण कार्य समूह के दूसरे प्रारूप html-i18n में span तत्व को हाइपर टेक्स्ट मार्कअप भाषा में प्रस्तुत किया गया था। हालाँकि, यह हाइपर टेक्स्ट मार्कअप भाषा 4.01 तक नहीं था कि यह हाइपर टेक्स्ट मार्कअप भाषा भाषा का भाग बन गया, जो 1997 में हाइपर टेक्स्ट मार्कअप भाषा 4 डब्ल्यू3सी कार्य प्रारूप में प्रदर्शित हुआ।[3]
1995 में, टेक्स्ट के किसी भी इनलाइन स्पैन को चिह्नित करने के लिए span को प्रारंभ किया गया था, क्योंकि 'ऐसी स्थितियों में जहां कोई अन्य तत्व उपयुक्त नहीं है, एलएएनजी और बीआईडीआई एट्रिब्यूट को ले जाने के लिए एक सामान्य कंटेनर की आवश्यकता होती है।' यह अभी भी उस सामान्य उद्देश्य को पूरा करता है, हालाँकि तब से सिमेंटिक तत्वों की एक बहुत समृद्ध श्रृंखला को परिभाषित किया गया है, और कई और एट्रिब्यूट भी हैं जिन्हें प्रयुक्त करने की आवश्यकता हो सकती है।
div दस्तावेज़ के एक 'विभाजन' को परिभाषित करता है, एक ब्लॉक-स्तरीय आइटम जो इनलाइन (पंक्तिबद्ध) वस्तु की अवधि की तुलना में ऊपर और नीचे के तत्वों से अधिक भिन्न होता है।[4]
अंतर और डिफ़ॉल्ट गतिविधि
div और spanके बीच अनेक अंतर हैं सबसे उल्लेखनीय अंतर यह है कि तत्वों को कैसे प्रदर्शित किया जाता है। मानक हाइपर टेक्स्ट मार्कअप भाषा में, div एक ब्लॉक-स्तरीय तत्व है जबकि span एक इनलाइन तत्व है। div ब्लॉक पेज पर किसी दस्तावेज़ के एक अनुभाग को दृश्य रूप से अलग करता है, और इसमें अन्य ब्लॉक-स्तरीय घटक सम्मिलित हो सकते हैं। span तत्व में आसपास की वस्तु के साथ इनलाइन जानकारी का एक भाग होता है, और इसमें केवल अन्य इनलाइन-स्तरीय घटक सम्मिलित हो सकते हैं। गतिविधि में, तत्वों के डिफ़ॉल्ट प्रदर्शन को कैस्केडिंग शैली शीट (सीएसएस) के उपयोग से बदला जा सकता है, हालांकि प्रत्येक तत्व की स्वीकृत वस्तु को बदला नहीं जा सकता है। उदाहरण के लिए, सीएसएस के ध्यान दिए बिना, span तत्व में ब्लॉक (खंड) स्तर के चिल्ड्रन नहीं हो सकते है।[5]
व्यावहारिक उपयोग
span और div तत्वों का उपयोग विशुद्ध रूप से संलग्न तत्वों के तार्किक समूहीकरण को दर्शाने के लिए किया जाता है।
class या id एट्रिब्यूट के साथ span और div टैग का उपयोग करने के तीन मुख्य कारण हैं:
सीएसएस के साथ स्टाइलिंग (शैलीकरण)
सामग्री के कुछ हिस्सों में लेआउट, प्ररूप लेख, रंग और अन्य प्रस्तुतीकरण एट्रिब्यूट को प्रयुक्त करने के लिए <span> और <div> तत्वों के लिए सीएसएस के साथ संयोजन में class या id एट्रिब्यूट को ले जाना सामान्य कार्य है। सीएसएस केवल विज़ुअल शैली पर प्रयुक्त नहीं होती है: जब वॉयस ब्राउज़र द्वारा उच्च स्वर मे बोला जाता है, तो सीएसएस शैली भाषण-दर, तनाव, समृद्धि और यहां तक कि एक त्रिआयामी ध्वनि छवि के अंदर स्थिति को भी प्रभावित कर सकता है।
इन कारणों से, और अधिक सिमेंटिक वेब के समर्थन में, एचटीएमएल के अंदर तत्वों से जुड़ी विशेषताओं को केवल एक विशेष माध्यम में उनके इच्छित प्रदर्शन गुणों के अंदर, उनके सिमेंटिक उद्देश्य का वर्णन करना चाहिए। उदाहरण के लिए <span class="red-bold">password too short</span> सिमेंटिक रूप से दुर्बल है, जबकि <em class="warning">password too short</em> जोर देने के लिए em तत्व (इटैलिक में टेक्स्ट के रूप में प्रकट होना) का उपयोग करता है, और एक अधिक उपयुक्त class नाम का परिचय देता है। सीएसएस के सही उपयोग से, ऐसी 'चेतावनियां' एक स्क्रीन पर लाल, बोल्ड फ़ॉन्ट में प्रस्तुत की जा सकती हैं, लेकिन जब मुद्रित की जाती हैं तो उन्हें छोड़ा जा सकता है, क्योंकि तब तक उनके बारे में कुछ भी करने में अधिक विलंब हो चुका होता है। संभव्यता बोलते समय उन पर अतिरिक्त जोर दिया जाना चाहिए, और भाषण-दर में आंशिक कमी की जानी चाहिए। दूसरा उदाहरण केवल प्रस्तुतिकरण के अतिरिक्त सिमेंटिक की दृष्टि से अधिक समृद्ध मार्कअप है।
सिमेंटिक स्पष्टता
पेज प्रकरण के कुछ भागों का इस प्रकार का समूहीकरण और लेबलिंग पूरी तरह से पेज को सामान्य शब्दों में अधिक सिमेंटिक बनाने के लिए प्रारंभ किया जा सकता है। यह कहना असंभव है कि वर्ल्ड वाइड वेब आने वाले वर्षों और दशकों में कैसे विकसित होगा। वर्तमान मे डिज़ाइन किए गए वेब पेज तब भी उपयोग में आ सकते हैं जब सूचना प्रणालियाँ जिनकी हम अभी तक कल्पना नहीं कर सकते हैं, वेब का पता लगा रही हैं, प्रसंस्करण कर रही हैं और वर्गीकृत कर रही हैं। यहां तक कि आज के सर्च इंजन जैसे कि गूगल और अन्य भी अत्यधिक जटिलता के स्वामित्व सूचना प्रसंस्करण एल्गोरिदम का उपयोग करते हैं।
कुछ वर्षों से, वर्ल्ड वाइड वेब सहायता संघ (डब्ल्यू3सी) एक प्रमुख सिमेंटिक वेब योजना चला रहा है, जिसे पूरे वेब को आज और भविष्य की सूचना प्रणालियों के लिए तेजी से उपयोगी और सार्थक बनाने के लिए डिज़ाइन किया गया है।
माइक्रोफ़ॉर्मेट (सूक्ष्म प्रारूप) संचार सिमेंटिक classesका विचार बनाने का एक प्रयास है। उदाहरण के लिए, माइक्रोफ़ॉर्मेट-अभिज्ञ सॉफ़्टवेयर स्वचालित रूप से <span class="tel">123-456-7890</span> एक तत्व खोज सकता है और टेलीफ़ोन नंबर स्वचालित रूप से डायल करने की स्वीकृति दें।
कोड से अभिगम्य
एक बार पेज-विज़िटर के क्लाइंट ब्राउज़र पर हाइपर टेक्स्ट मार्कअप भाषा या एक्सएचटीएमएल मार्कअप वितरित होने के बाद, एक संभावना है कि क्लाइंट-साइड कोड को वेब पेज की आंतरिक संरचना (या दस्तावेज़ ऑब्जेक्ट मॉडल) को नेविगेट करने की आवश्यकता होगी। इसका सबसे सामान्य कारण यह है कि पेज क्लाइंट-साइड जावास्क्रिप्ट के साथ वितरण किया जाता है जो पेज के प्रस्तुत होने के बाद गतिशील गतिविधि उत्पन्न करेगा। उदाहरण के लिए, यदि माउस को 'अभी खरीदें' लिंक पर माउस घुमाने का उद्देश्य पेज पर कहीं और कीमत पर जोर देना है, तो जावास्क्रिप्ट कोड ऐसा कर सकता है, लेकिन जावास्क्रिप्ट को मूल्य तत्व की पहचान करने की आवश्यकता है, फिर वह मार्कअप में कहीं भी हो। निम्नलिखित मार्कअप <div class="price">$45.99</div> के लिए पर्याप्त होगा। एक अन्य उदाहरण अजाक्स (प्रोग्रामिंग) प्रोग्रामिंग तकनीक है, जहां, उदाहरण के लिए, हाइपरटेक्स्ट लिंक पर क्लिक करने से जावास्क्रिप्ट कोड पेज के अंदर वर्तमान मूल्य उद्धरण के स्थान पर प्रदर्शित होने वाले नए मूल्य उद्धरण के लिए पाठ को पुनः प्राप्त कर सकता है। जब नया टेक्स्ट सर्वर से वापस आता है, तो जावास्क्रिप्ट को नई जानकारी के साथ बदलने के लिए पेज पर परिशुद्ध क्षेत्र की पहचान करनी होगी।
स्वचालित परीक्षण उपकरणों को span और div तत्व' class या id एट्रिब्यूट भी वेब पेज मार्कअप का उपयोग करके नेविगेट करने की आवश्यकता हो सकती है। गतिशील रूप से उत्पन्न एचटीएमएल में, इसमें पेज परीक्षण उपकरण जैसे एचटीटीपीयूनिट, एक्सयूनिट वर्ग का एक सदस्य, और फॉर्म-संचालित वेब साइटों पर प्रयुक्त होने पर अपाचे जेमीटर जैसे लोड या तनाव परीक्षण उपकरण का उपयोग सम्मिलित हो सकता है।
अति उपयोग
div और span का उपयुक्त उपयोग एचटीएमएल और एक्सएचटीएमएल मार्कअप का एक महत्वपूर्ण भाग है। हालाँकि, कभी-कभी इनका अत्यधिक उपयोग किया जाता है। हालाँकि, वे कभी-कभी अत्यधिक उपयोग किए जाते हैं।
एचटीएमएल में उपलब्ध विभिन्न सूची संरचनाएं div और span तत्वों के होम-निर्मित संपर्क के लिए अधिकतम हो सकती हैं।[6]
उदाहरण के लिए, यह
तत्वों के होम निर्मित संपर्क के लिए अधिकतम हो सकती हैं।
<ul class="menu"> <li>Main page</li> <li>Contents</li> <li>Help</li> </ul>
जो उत्पादन करता है
- मुख्य पेज
- अंतर्वस्तु
- सहायता
... सामान्य रूप से इसके अतिरिक्त अधिकतम है:
<div class="menu"> <span>Main page</span> <span>Contents</span> <span>Help</span> </div>
जो उत्पादन करता है
Main page Contents Help
div और span तत्वों के अतिरिक्त हाइपर टेक्स्ट मार्कअप भाषा के सिमेंटिक उपयोग के अन्य उदाहरणों में वेब फॉर्म को विभाजित करने के लिए fieldset तत्वों का उपयोग, ऐसे विभाजनों की पहचान करने के लिए legend तत्वों का उपयोग और डिव के अतिरिक्त फॉर्म इनपुट तत्वों की पहचान करने के लिए लेबल का उपयोग सम्मिलित है। ऐसे उद्देश्यों के लिए span या table तत्वों का उपयोग किया जाता है।[7]
एचटीएमएल5 ने कई नए तत्व प्रस्तुत किए; कुछ उदाहरणों में header, footer, nav और figure तत्व सम्मिलित हैं। सिमेंटिक रूप से उपयुक्त तत्वों का उपयोग हाइपर टेक्स्ट मार्कअप भाषा दस्तावेज़ों span या divकी तुलना में अधिकतम संरचना प्रदान करता है।[8]
यह भी देखें
- एचटीएमएल और एचटीएमएल 5
- एचटीएमएल तत्व
- एचटीएमएल विशेषता
- कैस्केडिंग शैली शीट और सहायता: कैस्केडिंग शैली शीट
- सीडीएटीए
- स्पैन में कॉन्टेक्स्टऑब्जेक्ट्स
- जावास्क्रिप्ट
- सिमेंटिक वेब
संदर्भ
- ↑ 1.0 1.1 "HTML5: A vocabulary and associated APIs for HTML and XHTML". W3C. 4.4 Grouping content. Retrieved 16 September 2014.
- ↑ 2.0 2.1 "HTML5: A vocabulary and associated APIs for HTML and XHTML". W3C. 4.5 Text-level semantics. Archived from the original on 1 August 2015. Retrieved 16 September 2014.
- ↑ "HTML/Elements/span - Web Education Community Group". 2013-06-13. Retrieved 2013-11-14.
- ↑ "HTML <div> Tag". W3Schools. Retrieved 22 March 2018.
- ↑ "HTML 5.1: 4. The elements of HTML". W3.org. Retrieved 3 August 2017.
- ↑ Harold, Elliotte Rusty (2008). एचटीएमएल रिफैक्टरिंग. Addison Wesley. p. 184. ISBN 0-321-50363-5.
There is no simple way to find all the unidentified lists in a site. [...] They can be marked up in dozens of different ways: as paragraphs,
divs, tables, [etc]. Once you've found a list, marking up the individual items is easy. Just useul,ol, ordlinstead of the current wrapper element. [...] For example to remove the bullets add this rule to the page's CSS stylesheet: [...] - ↑ Raggett, Dave; Arnaud Le Hors; Ian Jacobs (1999). "Adding structure to forms: the FIELDSET and LEGEND elements". HTML 4.01 Specification. W3C. Retrieved 12 July 2010.
The
FIELDSETelement allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this element makes documents more accessible. - ↑ van Kesteren, Anne (2010). "HTML5 differences from HTML4". W3C. Retrieved 30 June 2010.