HTML टैग्स <div> और <span> के बीच क्या अंतर है?

Question

मैं कुछ सरल का उपयोग करता है दिखा उदाहरण के लिए पूछना चाहूँगा <div>और <span>। मैंने देखा है कि वे दोनों एक पृष्ठ के एक भाग को एक idया के साथ चिह्नित करते थे class, लेकिन मुझे यह जानने में दिलचस्पी है कि क्या ऐसे समय हैं जब एक दूसरे पर पसंद किया जाता है।

Answer 1

• divएक ब्लॉक तत्व है
• spanएक है इनलाइन तत्व ।

इसका मतलब यह है कि उन्हें शब्दार्थ रूप से उपयोग करने के लिए, divs का उपयोग किसी दस्तावेज़ के अनुभागों को लपेटने के लिए किया जाना चाहिए, जबकि पाठ, छवियों आदि के छोटे भागों को लपेटने के लिए स्पैन का उपयोग किया जाना चाहिए।

उदाहरण के लिए:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

ध्यान दें कि इनलाइन तत्व के भीतर एक ब्लॉक-स्तरीय तत्व रखना अवैध है, इसलिए:

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

... अवैध है।

---

EDIT: HTML5 के रूप में, कुछ इनलाइन तत्वों के अंदर कुछ ब्लॉक एलिमेंट्स रखे जा सकते हैं। एक स्पष्ट सूची के लिए यहाँ MDN संदर्भ देखें । उपरोक्त अभी भी गैरकानूनी है, क्योंकि <span>केवल हेडिंग सामग्री को स्वीकार करता है, और <div>प्रवाह सामग्री है।

---

आपने कुछ ठोस उदाहरणों के लिए कहा, इसलिए मेरी गेंदबाजी वेबसाइट, बाउलस्क में से एक ली गई है :

<div id="header">
  <div id="userbar">
    Hi there, <span class="username">Chris Marasti-Georg</span> |
    <a href="/edit-profile.html">Profile</a> |
    <a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a>
  </div>
  <h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>

ठीक है, क्या चल रहा है?

मेरे पृष्ठ के शीर्ष पर, मेरे पास एक तार्किक अनुभाग है, "हेडर"। चूंकि यह एक खंड है, मैं एक div (एक उपयुक्त आईडी के साथ) का उपयोग करता हूं। उसके भीतर, मेरे पास कुछ खंड हैं: उपयोगकर्ता बार और वास्तविक पृष्ठ शीर्षक। शीर्षक उपयुक्त टैग का उपयोग करता है, h1। उपयोगकर्ता नाम, एक अनुभाग होने के नाते, एक में लपेटा गया है div। उसके भीतर, उपयोगकर्ता नाम एक में लपेटा जाता है span, ताकि मैं शैली को बदल सकूं। जैसा कि आप देख सकते हैं, मैंने spanशीर्षक में लगभग 2 अक्षरों को भी लपेटा है - यह मुझे अपनी स्टाइलशीट में अपना रंग बदलने की अनुमति देता है।

यह भी ध्यान दें कि HTML5 में सामान्य पेज संरचनाओं को परिभाषित करने वाले तत्वों का एक व्यापक नया सेट शामिल है, जैसे कि लेख, अनुभाग, नौसेना, आदि।

HTML 5 वर्किंग ड्राफ्ट की धारा 4.4 उन्हें सूचीबद्ध करती है और उनके उपयोग के अनुसार संकेत देती है। HTML5 अभी भी एक कार्यशील युक्ति है, इसलिए अभी तक कुछ भी "अंतिम" नहीं है, लेकिन यह अत्यधिक संदिग्ध है कि इनमें से कोई भी तत्व कहीं भी जा रहा है। एक जावास्क्रिप्ट हैक है जिसे आपको उपयोग करने की आवश्यकता होगी यदि आप इन तत्वों को IE के कुछ पुराने संस्करण में स्टाइल करना चाहते हैं - आपको document.createElementअपने स्रोत में निर्दिष्ट किसी भी तत्व का उपयोग करने से पहले प्रत्येक तत्व को बनाने की आवश्यकता है । पुस्तकालयों का एक समूह है जो आपके लिए इस बात का ध्यान रखेगा - एक त्वरित Google खोज html5shiv पर बदल गया ।

