मुझे यकीन नहीं है कि मुझे आइटम सूचीबद्ध करते समय डिव का उपयोग करके उल-ली का उपयोग करने की आवश्यकता क्यों है। मैं दोनों को समान रूप से समान बना सकता हूं इसलिए एक अनियंत्रित सूची बनाम अस्तर अप बनाने के लिए कार्यात्मक लाभ कहां है?
जवाबों:
शब्दार्थ शुद्धता के लिए। HTML में चीजों की सूचियों को व्यक्त करने की क्षमता है, और यह Google रोबोट, स्क्रीन रीडर और उन सभी उपयोगकर्ताओं को मदद करता है जो साइट की प्रस्तुति के बारे में पूरी तरह से परवाह नहीं करते हैं, जो आपकी सामग्री को बेहतर ढंग से समझते हैं।
मुझे यकीन नहीं है कि मुझे आइटम सूचीबद्ध करते समय डिव का उपयोग करके उल-ली का उपयोग करने की आवश्यकता क्यों है। मैं दोनों को बिल्कुल एक जैसा बना सकता हूं
कि आपके प्रश्न में मुख्य शब्द है: "देखो"। क्या आप उन्हें ब्रेल रीडर का उपयोग करके नेत्रहीन लोगों के लिए भी टाइप कर सकते हैं ? क्या आप उन्हें टेक्स्ट-टू-स्पीच सिंथेसाइज़र का उपयोग करके नेत्रहीन लोगों के लिए ध्वनि बना सकते हैं ? क्या आप अभी भी कस्टम क्लाइंट-साइड सीएसएस उपयोगकर्ता-स्टाइलशीट का उपयोग करके नेत्रहीन लोगों के लिए उन्हें समान दिख सकते हैं ?
वह शब्द, "देखो", एक बहुत ही खतरनाक शब्द है - जब आप HTML के संबंध में इसका उपयोग करते हैं, तो सभी अलार्म आपके सिर में चले जाने चाहिए। HTML एक हाइपरमीडिया दस्तावेज़ की शब्दार्थ संरचना का वर्णन करने के लिए एक भाषा है। एक अर्थ संरचना नहीं है है एक "देखो" यह एक अमूर्त अवधारणा है,।
यहां तक कि अगर आप इस सभी शब्दार्थ hocuspocus के बारे में परवाह नहीं करते हैं और आप अंधे लोगों की परवाह नहीं करते हैं, तो इस पर विचार करें: Google, याहू, एमएसएन और कंपनी की आंखें नहीं हैं, वे आपके प्रदान किए गए सीएसएस पर "नहीं" दिखते हैं ।
आपके प्रश्न का सीधा उत्तर: कार्यात्मक लाभ यह है कि डिव का मतलब अपने आप से कम होता है, जबकि उल लिस का स्पष्ट अर्थ है "यह एक संयुक्त राष्ट्र की / आदेशित सूची है।"
शब्द "शब्दार्थ" इस तरह से संदर्भित है कि आप स्पष्ट अर्थ बनाने के लिए मौजूदा संरचनाओं के निहित अर्थ का उपयोग करते हैं। HTML में ऐसे टैग शामिल होते हैं, जो कुछ चीजों का मतलब खुद से समझते हैं। और उन्हें उपयोग करने के लिए स्थापित नियम / दिशानिर्देश / तरीके हैं ताकि आपका प्रकाशित HTML दस्तावेज़ यह बताए कि आप इसका क्या मतलब चाहते हैं।
यदि आप अपने दस्तावेज़ में कुछ सूचीबद्ध करते हैं, तो एक आदेशित सूची (यूएल) या एक अनियंत्रित सूची (ओएल) जोड़ें। दूसरी ओर, पृष्ठ विभाजन (DIV) तत्व का उपयोग सामग्री के एक विशिष्ट और अलग टुकड़े को बनाने के लिए किया जाता है।
Div तत्व "बंटा होता है।" जब आप किसी पृष्ठ को देखते हैं, तो सामग्री निकाय, पाद लेख, शीर्ष लेख, नेविगेशन, मेनू, फ़ॉर्म आदि जैसे विशिष्ट भाग होते हैं और आप इन विभाजनों को बनाने के लिए div टैग का उपयोग कर सकते हैं । अक्सर, पृष्ठ भाग एक दृश्य लेआउट के साथ मेल खाता है, इसलिए सीएसएस में अपने लेआउट को काटने के लिए स्पष्ट पृष्ठ विभाजन (DIV) का उपयोग करना एक प्राकृतिक फिट है। इस तरह div टैग संरचनात्मक हो जाते हैं।
यदि आप div टैग का दुरुपयोग करते हैं या उसका उपयोग करते हैं , तो यह अनपेक्षित अर्थ और कोड ब्लोट बना सकता है।
मामलों को भ्रमित करने के लिए: Google अपने सूचीबद्ध खोज परिणामों को "विभाजित" करने के लिए h3 और div का उपयोग करता है । ul> li> h3 + div
इसलिए जब आप फ़ायरफ़ॉक्स w / WebDeveloper टूलबार में सभी शैलियों (Shift + Cmd / Crtl + S) को बंद कर देते हैं, तो divs को दूर जाना चाहिए, और स्वाभाविक रूप से स्टैक करना चाहिए। आपके नग्न HTML को अभी भी एक स्पष्ट पदानुक्रम के साथ एक अच्छा पृष्ठ प्रस्तुत करना चाहिए: ऊपर से नीचे, सबसे महत्वपूर्ण सामग्री पहले, और सूचीबद्ध वस्तुओं के लिए गोलियों और संख्याओं के साथ सूची। और यह शीर्ष (गैर-दृश्य उपयोगकर्ताओं के लिए) के पास एक लिंक जोड़ने के लिए एक अच्छा विचार है जो आपको नीचे छोड़ने की अनुमति देता है: मुख्य सामग्री, महत्वपूर्ण रूप या मुख्य शीर्षक (जैसे सामग्री की तालिका)।
अंत में, ध्यान रखें कि आप एक दस्तावेज़ बना रहे हैं। सभी दृश्य प्रभावों के बिना, यह अभी भी एक अस्पष्ट दस्तावेज होना चाहिए।
उपयोग करने <li>या उपयोग करने के बारे में बहुत सारी बातें हैं, <div>लेकिन किसी एक टिप्पणी ने उस सामग्री का ठोस उदाहरण नहीं दिया है जो इन टैगों के अंदर जाती है। मेरे भावना है कि <ul>और <li>वास्तव में महत्वपूर्ण है कि जैसा कि मैंने आपको पिछली बार नहीं बता सकता कि मैं वास्तव में एक वेबसाइट, समाचार पत्र या पत्रिका पर एक चीजों की "सूची" पढ़ा नहीं कर रहे हैं - ऑनलाइन या प्रिंट में।
<div>बहुत अधिक बहुमुखी है। यदि आप एक केक के लिए सामग्री को सूचीबद्ध कर रहे हैं, तो हाँ यह एक सूची है। यदि आप लंबी पैदल यात्रा के लिए पैक करने के लिए चीजों को सूचीबद्ध कर रहे हैं, तो हाँ यह एक सूची है।
लेकिन उदाहरण के लिए, एक उपयोगकर्ता-रूप के बारे में क्या है, जो कुछ यादृच्छिक चीजों को सूचीबद्ध करता है जो वास्तव में एक सूची नहीं है, न ही पैराग्राफ की एक श्रृंखला है, न ही सभी "हेडर।" कुछ चीजें दिनांक हैं, कुछ चेकबॉक्स हैं और कुछ पाठ हैं। आप मुझसे पूछें, तो इसे विभाजित करें। एक अंधे व्यक्ति होगा गलत सूचित अगर यह के साथ चिह्नित किया गया था <ul>और <li>और वे सुना "यहाँ का ... एक सूची है" यह सामान का सिर्फ एक कमेरा podge, नहीं वास्तव में एक सूची है जब।
आपको उस सामग्री के लिए उपयुक्त टैग का उपयोग करना चाहिए जिसे आप अंदर रखना चाहते हैं। इसका मतलब यह नहीं है कि उल / ली सूचियों के लिए अधिक उपयुक्त है। इसका मतलब यह भी है कि आपको अपनी सूची की सामग्री पर विचार करना होगा और यह देखना होगा कि इसकी अनियोजित / आदेशित या परिभाषा सूची है या नहीं।
एक और तर्क यह है कि जब आप सीएसएस को अक्षम करते हैं। ब्राउज़र इसे डिफ़ॉल्ट स्टाइलिंग प्रदान करेगा जो वैकल्पिक ब्राउज़िंग उपकरणों का उपयोग करने पर यह देखने के लिए अच्छा बनाता है। यह accesibility भी बढ़ाता है।
मुझे निजी तौर पर शब्दार्थ के लिए ली पसंद है। स्रोत को देखते समय आप तुरंत देखते हैं कि आपके पास किसी चीज़ की सूची है यदि वे एक ली द्वारा लिपटे हैं। एक div संग्रह कोई अर्थपूर्ण अर्थ प्रदान नहीं करता है, और आमतौर पर सूची के केवल शब्दार्थ "cItItem" जैसे सीएसएस वर्गों द्वारा पेश किए जाते हैं। जो स्पष्ट रूप से इस तथ्य की ओर इशारा करता है कि पहली जगह में एक ली का उपयोग किया जाना चाहिए था।
यदि आपके पास अपनी प्रस्तुति तर्क में एक लूप है, तो मैं हमेशा एक div पर एक ली का पक्ष लेता हूं।
<li> का अर्थ किसी सूची में एक आइटम है और जो पार्सर्स (ब्राउज़र, खोज इंजन, मकड़ियों) को यह बताता है कि आप आइटम सूचीबद्ध कर रहे हैं। आप LI के बजाय DIV का उपयोग कर सकते हैं, लेकिन उन पार्सर को कभी पता नहीं चलेगा कि उन वस्तुओं को सूचीबद्ध किया जा रहा है और DIV वास्तव में किसी भी चीज का वर्णन नहीं करता है सिवाय इसके कि यह एक ब्लॉक है।
यह प्रोजेक्ट पर निर्भर करता है। मैंने हाल ही में एक प्रोजेक्ट किया था जिसमें एक सूची का उपयोग करके एक मेनू बनाया गया था। वे फिसलने / लुप्त होने जैसे प्रभावों का एक गुच्छा जोड़ना चाहते थे, और इसे कई स्तरों के साथ ढहना चाहते थे।
इस मामले में, DIV अधिक उपयुक्त थे। मैं वांछित प्रभावों को प्राप्त करने के लिए बाल विभाग के लिए कंटेनर बनाने और jQuery लागू करने में सक्षम था।
यहां तक कि अगर आपके प्रोजेक्ट में अभी तक ये आवश्यकताएं नहीं हैं, तो यह सोचना विवेकपूर्ण हो सकता है कि आप इसे भविष्य में कैसे बदल सकते हैं ...
उपयोग करना <li>(जहाँ उपयुक्त हो) <div>आपके द्वारा सोचे जा रहे सूप को अक्सर वेब पेजों में देखा जाता है, जो डेवलपर्स को बहुत मदद करता है।
ऐसा नहीं है कि <div>बुरे हैं, लेकिन जब भी कोई टैग अति हो जाता है (जैसा कि <div>अक्सर होता है), यह टैग के अर्थ को पूरी तरह से बेकार होने के बिंदु तक फैला देता है। मैंने हाल ही में अपने वेब ऐप के सीएसएस / यूआई के साथ मदद करने के लिए काम पर रखे गए एक ठेकेदार से यह सीखा, और HTML कोड की पठनीयता / स्थिरता के लिए यह अंतर मेरे लिए बहुत ही ध्यान देने योग्य है।
यदि आप सभी परवाह करते हैं कि न्यूनतम प्रयास के साथ एक निश्चित तरीके से देखने के लिए सूचियां मिल रही हैं, तो यह पहले से ही एक नो-ब्रेनर है: <li>टाइप करने के लिए कम वर्ण है <div> और इसका समापन टैग HTML में वैकल्पिक है।
और इसके अलावा जो शब्दार्थ के बारे में बाकी सभी ने कहा है।
आपके प्रश्न का उत्तर पहले से ही है, मैं यहाँ अपने दो सेंट जोड़ना चाहता हूँ। मैं एक प्रोजेक्ट पर काम कर रहा था, जहां मैं बैकएंड लॉजिक कर रहा था और मेरे डेटा को मेरे डिजाइनर द्वारा बनाए गए पेज टेम्पलेट में एकत्र किया जा रहा था। उन्होंने पृष्ठ पर हर तरह की सूची का प्रतिनिधित्व करने के लिए उल और टैग का उपयोग किया, जिनमें से कुछ विजेट थे। डेटा एक सेमी से आ रहा था जहां उपयोगकर्ता html टैग के माध्यम से समृद्ध पाठ दर्ज कर सकते थे। जब उपयोगकर्ताओं ने अपनी सामग्री में सूचियाँ बनाना शुरू किया तो सूचियाँ अब बुलेटेड सूचियों की तरह नहीं दिखती थीं बल्कि पूरे पृष्ठ को खराब कर देती थीं।
सबक सीखा: जेनेरिक सीएसएस चयनकर्ताओं के साथ सूची टैग का उपयोग न करें यदि आपकी सामग्री स्वयं में HTML हो सकती है।
उल ली के बारे में एक और बात है; आप एक कंटेनर के रूप में उल का उपयोग कर सकते हैं जो आपको स्टाइल क्लास सेट करने में मदद करता है
<ul class="myHebe">
<li><a href="#">.net</a></li>
<li><a href="#">.net</a></li>
</ul>मैं इस पैटर्न को पसंद करता हूं जब मैं उल का उपयोग करता हूं
.myHebe{} // container
.myHebe li {} // items
.myHebe li a {} // subitemsबेशक यह इस बात पर निर्भर करता है कि हम इसका उपयोग कैसे करना चाहते हैं और हम इसे कैसे पसंद करते हैं। यह तरीका मुझे पसंद है
आशा है कि धन्यवाद मदद करता है