हमें divs का उपयोग क्यों करना है?


13

आज सुबह, जैसा कि मैं कुछ html और haml लिख रहा था, यह मेरे लिए हुआ कि जिस तरह divs का उपयोग किया जाता है वह हास्यास्पद है। तलाक क्यों निहित नहीं हैं? यदि यह कल्पना करें:

<div class="hero-img">
   <img src="http://whatever.com/this.jpg">
</div>

यह था:

<hero-img>
   <img src="http://whatever.com/this.jpg">
</hero-img>

यदि तत्व का "div class" भाग ग्रहण किया गया था, तो HTML अधिक अर्थपूर्ण होगा, और मिलान योग्य टैग के साथ असीम रूप से अधिक पठनीय होगा!

यह HAML के समान है, जहां हमारे पास:

.content Hello, World!

जो बन जाता है:

<div class='content'>Hello, World!</div>

यह मुझे लगता है कि ब्राउज़र में काम करने के लिए केवल यही होना होगा कि ब्राउज़र मौजूदा एचटीएमएल तत्व परिभाषा के बिना हर तत्व की व्याख्या करना शुरू कर सकते हैं <div class="<element name>">

यह पूरी तरह से पिछड़े संगत हो सकता है; CSS और jQuery चयनकर्ताओं आदि के लिए, "div.hero-img" अभी भी काम कर सकता है, और तत्वों का चयन करने के लिए आवश्यक सिंटैक्स हो सकता है।

मुझे नए वेब घटक विनिर्देशन के बारे में पता है, लेकिन यहाँ जो सुझाया गया है, उससे कहीं अधिक जटिल है। क्या आप सोच सकते हैं कि किसी वेबसाइट के स्रोत को देखना कितना सुखद होगा और HTML को उस तरह से देखा जा सकता है ?!

तो हमें divs का उपयोग क्यों करना है?

यदि आप मोज़िला की HTML5 तत्व सूची को देखें , तो प्रत्येक तत्व का अर्थ अर्थ है, और फिर हम <div>इसे प्राप्त करते हैं और कहते हैं:

"बिना किसी विशेष अर्थ के एक सामान्य कंटेनर का प्रतिनिधित्व करता है।"

..और फिर वे मनमानी तत्वों को सूचीबद्ध करते हैं जिन्हें वे html5 की तरह जोड़ रहे हैं <details>

बेशक, यदि निहित div की इस अवधारणा को html कल्पना में जोड़ा गया था, तो मानक बनने में दस साल लगेंगे, जो कि वेब समय में एक मिलियन वर्ष है।

इसलिए मुझे लगता है कि यह अभी तक नहीं हुआ है एक अच्छा कारण होना चाहिए। कृपया, इसे मुझे समझाएं!


वास्तव में दो गैर सिमेंटिक कंटेनर हैं: div और स्पैन
रेयान

जवाबों:


7

समस्या 1: श्वेत-रिक्त स्थान

मेरा मानना ​​है कि यह सामान्य रूप से नहीं आया है। हालाँकि, एक अच्छा कारण यह नहीं है और शायद ऐसा नहीं होना चाहिए क्योंकि white-spacesCSS classesतत्व के लिए कई वर्गों को परिभाषित करता है, जबकि HTML में वे परिभाषित करते हैं attributes

निम्नलिखित कोड को समझाएं (या किसी ब्राउज़र को पार्स करने के लिए कहें):

<pet family style=" ... ">
  <img src="my-pets-family.jpg"/>
</pet family>

है familyएक द्वितीय श्रेणी की परिभाषा या HTML तत्व को एक विशेषता? जैसा कि आप शायद इस साइट के पार्सर से देखते हैं, यह सोचता है कि यह एक विशेषता है।

इसलिए, यदि मैं चाहता हूं, तो <div class="pet family">वास्तव में दो वर्गों को परिभाषित करने का कोई तरीका नहीं है, जो कि दो मुख्य कारणों में से एक है जो कि मैं एक आईडी के बजाय एक वर्ग का उपयोग करूंगा।