Comments

क्रिस, आपके पाठ में एक गलती है: भले ही आप स्पैन की शैली को "ब्लॉक" पर सेट करें, फिर भी इसे ब्लॉक-स्तरीय तत्व के चारों ओर लपेटना अवैध है!

— कोनराड रुडोल्फ

आप उपयोग नहीं कर सकते divऔर spanशब्दार्थ रूप से उनके पास कोई अर्थ नहीं है जो उनसे जुड़ा हुआ है।divएक अर्थहीन सामान्य ब्लॉक स्तर के तत्व हैं जबकि spanएक अर्थहीन सामान्य इनलाइन तत्व है।

— १५

@apnerve वे अभी भी उस ब्लॉक बनाम इनलाइन तत्वों में शब्दार्थ हैं, दस्तावेज़ प्रवाह के लिए अलग-अलग चीजों का मतलब है, दोनों एक परिप्रेक्ष्य से और "इस स्रोत को पढ़ने से यह पता लगाने के लिए कि क्या चल रहा है" परिप्रेक्ष्य।

— क्रिस मैराती-जॉर्ज

"शब्दार्थ (ग्रीक sēmantiká, santmantikós के नपुंसक बहुवचन से) [1] [2] अर्थ का अध्ययन है। यह शब्दों, वाक्यांशों, चिह्नों और प्रतीकों जैसे हस्ताक्षरकर्ताओं के बीच के संबंध पर ध्यान केंद्रित करता है, और वे किस लिए खड़े होते हैं, उनके डीनोटेटा। । " हस्ताक्षरकर्ता "div" और "स्पैन" सबसे निश्चित रूप से किसी चीज के लिए खड़े होते हैं। HTML कल्पना में किस ब्लॉक और इनलाइन तत्वों के लिए एक अच्छा ब्रेकडाउन है। w3.org/TR/html401/struct/global.html#h-7.5.3 । HTML5 ड्राफ्ट यहां तक ​​कि उन्हें अलग-अलग समूहों में रखता है - समूह सामग्री और पाठ-स्तरीय शब्दार्थ। dev.w3.org/html5/spec/Overview.html

— क्रिस

आपने मुझे "div एक ब्लॉक तत्व है, स्पैन इनलाइन है।" :)

— मैटिक

Answer 2

पूर्णता के लिए, मैं आपको इस तरह से सोचने के लिए आमंत्रित करता हूं:

• HTML में बहुत सारे ब्लॉक एलिमेंट्स (लाइनब्रीक से पहले और बाद में), और बहुत सारे इनलाइन टैग (कोई लाइनब्रेक नहीं) हैं।
• लेकिन आधुनिक HTML में सभी तत्वों के अर्थ हैं : एक <p>एक पैराग्राफ, <li>एक सूची आइटम है, आदि, और हम सही उद्देश्य के लिए सही टैग का उपयोग करने वाले हैं - पुराने दिनों की तरह नहीं जब हम <blockquote>सामग्री का उद्धरण है या नहीं, इसका उपयोग करके इंडेंट किया गया।
• तो, क्या तुम जब वहाँ क्या करते है बात तुम क्या करने की कोशिश कर रहे करने के लिए कोई अर्थ नहीं? 400px-चौड़े कॉलम का कोई मतलब नहीं है , क्या वहाँ है? आप बस इतना चाहते हैं कि आपका टेक्स्ट का कॉलम 400px चौड़ा हो, क्योंकि यह आपके डिज़ाइन के अनुकूल है।
• इस कारण से, उन्होंने HTML में दो और तत्व जोड़े: जेनेरिक, या अर्थहीन तत्व <div>और <span>, क्योंकि अन्यथा, लोग उन तत्वों का दुरुपयोग करने से पीछे हट जाएंगे जिनके अर्थ हैं।