समस्या 2: आगे की संगतता!

<div>फिलहाल s का उपयोग करना , हमें (कम से कम कुछ लोगों को) हमारे कोड के चारों ओर ठीक से इंडेंट करने और टिप्पणी करने के लिए मजबूर करता है, जो सभी प्रोग्रामिंग भाषाओं के लिए एक अच्छा अभ्यास है।

इसके बजाय, HTML ब्लॉकों को चर में बदलने से नए प्रोग्रामर को बड़ा भ्रम होगा कि HTML में कुछ विशिष्ट क्या है और क्या नहीं कर रहा है

इसके अलावा, यह मज़ेदार साइड-इफ़ेक्ट का कारण बनेगा कि आपको अपने पुराने कोड की तुलना नए एचटीएमएल 5 टैग से करना शुरू कर देना चाहिए , बस यह सुनिश्चित करने के लिए कि वे उसी नाम के साथ नहीं आए हैं जो आपने अपनी डिव की कक्षाओं के लिए किया था ...

कुछ भाषाओं में variablesउपयोग करने के लिए समान समस्या लागू होती है reserved words। PHP ने इसे डॉलर-चिह्न के साथ हल किया, इसलिए HTML में इसी तरह का दृष्टिकोण वर्तमान उपयोग की तुलना में कुछ बेहतर नहीं होगा <div class="something">


क्या उस व्यक्ति के साथ कोई समस्या रही होगी जिसने "वर्ग" का आविष्कार किया था जो निर्दिष्ट करता था कि <z:name1 attr1=foo attr2=bar> ... <z/name2 attr3=boz ... </z>शब्दार्थ के बराबर होगा <div class="name1" attr1="foo" attr2="bar">...</div><div class="name2" attr1="boz"> ... </div>लेकिन 14.4K मॉडेम पर भेजने के लिए बहुत कम समय लगता है?
सुपरकट

मुझे नहीं लगता। लेकिन यह सिर्फ एक ही बात लिखने के लिए एक अलग वाक्यविन्यास होगा, <div class="">किसी भी तरह से अवधारणा को सुधारना नहीं । फिर, क्यों कि परिभाषित z:name1या z/name2HTML टैग का है classइसकी और नहीं id? और व्हाइट-स्पेस की समस्या यहाँ फिर से शुरू हो जाती है। तो यह z:"name1 name2"दो वर्गों को घोषित करना होगा , जो कि बहुत अधिक एक ही बात फिर से हो जाता है।
mavrosxristoforos

वाक्य रचना की बहुत संभावनाएं हैं। मेरा कहना यह था कि एक ऐसे युग में जहाँ बहुत से लोग १४.४K या धीमे मोडेम का उपयोग कर रहे थे, एक ऐसा रूप होना चाहिए था जो बैंडविड्थ के मुद्दों पर कम से कम कुछ विचार दे।
सुपरकैट

मैं निश्चित रूप से समझता हूं। एक वेब डेवलपर के रूप में, मैं अभी भी तेजी से वेबसाइटों और अधिक का उत्पादन करने के लिए कुछ भी कम करने की कोशिश करता हूं। मेरा मानना ​​है कि यह कई पहलुओं में एक अच्छा दृष्टिकोण है, जैसा कि यह है, हालांकि।
मावरोसिस्ट्रिस्टोफोर्स

5

हम <div>आपके फैंस को जो कुछ भी गुदगुदी करते हैं उसके बजाय इसका उपयोग करते हैं क्योंकि यह ब्राउज़र द्वारा प्रसंस्करण और प्रतिपादन को आसान बनाता है।

एक काउंटर-उदाहरण के रूप में, XML आपको किसी भी टैग-नाम के निर्माण की अनुमति देता है जो आप चाहते हैं। मनमाने ढंग से टैग-नाम बनाने की क्षमता प्रसंस्करण लागत के साथ आती है। XML पार्सर को दस्तावेज़ के भाग के रूप में उपयोग किए गए टैग का एक शब्दकोश बनाना है / जबकि यह दस्तावेज़ को पार्स कर रहा है।

<div>ब्राउज़रों का उपयोग करने से पता चलता है कि वहां एक कंटेनर है और यह कंटेनर को अनदेखा कर सकता है या इसे श्रृंखला में किसी अन्य उपकरण के साथ पारित कर सकता है जो कंटेनर के साथ कुछ कर सकता है।


मुझे पूरा यकीन है कि यदि ब्राउजर ने बताई गई निहित div पद्धति का उपयोग किया है, तो प्रसंस्करण लागत गायब हो जाएगी। और पढ़ने और लिखने की क्षमता बहुत बड़ी होगी।
जॉर्डन डेविस

3
<div>कम जटिलता का मतलब है, जो हमेशा एक अच्छी बात है। इसके मूल में HTML दो प्रकार के निर्माणों से बना है: ब्लॉक स्तर और इनलाइन मार्कअप। एक ही चीज़ को व्यक्त करने के अधिक तरीके होने से केवल वह गड़बड़ होती है जो HTML है।

" प्रसंस्करण और ब्राउज़र द्वारा प्रदान करना आसान बनाता है। " यह वास्तव में सच नहीं है। ब्राउज़र को अपरिचित टैग को पार्स करने की आवश्यकता होती है, और सभी DOM तरीके और CSS चयनकर्ताओं को अभी भी उन पर काम करना होगा जैसा कि आपने उनसे उम्मीद की थी और ब्राउज़र अभी भी अपरिचित तत्वों के लिए CSS लागू करेंगे। केवल एक चीज जिसे ब्राउज़र बिना पहचाने टैग के साथ नहीं करता है वह डिफ़ॉल्ट शैली (उपयोगकर्ता एजेंट शैली) और व्यवहार लागू होता है।
रेयान

3

आप सुझाव दे रहे हैं कि वेब लेखक निजी (गैर-मानकीकृत) उद्देश्यों के लिए HTML में मनमाना तत्व नाम जोड़ सकते हैं। इसकी एक बड़ी समस्या है: यह HTML मानक में नए तत्वों को जोड़ने के लिए खतरनाक बना देगा, क्योंकि विभिन्न लेखक पहले से ही निजी उद्देश्यों के लिए एक ही तत्व नाम का उपयोग कर रहे होंगे - जिससे पृष्ठ के अर्थों को पूर्वव्यापी रूप से बदल दिया जाएगा। जब ब्राउज़र के नए संस्करण मौजूदा वेब पेजों को तोड़ते हैं, तो लोग खुश नहीं होते हैं, इसलिए यह एक नहीं है।

निजी उद्देश्यों के लिए मनमानी विशेषता नामों का उपयोग करने के साथ भी यही समस्या है। यही कारण है कि निजी उपयोग विशेषताओं के लिए HTML5 उपसर्ग "डेटा-" को अनिवार्य करता है, इसलिए वे मानक में नई विशेषताओं से टकराते नहीं हैं।

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


2

आपका अपना उदाहरण एक संपत्ति को प्रदर्शित करता है कि divs उतना हास्यास्पद क्यों नहीं हैं।

<div class="hero-img">
  <img src="http://whatever.com/this.jpg">
</div>

आपने सही ढंग से imgटैग को बंद नहीं किया है । कुछ टैग, के रूप में इस तरह के img, br, hr, और दूसरों को किसी भी सामग्री की जरूरत नहीं है, और इसलिए बंद किया जा करने के लिए नहीं कर रहे हैं। पार्सर यह जानता है।

divटैग, दूसरे हाथ पर, बंद कर दिया जाना चाहिए यह सामग्री शामिल है के रूप में किया जाता है। यदि आप सिर्फ अपना टैग मारते हैं, तो पार्सर को यह पता नहीं चलेगा कि उसे टैग बंद होने की उम्मीद है या नहीं।