Comments

यह एक उचित व्याख्या है। मुझे आश्चर्य है कि यह उत्तर के रूप में क्यों स्वीकार नहीं किया गया।

— एपर्नेव

क्योंकि इसका पृष्ठ बहुत नीचे है

— जेसन सेब्रिंग

सिर्फ इसलिए कि एक अच्छा जवाब स्वीकार नहीं किया गया, इसका मतलब यह नहीं है कि आप इसे वोट नहीं दे सकते। उपयोगी स्पष्टीकरण के लिए +1।

— साइबर फन

जानकर अच्छा लगा, लेकिन यह मूल प्रश्न का उत्तर नहीं देता है, क्योंकि यह div और span तत्वों के बीच अंतर की व्याख्या नहीं करता है।

— तेहवां

Answer 3

यहां पहले से ही अच्छे, विस्तृत उत्तर हैं, लेकिन कोई दृश्य उदाहरण नहीं है, इसलिए यहां एक त्वरित चित्रण है:

<div>This is a div.</div>
<div>This is a div.</div>
<div>This is a div.</div>
<span>This is a span.</span>
<span>This is a span.</span>
<span>This is a span.</span>

<div>एक ब्लॉक टैग है, जबकि <span>एक इनलाइन टैग है।

Comments

सीएसएस के बिना भी, लेआउट पर उनका एक अलग प्रभाव है! यह पहली बार है जब मैंने यह दिखाया है!

— GreenAsJade

धन्यवाद, मैं इस जवाब को बढ़ाता हूं क्योंकि यह बहुत जल्दी जवाब देता है कि div की अगली पंक्ति है

— स्क्रिप्ट किट्टी

मेरे जैसे नए लोगों को समझाने के लिए धन्यवाद :-)

— अरित्रा चटर्जी

Answer 4

<div>एक ब्लॉक-स्तरीय तत्व है और <span>एक इनलाइन तत्व है।

यदि आप कुछ इनलाइन पाठ के साथ कुछ करना चाहते थे, तो <span>जाने का रास्ता है क्योंकि यह लाइन ब्रेक का परिचय नहीं देगा जो कि एक <div>होगा।

---

जैसा कि दूसरों ने नोट किया है, इनमें से प्रत्येक के साथ कुछ शब्दार्थ निहित हैं, सबसे महत्वपूर्ण तथ्य यह है कि <div>दस्तावेज़ में एक तार्किक विभाजन का अर्थ है, शायद दस्तावेज़ का एक खंड या कुछ और, एक ला:

<div id="Chapter1">
   <p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
   <p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p> 
</div>

Comments

divs को इनलाइन (प्रदर्शन: इनलाइन;) और इसके विपरीत स्पैन के लिए बनाया जा सकता है लेकिन यह सबसे अच्छा स्पष्टीकरण है। वे रैपर टैग हैं, स्पैन आमतौर पर वाक्यों या हाइलाइटिंग टेक्स्ट, अनुभागों के लिए div के लिए उपयोग किया जाता है।

— रॉस

मैं इस तथ्य से अवगत हूं कि आप इसे सीएसएस के साथ संशोधित कर सकते हैं, लेकिन यह एक और तकनीक का परिचय देता है। HTML अपने दम पर खड़ा हो सकता है, और जब यह होता है, तो एक div इनलाइन नहीं होता है और इसका शुद्ध रूप में ऐसा करने का इरादा नहीं होता है।

— जेसन बंटिंग

क्या एक अच्छी पुस्तक है जो यह बताती है कि विभिन्न परिस्थितियों में HTML तत्वों का ठीक से उपयोग कैसे किया जाए।

— एमके

@ एमको - मुझे नहीं पता, ईमानदार होना। अनुभव सबसे अच्छा शिक्षक है। अंत में, वहाँ कोई "सही" जवाब नहीं है, प्रति se, वहाँ बस क्या आपकी स्थिति और अपने उद्देश्यों के लिए काम करता है। ;)

— जेसन बंटिंग

Answer 5

वास्तविक महत्वपूर्ण अंतर पहले ही क्रिस के उत्तर में उल्लिखित है। हालांकि, निहितार्थ हर किसी के लिए स्पष्ट नहीं होगा।

इनलाइन तत्व के रूप में, <span>केवल अन्य इनलाइन तत्व शामिल हो सकते हैं। निम्नलिखित कोड इसलिए गलत है:

<span><p>This is a paragraph</p></span>

उपरोक्त कोड मान्य नहीं है। ब्लॉक-स्तरीय तत्वों को लपेटने के लिए, एक अन्य ब्लॉक-स्तरीय तत्व का उपयोग किया जाना चाहिए (जैसे <div>)। दूसरी ओर, <div>केवल उन स्थानों पर उपयोग किया जा सकता है जहां ब्लॉक-स्तरीय तत्व कानूनी हैं।

इसके अलावा, इन नियमों को (एक्स) HTML में तय किया गया है और वे सीएसएस नियमों की उपस्थिति से बदल नहीं रहे हैं ! तो निम्नलिखित कोड भी गलत हैं!

<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>

Comments

@ फैजान कैसे प्रासंगिक है? यह भी गलत है: प्रत्येक ब्राउज़र इस मार्कअप के लिए लगातार परिणाम नहीं देगा। आपके द्वारा उपयोग किए जाने वाले सिद्धांत के आधार पर (और, फिर से, ब्राउज़र), यह बिल्कुल भी नहीं चल सकता है, और एक वैध त्रुटि का कारण बन सकता है।

— कोनराड रुडोल्फ

मैं देखता हूं, कि कुछ ब्राउज़र अमान्य कोड चलाने के लिए पर्याप्त कुशल हैं। यही कारण है कि दौड़ा। क्या आप मुझे HTML के लिए एक अच्छा सत्यापनकर्ता सुझा सकते हैं।

— फैजान

"आप जो करते हैं उसमें उदारवादी होते हैं और जो आप स्वीकार करते हैं उसमें उदार होते हैं" en.wikipedia.org/wiki/Robustness_principle

— jldupont

सूप कैंटीन में आपका स्वागत है। गैर-वैध एचटीएमएल खाने वाले ब्राउज़र्स अत्यधिक अनुकूलित होने का कारण है लेकिन picky HTML पार्सर आदर्श नहीं हैं। इसके नमक के लायक हर ब्राउज़र (यानी 'एचटीएमएल' के साथ संगत) इसे स्वादिष्ट बनाने के लिए किसी प्रकार के 'सूप'-प्रकार (आंतरिक) पुस्तकालय का उपयोग करता है।

— एके डे

Answer 6

"ब्लॉक एलिमेंट" का महत्व निहित है लेकिन कभी स्पष्ट रूप से नहीं बताया गया है। यदि हम सभी सिद्धांत (सिद्धांत अच्छे हैं) को अनदेखा करते हैं तो निम्नलिखित एक व्यावहारिक तुलना है। निम्नलिखित:

<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>

पैदा करता है:

This paragraph has a span.

This paragraph

has
a div.

यह दर्शाता है कि न केवल एक div इनलाइन का उपयोग नहीं किया जाना चाहिए , यह केवल वांछित प्रभाव का उत्पादन नहीं करेगा।

Answer 7

जैसा कि अन्य उत्तरों में उल्लेख किया गया है, डिफ़ॉल्ट divरूप से एक ब्लॉक तत्व के रूप में प्रस्तुत किया spanजाएगा , जबकि इसके संदर्भ में इनलाइन प्रदान किया जाएगा। लेकिन न तो इसका कोई शब्दार्थ है; वे आपको स्टाइल और एक पहचान किसी भी सामग्री को लागू करने की अनुमति देने के लिए मौजूद हैं। शैलियों का उपयोग करके, आप divएक spanऔर इसके विपरीत जैसे कार्य कर सकते हैं।