कुछ तत्वों को बंद करने का कारण और अन्य एसजीएमएल विरासत से नहीं आते हैं, जो इस ब्लॉग पोस्ट में अच्छी तरह से वर्णन करता है: http://www.colorglare.com/2014/02/03/to-close-or-not- टू-close.html


2

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

<q:hero-img>
    <img src="http://whatever.com/this.jpg">
</q:hero-img>

यदि आप एक्सएमएल (एक्स) एचटीएमएल में बदलने के लिए उपयोग करते हैं, तो आप अपने फ्री-टैग "एचटीएमएल" वास्तविक एचटीएमएल से उत्पन्न करने के लिए पूरी तरह से स्वतंत्र होंगे <div class="hero-img">


कुछ टैगों में आपके स्वयं के (डमी) URL के साथ एक नामस्थान विशेषता:

xmlns:q="http://..."

1
सरल समाधान के लिए +1। उसे किसी नामस्थान उपसर्ग को शामिल करने की भी आवश्यकता नहीं है, और बस समग्र डॉक्स के लिए एक डिफ़ॉल्ट एनएस घोषित कर सकता है और इसे (एक्स) एचटीएमएल में बदलने के लिए एक एक्सएसएलटी प्रदान कर सकता है।
डगएम

1
XML नाम स्थान उपसर्ग द्वारा परिभाषित नहीं है, लेकिन उस उपसर्ग के xmlns घोषणा के मूल्य से। qयहाँ एक पूरी तरह से अर्थहीन उपसर्ग है (और अमान्य XML है) जब तक कि आपने दस्तावेज़ में कहीं xmlns घोषित नहीं किया है। आप एक ही नामस्थान को अलग-अलग उपसर्गों के साथ फिर से तैयार कर सकते हैं या दस्तावेज़ के एक निश्चित भाग के लिए डिफ़ॉल्ट नामस्थान सेट कर सकते हैं, और जब तक xmlns मान समान नहीं होते हैं, तब तक अलग-अलग उपसर्गों को CSS या DOM में लागू करने के साथ समान रूप से व्यवहार किया जाएगा।
रेयान

@LieRyan एक अच्छी बात है। मुझे इसका उल्लेख करना चाहिए था। तथ्य को ज्ञात था। जोड़ा
जोप एगेन

0

HTML के प्रमुख तत्वों में से एक वास्तविक रूप से पूर्वनिर्धारित टैग-तत्व हैं। इसीलिए।

Div वर्ग = इस "सीमा" के आसपास जाने का एक तरीका है।

और इसीलिए आप उन "निहित" निर्माणों को नहीं देखते हैं।


बताएं कि उन सभी Google इंजीनियरों ने नए वेब-घटकों की कल्पना को परिभाषित करते हुए ... मैं देख रहा हूं कि आपका क्या मतलब है, लेकिन आखिरकार अगले कुछ वर्षों में इसकी परवाह किए बिना डेवलपर जनित तत्वों का विस्फोट होने वाला है। मेरा विचार सिर्फ अधिक उपयोगकर्ता के अनुकूल है। हालांकि बिंदु लिया गया।
जॉर्डन डेविस

0

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

अपना खुद का नामित तत्व बनाने के लिए, जैसा कि आप दिखाते हैं, उस खोज इंजन में एक समस्या है और अन्य उपकरण नहीं जानते होंगे कि आपके तत्वों का क्या अर्थ है। एक "हीरो-आईएमजी" क्या है और यह मेरी "हीरो-इमेज" से कैसे अलग है और मेरे एपीआई को कैसे संभालना चाहिए जब मैं आपके पृष्ठ पर जाता हूं? ब्राउज़र को उस तत्व को कैसे संभालना चाहिए? यह ब्लॉक स्तर या इनलाइन है? बहुत सारे सवाल।


0

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

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.