के लिए उपयोगी शैलियों में से divएक हैinline-block

उदाहरण:

1. http://dustwell.com/div-span-inline-block.html

2. सीएसएस प्रदर्शन: इनलाइन बनाम इनलाइन-ब्लॉक

मैंने inline-blockखेल वेब परियोजनाओं में एक बड़ी सफलता का उपयोग किया है।

Comments

यदि उनके पास कोई शब्दार्थक मूल्य नहीं था, तो उनमें से केवल एक ही होगा। एक का मतलब ब्लॉक स्तर का विभाजन है - दूसरा, एक इनलाइन स्पैन

— क्रिस मैरास्टी-जॉर्ज

Answer 8

डिव एक ब्लॉक एलिमेंट है और स्पैन एक इनलाइन एलिमेंट है और इसकी चौड़ाई इस बात पर निर्भर करती है कि यह सेल्फ कहां नहीं है

Answer 9

मैं कहूंगा कि यदि आप इस पृष्ठ को देखने के लिए स्पेनिश का एक सा जानते हैं , जहां ठीक से समझाया गया है।

हालाँकि, एक तेज़ परिभाषा यह होगी कि divयह खंडों को विभाजित spanकरने के लिए है और किसी अन्य प्रकार के ब्लॉक तत्व में किसी प्रकार की शैली को लागू करने के लिए है div।

Comments

स्पेनिश जानने की जरूरत नहीं, अंग्रेजी संस्करण <span> - HTML | एमडीएन ।

— user34660

Answer 10

बस कुछ ऐतिहासिक संदर्भ जोड़ना चाहते थे कि कैसे spanबनाम आयाdiv

का इतिहास span:

3 जुलाई, 1995 को बेंजामिन सीडब्ल्यू सीटलर ने एक सामान्य टेक्स्ट कंटेनर का प्रस्ताव रखा कुछ ब्लॉकों में शैलियों को लागू करने के लिए टैग । यदि स्टाइलशीट के संयोजन में उपयोग किया जाता है, तो यह प्रतिपादन तटस्थ है। बनाम पठनीयता के बारे में बहस है, अर्थ। बर्ट बोस क्लास एट्रिब्यूट (शहर, व्यक्ति, दिनांक आदि जैसे मूल्यों के साथ) के माध्यम से तत्व की एक्स्टेंसिबिलिटी प्रकृति का उल्लेख कर रहे हैं। पॉल प्रेस्कॉड चिंतित है कि दोनों तत्वों का दुरुपयोग किया जाएगा। वह पाठ उल्लेख के विरोध में है कि "किसी भी नए तत्व को एक पुराने पर होना चाहिए" और जोड़ना "अगर हम बिना किसी शब्दार्थ के साथ एक टैग बनाते हैं तो इसे कभी भी गलत किए बिना उपयोग किया जा सकता है। , हमें लेखकों को अपने दस्तावेज़ के शब्दार्थों को ठीक से टैग करने के लिए बाध्य करना चाहिए। हमें संपादक विक्रेताओं को अपने इंटरफेस में उस विकल्प को स्पष्ट करने के लिए मजबूर करना चाहिए। "

- स्रोत (w3 विकि)

परिचय देने वाले RFC ड्राफ्ट से span:

सबसे पहले, उन मामलों में LANG और BIDI विशेषताओं को ले जाने के लिए एक सामान्य चोर की आवश्यकता होती है जहां कोई अन्य तत्व उपयुक्त नहीं है; स्पैन एल-मेंट को उस उद्देश्य के लिए पेश किया गया है।

- स्रोत (IETF ड्राफ्ट)

का इतिहास div:

DIV तत्वों का उपयोग HTML दस्तावेजों को विभाजनों के पदानुक्रम के रूप में करने के लिए किया जा सकता है।

...

HTML 3.0 DIV तत्व के लिए समर्थन जोड़ने से पहले नेटस्केप द्वारा CENTER को पेश किया गया था। इसकी व्यापक तैनाती के कारण इसे HTML 3.2 में बरकरार रखा गया है।

HTML 3.2 कल्पना

संक्षेप में, दोनों तत्व अधिक अर्ध-सामान्य कंटेनर की आवश्यकता से उत्पन्न हुए। एक <text>पाठ शैली के लिए एक तत्व के रूप में स्पैन को अधिक सामान्य प्रतिस्थापन के रूप में प्रस्तावित किया गया था । डिव को पृष्ठों को विभाजित करने के एक सामान्य तरीके के रूप में प्रस्तावित किया गया था और <center>केंद्र-संरेखण सामग्री के लिए टैग को बदलने का अतिरिक्त लाभ था । पृष्ठ विभाजन के रूप में अपने इतिहास के कारण Div हमेशा एक ब्लॉक तत्व रहा है। स्पैन हमेशा एक इनलाइन तत्व रहा है क्योंकि इसका मूल उद्देश्य टेक्स्ट स्टाइलिंग था और आज डिव और स्पैन दोनों क्रमशः डिफ़ॉल्ट ब्लॉक और इनलाइन डिस्प्ले गुणों के साथ जेनेरिक तत्व होने पर पहुंचे हैं।

Answer 11

HTML में ऐसे टैग हैं जो सामग्री में संरचना या शब्दार्थ जोड़ते हैं। उदाहरण के लिए <p>टैग का उपयोग पैराग्राफ की पहचान करने के लिए किया जाता है। एक अन्य उदाहरण <ol>एक सूचीबद्ध सूची के लिए टैग है।

जब एचटीएमएल में कोई उपयुक्त टैग उपलब्ध नहीं है जैसा कि ऊपर दिखाया गया है, <div>और <span>टैग का आमतौर पर सहारा लिया जाता है।

<div>टैग से पहले और इसके बाद एक लाइन ब्रेक है कि एक दस्तावेज़ की एक blocklevel अनुभाग / प्रभाग की पहचान के लिए प्रयोग किया जाता है।

जहां दिव्यांग टैग का उपयोग किया जा सकता है उनके उदाहरण हेडर, फुटर, नेवीगेशन आदि हैं। हालांकि HTML 5 में ये टैग पहले ही प्रदान किए जा चुके हैं।

<span>टैग किसी दस्तावेज़ के एक इनलाइन अनुभाग / प्रभाग की पहचान के लिए प्रयोग किया जाता है।

उदाहरण के लिए एक स्पैन टैग का उपयोग इनलाइन पोर्ट्रेटोग्राफ को एक तत्व में जोड़ने के लिए किया जा सकता है।

Answer 12

याद रखें, मूल रूप से और वे स्वयं कोई भी कार्य नहीं करते हैं। वे केवल अपने टैग द्वारा कार्यक्षमता के बारे में विशिष्ट नहीं हैं ।

इन्हें केवल CSS की मदद से कस्टमाइज किया जा सकता है।

अब यह आपके प्रश्न पर आ रहा है:

कुछ स्टाइल के साथ SPAN टैग एक लाइन के अंदर होल्ड होने पर उपयोगी होगा, html में एक पैराग्राफ में कहेंगे। यह HTML में लाइन स्तर या स्टेटमेंट लेवल की तरह है।

उदाहरण:

<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>

कहा जाता है कि DIV टैग की कार्यक्षमता केवल स्टाइलिंग के साथ दिखाई दे सकती है, इसमें HTML कोड के बड़े हिस्से हो सकते हैं।

DIV ब्लॉक स्तर है

उदाहरण:

    <div class="large-time">
    <p>Am writing <span class="time"> this answer</span> in my free time of my day. 
    </p>
    </div>

आपकी आवश्यकता के आधार पर उपयोग किए जाने पर दोनों का अपना समय और मामला है।

आशा है कि उत्तर के साथ स्पष्ट हूँ। धन्यवाद।

Comments

आदर्श उत्तर जो मैं चाह रहा हूं।

— 21