HTML तीन अलग-अलग प्रकार की सूचियों का समर्थन करता है, जिनमें से प्रत्येक के अपने टैग हैं:

• - एक क्रमांकित (संख्याओं या अक्षरों का उपयोग करके) सूची, जिसके प्रत्येक तत्व में एक क्रमांक (अक्षर) होता है;
  1. - एक बुलेटेड (संख्यांकित नहीं) सूची, जिसके प्रत्येक तत्व के आगे एक मार्कर रखा गया है (क्रम संख्या को इंगित करने वाले संख्यात्मक या वर्णमाला वर्णों के बजाय);

     • - एक परिभाषा सूची में नाम/मूल्य जोड़े होते हैं, जिनमें नियम और परिभाषाएँ शामिल होती हैं।

     क्रमांकित सूचियाँ

     क्रमांकित सूची में, ब्राउज़र स्वचालित रूप से एक निश्चित मान (आमतौर पर 1) से शुरू करके क्रम में तत्व संख्याएँ सम्मिलित करता है। यह आपको क्रमांकन में गड़बड़ी किए बिना सूची आइटम सम्मिलित करने और हटाने की अनुमति देता है, क्योंकि शेष संख्याएँ स्वचालित रूप से पुनर्गणना की जाएंगी।
     क्रमांकित सूचियाँ एक ब्लॉक तत्व का उपयोग करके बनाई जाती हैं

     (अंग्रेजी ऑर्डर्ड लिस्ट से - क्रमांकित सूची)। कंटेनर के बगल में
     प्रत्येक सूची आइटम के लिए एक तत्व रखा गया है
     1. (अंग्रेजी सूची आइटम से - सूची आइटम)। डिफ़ॉल्ट अरबी अंकों वाली एक क्रमांकित सूची है।
        टैग
        निम्नलिखित वाक्यविन्यास है:
        1. तत्व 1
        2. तत्व 2
        3. तत्व 3

        क्रमांकित सूची आइटम में एकाधिक सूची आइटम होने चाहिए, जैसा कि निम्नलिखित उदाहरण में दिखाया गया है:

        उदाहरण: क्रमांकित सूची

        • खुद कोशिश करना "

        चरण-दर-चरण अनुदेश

        1. कुंजी प्राप्त करें
        2. ताले में चाबी डालें
        3. चाबी को दो बार घुमाएँ
        4. ताले से चाबी निकालो
        5. दरवाजा खाेलें

        चरण-दर-चरण अनुदेश

        1. कुंजी प्राप्त करें
        2. ताले में चाबी डालें
        3. चाबी को दो बार घुमाएँ
        4. ताले से चाबी निकालो
        5. दरवाजा खाेलें

        कभी-कभी मौजूदा HTML कोड को देखते समय आपको तर्क का सामना करना पड़ेगा प्रकारतत्व में

        , जिसका उपयोग क्रमांकन के प्रकार (अक्षर, रोमन और अरबी अंक, आदि) को इंगित करने के लिए किया जाता है। वाक्य - विन्यास:

        यहां: प्रकार - सूची प्रतीक:

        • ए - बड़े लैटिन अक्षर (ए, बी, सी...);
        • ए - लोअरकेस लैटिन अक्षर (ए, बी, सी...);
        • मैं - बड़े रोमन अंक (I, II, III...);
        • मैं - छोटे रोमन अंक (i, ii, iii...);
        • 1 - अरबी अंक (1, 2, 3...) (डिफ़ॉल्ट रूप से प्रयुक्त)।

        यदि आप चाहते हैं कि सूची 1 के अलावा किसी अन्य संख्या से शुरू हो, तो आपको विशेषता का उपयोग करके इसे निर्दिष्ट करना चाहिए शुरूटैग

        .
        निम्नलिखित उदाहरण बड़े रोमन अंकों और XLIX के शुरुआती मान के साथ एक क्रमांकित सूची दिखाता है:

        विशेषता का उपयोग करके नंबरिंग भी शुरू की जा सकती है कीमत, जो तत्व में जोड़ा जाता है

        1. इस अनुसार:

        7. इस स्थिति में, सूची की क्रमिक क्रमांकन बाधित हो जाएगी और इस बिंदु से क्रमांकन फिर से शुरू हो जाएगा, इस मामले में सात से।

           विशेषता उपयोग उदाहरण कीमतटैग

        8. , जो आपको किसी दिए गए सूची तत्व की संख्या बदलने की अनुमति देता है:

           इस उदाहरण में, "पहली सूची आइटम" नंबर 1 होगा, "दूसरी सूची आइटम" नंबर 7 होगा, और "तीसरी सूची आइटम" नंबर 8 होगा।

           सीएसएस के साथ क्रमांकित सूचियाँ स्वरूपित करना

           सूची संख्याएँ बदलने के लिए आपको संपत्ति का उपयोग करना चाहिए सूची-शैली-प्रकारसीएसएस स्टाइल शीट:

           क्रमांकित सूची शैलियाँ

           उदाहरण	अर्थ	विवरण
           ए, बी, सी	कम-अल्फा	निचला मामला
           ए, बी, सी	ऊपरी अल्फा	बड़े अक्षर
           मैं, द्वितीय, तृतीय	निचला-रोमन	छोटे अक्षरों में रोमन अंक
           मैं, द्वितीय, तृतीय	ऊपरी रोमन	बड़े अक्षरों में रोमन अंक

           उदाहरण: सीएसएस प्रॉपर्टी लागू करना सूची-शैली-प्रकार

           बुलेटेड सूचियाँ

           बुलेटेड सूचियाँ अनिवार्य रूप से क्रमांकित सूचियों के समान होती हैं, केवल उनमें वस्तुओं की क्रमिक क्रमांकन नहीं होती है। बुलेटेड सूचियाँ ब्लॉक तत्व का उपयोग करके बनाई जाती हैं

           (अंग्रेजी अनऑर्डर्ड लिस्ट से - अननंबर्ड लिस्ट)। प्रत्येक सूची तत्व, क्रमांकित सूचियों की तरह, एक टैग से शुरू होता है
           • . ब्राउज़र प्रत्येक सूची आइटम को इंडेंट करता है और स्वचालित रूप से बुलेट प्रदर्शित करता है।
             टैग
             निम्नलिखित वाक्यविन्यास है:
             • पहला बिंदु
             • दूसरा बिंदु
             • तीसरा बिंदु

             निम्नलिखित उदाहरण में, आप देख सकते हैं कि, डिफ़ॉल्ट रूप से, प्रत्येक सूची आइटम से पहले भरे हुए वृत्त के रूप में एक छोटा मार्कर जोड़ा जाता है:

             एक टैग के अंदर

             • केवल पाठ डालना आवश्यक नहीं है; स्ट्रीमिंग सामग्री के किसी भी तत्व (लिंक, पैराग्राफ, चित्र, आदि) को रखना स्वीकार्य है।

               नेस्टेड सूचियाँ

               किसी भी सूची को दूसरे में नेस्ट किया जा सकता है। किसी तत्व के अंदर
             • नेस्टेड सूची या दूसरे स्तर की सूची बनाने की अनुमति है। किसी सूची को नेस्ट करने के लिए, तत्व के अंदर नई सूची का वर्णन करें
             • पहले से मौजूद सूची. जब आप एक बुलेटेड सूची को दूसरे में नेस्ट करते हैं, तो ब्राउज़र स्वचालित रूप से दूसरे स्तर की सूची के लिए बुलेट शैली को बदल देता है। किसी भी सूची को दूसरे में नेस्ट किया जा सकता है। निम्नलिखित उदाहरण क्रमांकित सूची के दूसरे आइटम के भीतर निहित बुलेटेड सूची की संरचना को प्रदर्शित करता है।

               उदाहरण: नेस्टेड सूचियाँ

               • खुद कोशिश करना "
               • सोमवार
                 1. मेल भेजने
                 2. संपादक के पास जाएँ
                    • एक थीम चुनना
                    • सजावटी डिज़ाइन
                    • अंतिम रिपोर्ट
                 3. शाम को संदेशों का अवलोकन
               • मंगलवार
                 1. शेड्यूल संशोधित करें
                 2. छवियाँ भेजें
               • बुधवार...
               • सोमवार
                 1. मेल भेजने
                 2. संपादक के पास जाएँ
                    • एक थीम चुनना
                    • सजावटी डिज़ाइन
                    • अंतिम रिपोर्ट
                 3. शाम को संदेशों का अवलोकन
               • मंगलवार
                 1. शेड्यूल संशोधित करें
                 2. छवियाँ भेजें
               • बुधवार...

               बुलेटेड सूचियाँ स्वरूपित करना

               सूची मार्कर का स्वरूप बदलने के लिए, आपको संपत्ति का उपयोग करना चाहिए सूची-शैली-प्रकारसीएसएस स्टाइल शीट:

               निम्नलिखित उदाहरण बुलेटेड सूचियों की विभिन्न शैलियाँ दिखाता है:

               उदाहरण: बुलेट सूची शैलियाँ

               • खुद कोशिश करना "
               • कॉफी
               • कॉफी
               • कॉफी
               • कॉफी

               डिस्क:

               • कॉफी
               • दूध

               घेरा:

               • कॉफी
               • दूध

               वर्ग:

               • कॉफी
               • दूध

               कोई नहीं:

               • कॉफी
               • दूध

               ग्राफ़िक मार्कर.

               HTML में ग्राफिक मार्करों के साथ एक सूची बनाना संभव है। यह एक बात है जब सूची मार्कर मानक वृत्त या वर्ग होते हैं, और यह बिल्कुल दूसरी बात है जब डेवलपर स्वयं पृष्ठ डिज़ाइन के अनुसार मार्कर का चयन करता है। सूची की वस्तुओं को सुंदर बनाने के लिए प्राय: छोटे-छोटे चित्रों का प्रयोग किया जाता है।
               किसी नियमित मार्कर को ग्राफ़िक मार्कर से बदलने के लिए, प्रॉपर्टी को बदलें सूची-शैली-प्रकारप्रति संपत्ति सूची-शैली-छविऔर छवि का URL इंगित करें:

               उदाहरण: ग्राफ़िक मार्कर

               • खुद कोशिश करना "

               राशि चक्र के संकेत

               • TAURUS
               • मिथुन राशि

               राशि चक्र के संकेत

               • एआरआईएस
               • TAURUS
               • मिथुन राशि

               परिभाषाओं की सूची (विवरण)

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

               (अंग्रेजी परिभाषा सूची से - परिभाषाओं की सूची)। इसमें टैग शामिल हैं

               (अंग्रेजी परिभाषा शब्द से - एक परिभाषित शब्द, पद) और

               (अंग्रेजी परिभाषा विवरण से - परिभाषित किए जा रहे शब्द का विवरण)।
               परिभाषाओं की सूची अक्सर वैज्ञानिक, तकनीकी और शैक्षिक प्रकाशनों में उपयोग की जाती है, उनका उपयोग शब्दावलियों, शब्दकोशों, संदर्भ पुस्तकों आदि को संकलित करने के लिए किया जाता है।

               विवरण की सूची की सामान्य संरचना इस प्रकार है:

               पहला कार्यकाल

               प्रथम पद का विवरण

               दूसरी अवधि

               दूसरे पद का विवरण

               निम्नलिखित उदाहरण परिभाषा सूची का एक संभावित उपयोग दिखाता है:

               उदाहरण: परिभाषा सूची

               • खुद कोशिश करना "

               वर्ल्ड वाइड वेब - अंग्रेजी से। वर्ल्ड वाइड वेब (डब्ल्यूडब्ल्यूडब्ल्यू) एक वितरित प्रणाली है जो इंटरनेट से जुड़े विभिन्न कंप्यूटरों पर स्थित संबंधित दस्तावेजों तक पहुंच प्रदान करती है। इंटरनेट नेटवर्कों का एक समूह है जो सूचना प्रसारित करने के लिए एकल विनिमय प्रोटोकॉल का उपयोग करता है। एक वेबसाइट अलग-अलग वेब पेजों का एक समूह है जो लिंक और एक समान डिज़ाइन द्वारा परस्पर जुड़े होते हैं।

               विश्वव्यापी वेब

               - अंग्रेज़ी से वर्ल्ड वाइड वेब (डब्ल्यूडब्ल्यूडब्ल्यू) एक वितरित प्रणाली है जो इंटरनेट से जुड़े विभिन्न कंप्यूटरों पर स्थित संबंधित दस्तावेजों तक पहुंच प्रदान करती है।

               इंटरनेट

               - नेटवर्क का एक सेट जो सूचना प्रसारित करने के लिए एकल एक्सचेंज प्रोटोकॉल का उपयोग करता है।

               वेबसाइट

               - अलग-अलग वेब पेजों का एक सेट जो लिंक और एक समान डिज़ाइन द्वारा परस्पर जुड़े हुए हैं।

               डिफ़ॉल्ट रूप से, शब्द का पाठ ब्राउज़र विंडो के बाएं किनारे पर दबाया जाता है, और शब्द का विवरण नीचे स्थित होता है और दाईं ओर स्थानांतरित हो जाता है।

               HTML में दो प्रकार की सूचियाँ होती हैं: क्रमांकित और बिना क्रमांकित। इनकी रचना लगभग एक जैसी ही है. यहां तक ​​कि टैग भी एक वर्ण से भिन्न होते हैं। आप ऐसा भी बना सकते हैं जिसमें क्रमांकित और मार्कर दोनों शामिल हो सकते हैं।

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

               HTML क्रमांकित सूची

               निम्नलिखित टैग का उपयोग करके एक नियमित क्रमांकन बनाया जा सकता है:

               पहली सूची आइटम

               सूची में दूसरा आइटम

               सूची में तीसरा आइटम

               सरल सूचियाँ इस प्रकार दिखती हैं

               मानकों के अनुसार, प्रत्येक सूची आइटम एक उद्घाटन और समापन ली टैग के अंदर होना चाहिए। लेकिन यदि आप क्लोजिंग टैग नहीं लगाएंगे तो परिणाम बिल्कुल वैसा ही होगा। प्रोसेसर काफी स्मार्ट है. सूची रूपांतरण के दौरान, यह शुरुआती टैग को पार्स करता है। अगर वह कोई नया देखता है

               , फिर स्वचालित रूप से उसके सामने रख देता है

               .

               इस प्रकार, सूचियाँ नीचे दिखाए अनुसार बनाई जा सकती हैं।

               

               लेकिन प्रोफेशनल्स के नजरिए से ये गलत है.

               

               बिना क्रमांकित (या बुलेटेड) सूचियाँ इसी प्रकार बनाई जाती हैं, केवल ol टैग के स्थान पर ul लिखा जाता है।

               इसमें कोई संख्या या अक्षर नहीं हैं - केवल विभिन्न प्रतीक हैं जिन्हें मार्कर कहा जाता है।

               

               HTML बहु-स्तरीय क्रमांकित सूची

               कई उपयोगकर्ता इस अवसर में रुचि रखते हैं। इसलिए, यह ध्यान दिया जाना चाहिए कि किसी भी HTML क्रमांकित सूची को बहु-स्तरीय बनाया जा सकता है। अतिरिक्त स्तर समान या लेबल किए जा सकते हैं।

               

               उपरोक्त उदाहरण में दिखाई गई सूची बनाने के लिए, आपको निम्नलिखित लिखना होगा।

               

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

               क्रमांकित लोगों के लिए हम वर्णमाला या संख्याओं के प्रकार को इंगित करते हैं, और अन्य मामलों के लिए - मार्कर के प्रकार को।

               यदि आप एक विशेष HTML टैग का उपयोग करते हैं, तो क्रमांकित सूची आपकी इच्छानुसार कुछ भी बन सकती है।

               आप तालिका से किसी भी मान के साथ प्रकार विशेषता निर्दिष्ट कर सकते हैं। या सीएसएस शैली वर्ग में, वांछित सॉर्टिंग प्रकार के साथ सूची-शैली-प्रकार निर्दिष्ट करें।

               

               मूल्यों का अनुवाद काफी सरल है. अंग्रेजी का बुनियादी ज्ञान ही काफी है. लेकिन भले ही आप "सर्कल", "स्क्वायर" आदि शब्दों का अनुवाद नहीं कर सकते, फिर भी आप स्पष्ट रूप से समझ सकते हैं कि प्रकार विशेषता में इन मानों को निर्दिष्ट करने पर परिणाम क्या होगा।

               क्रमांकित सूचियों के लिए, निम्नलिखित विकल्पों का उपयोग करें:

               • 1 - अरबी अंक;
               • ए - बड़े अक्षर;
               • ए - लोअरकेस लैटिन अक्षर;
               • मैं - बड़े रोमन अंक;
               • मैं - लोअरकेस रोमन अंक।

               डिफ़ॉल्ट हमेशा एक सूची होती है, अर्थात, यदि आप कुछ भी निर्दिष्ट नहीं करते हैं, तो यह टाइप = "1" के समान है।

               इसके अलावा, क्रमांकित सूचियाँ किसी भी वांछित स्थान पर शुरू हो सकती हैं। डिफ़ॉल्ट रूप से, आउटपुट 1 से शुरू होता है। लेकिन आप चाहें तो कम से कम सौ से शुरू कर सकते हैं। ऐसा करने के लिए, आपको किसी भी मान के साथ प्रारंभ विशेषता निर्दिष्ट करने की आवश्यकता है।

               

               इसके अलावा, आप उल्टे क्रम में निष्कर्ष निकाल सकते हैं। ऐसा करने के लिए आपको उल्टा लिखना होगा।

               

               सूचियों का डिज़ाइन

               एक HTML क्रमांकित सूची को इतनी खूबसूरती से डिज़ाइन किया जा सकता है कि आपको तुरंत एहसास नहीं होगा कि यह एक नियमित सूची है और फ़ोटोशॉप में बनाई गई तस्वीर नहीं है।

               यहां सुंदर सूचियों के उदाहरण दिए गए हैं.

               

               जैसा कि उदाहरण से देखा जा सकता है, आप क्रमांकन और तत्वों का स्वरूप स्वयं बदल सकते हैं।

               आप इस तरह एक नियमित सूची बना सकते हैं.

               

               सीएसएस शैलियों में आपको ओएल टैग के लिए डिज़ाइन निर्दिष्ट करने की आवश्यकता है। कृपया ध्यान दें कि इस मामले में सेटिंग्स पूरी साइट पर उन सभी सूचियों पर लागू की जाएंगी जहां इस शैली फ़ाइल का उपयोग किया जाता है।

               

               आइए पहले गोल सूची डिज़ाइन वाले विकल्प पर विचार करें। सूची कोड पर लौटें. वर्ग पूर्णांक-सूची वहां दर्शाई गई है। यह वह वर्ग है जिसके साथ आपको ऐसी सुंदरता बनाने के लिए छेड़छाड़ करने की आवश्यकता है। आप कक्षा का नाम जो चाहें रख सकते हैं।

               

               

               

               अब चौकोर डिज़ाइन पर नजर डालते हैं।

               

               शैलियाँ काफी समान हैं. अंतर यह है कि पहले मामले में तत्व को सीएसएस क्षमताओं का उपयोग करके गोल किया जाता है।

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

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

               जैसे-जैसे आधुनिक बाज़ार में उनकी हिस्सेदारी कम होती जाती है, कुछ वेबमास्टर उनसे आंखें मूंद लेते हैं। लेकिन एक पेशेवर के लिए, प्रत्येक आगंतुक महत्वपूर्ण है, खासकर यदि यह एक व्यावसायिक साइट है।

               सभी के लिए उपयुक्त कुछ बनाएं या सभी ब्राउज़र विविधताओं को ध्यान में रखें।

               HTML में, टैग का एक पूरा सेट सूचियों को व्यवस्थित करने के लिए जिम्मेदार होता है, जिसके संगठन को डेटा संरचना के लिए कुछ नियमों का पालन करना होगा।

               HTML मानक का पाँचवाँ संस्करण 3 प्रकार की सूचियों का समर्थन करता है: क्रमांकित सूचियाँ, बुलेटेड सूचियाँ और परिभाषा सूचियाँ। यह नेस्टेड बहु-स्तरीय सूचियाँ बनाते हुए, सूचियों को एक-दूसरे के भीतर नेस्ट करने की क्षमता भी प्रदान करता है।

               क्रमांकित सूची

               क्रमांकित सूची- यह एक निश्चित अनुक्रम वाले तत्वों (सूची आइटम) का एक सेट है। क्रमांकित सूची में प्रत्येक आइटम में एक अद्वितीय मार्कर होता है जो उस क्रम को दर्शाता है जिसमें आइटम सूची में अन्य आइटमों के सापेक्ष दिखाई देता है। डिफ़ॉल्ट रूप से, क्रमांकित सूची आइटम मार्कर संख्याएँ होते हैं। पहले आइटम को 1 नंबर दिया गया है, दूसरे को 2 नंबर दिया गया है, इत्यादि।

               क्रमांकित सूचियों का सबसे आम उदाहरण विभिन्न व्यंजन तैयार करने की विधियाँ हैं। चूंकि कोई भी नुस्खा क्रियाओं के स्पष्ट अनुक्रम के साथ एक क्रमांकित सूची है।

               HTML में क्रमांकित सूचियाँ बनाने के लिए, टैग का उपयोग करें

               , जिसके अंदर डेटा वाले सूची तत्व स्थित हैं। प्रत्येक सूची आइटम को एक टैग का उपयोग करके दर्शाया गया है
               1. :

                  क्रमांकित सूची:

                  1. कॉफी
                  2. चाय
                  3. दूध
                  कोशिश "

                  नोट: टैग

                  टैग केवल चाइल्ड तत्वों के रूप में शामिल हो सकते हैं
                  1. , अर्थात्, क्रमांकित सूची की सभी सामग्री को तत्वों के अंदर रखा जाना चाहिए
                  2. . टैग
                  3. बदले में, सामग्री पर कोई प्रतिबंध नहीं है, इसलिए आप इसमें पैराग्राफ, चित्र, लिंक, टेबल, अन्य सूचियां आदि रख सकते हैं।

                     बुलेटेड सूची

                     बुलेटेड सूची- ये अनगिनत हैं, यानी तत्वों की अव्यवस्थित सूचियाँ, जिनका क्रम कोई मायने नहीं रखता। सभी बुलेटेड सूची आइटमों में समान बुलेट्स होते हैं, और डिफ़ॉल्ट रूप से वे छोटे काले घेरे के रूप में दिखाई देते हैं।

                     HTML में बुलेटेड सूचियाँ बनाने के लिए, टैग का उपयोग करें

                     , जिसके अंदर सूची के तत्व स्वयं स्थित होते हैं (जैसा कि क्रमांकित सूचियों के मामले में, टैग
                     • , जिसमें सूची की सभी प्रदर्शित सामग्री शामिल है):

                       बुलेटेड सूची:

                       • कॉफी
                       • चाय
                       • दूध
                       कोशिश "

                       मार्करों के प्रकार

                       क्रमांकित सूची बुलेट के प्रकार को प्रकार विशेषता का उपयोग करके बदला जा सकता है। यह विशेषता पाँच प्रकार के मार्करों का समर्थन करती है:

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

                       सूची मार्कर बदलना:

                       प्रकार='ए' विशेषता के साथ क्रमांकित सूची:

                       1. सेब
                       2. केले
                       3. नींबू

                       type='I' विशेषता के साथ क्रमांकित सूची:

                       1. सेब
                       2. केले
                       3. नींबू

                       बुलेटेड सूची मार्करों के प्रकार:

                       • सेब
                       • केले
                       • नींबू
                       • सेब
                       • केले
                       • नींबू
                       कोशिश "

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

                       क्षैतिज सूची

                       यदि आप एक क्षैतिज मेनू बनाने के लिए HTML सूची बॉक्स का उपयोग कर रहे हैं, तो आपको सूची आइटम को एक ही पंक्ति में एक के बाद एक व्यवस्थित करने की आवश्यकता होगी। यह HTML का उपयोग करके नहीं किया जा सकता है, इसलिए आपको CSS का उपयोग करना होगा।

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

                       क्रमांकित सूची

                       1. सेब
                       2. केले
                       3. नींबू

                       बुलेटेड सूची:

                       • सेब
                       • केले
                       • नींबू
                       कोशिश "

                       इसके बाद, सूची के सभी आइटम एक पंक्ति में आ जायेंगे। कृपया ध्यान दें कि गोलियां सूची आइटम से गायब हो जाएंगी और उनके बीच कोई जगह भी नहीं होगी, लेकिन सूची का बायां इंडेंटेशन बना रहेगा।

                       आप देख सकते हैं कि क्षैतिज सूची को क्षैतिज मेनू में कैसे बदलें।

                       अंतर केवल इतना है कि यह टैग सख्ती से क्रमांकन सूचियों के लिए बनाया गया है। टैग का नाम अंग्रेजी संक्षिप्त नाम "ऑर्डर्ड लिस्ट" से आया है - एक क्रमांकित सूची।

                       टैग सिंटैक्स

                       1. तत्व #1
                       2. तत्व #2
                       3. तत्व #3
                       4. ...

                     जहां type='value' विशेषता निम्नलिखित मान ले सकती है

                     • ए - बड़े लैटिन अक्षरों (ए, बी, सी..) के रूप में मार्कर सेट करता है;
                     • ए - लोअरकेस लैटिन अक्षरों (ए, बी, सी..) के रूप में मार्कर सेट करता है;
                     • I - बड़े रोमन अंकों (I, II, III, IV..) के रूप में मार्कर सेट करता है;
                     • i - छोटे रोमन अंकों (i, ii, iii, iv..) के रूप में मार्कर सेट करता है;
                     • 1 (डिफ़ॉल्ट) - अरबी अंकों (1, 2, 3..) के रूप में मार्कर सेट करता है;

                     प्रारंभ = "मूल्य" विशेषता रिपोर्ट का प्रारंभिक मूल्य (प्रारंभ मूल्य) निर्दिष्ट करती है।

                     उलटा विशेषता रिवर्स गिनती निर्दिष्ट करती है (यदि आवश्यक हो)।

                     टैग

                     क्लोजिंग टैग के अनिवार्य उपयोग की आवश्यकता है

                     सूची तत्वों को बनाने के लिए युग्मित टैग का उपयोग किया जाता है

                  4. . उद्घाटन और समापन टैग के बीच अलग-अलग शब्द, वाक्यांश, पैराग्राफ, चित्र, कोड के टुकड़े और बहुत कुछ हैं जो बुलेटेड सूची की सामग्री हैं।

                     टिप्पणी

                     सूची के अंदर आप खाते को अपने खाते में बदल सकते हैं। इस उद्देश्य के लिए टैग पर एक विशेष विशेषता मान = "" है।

                  5. , जिसे कुछ संख्यात्मक मान निर्दिष्ट किया गया है। उदाहरण के लिए

                     1. तत्व #1
                     10. तत्व #2
                     11. तत्व #3

               HTML में क्रमांकित सूचियों वाले उदाहरण (

               )

               उदाहरण 1. लैटिन अक्षरों में HTML क्रमांकित सूची

               बड़े अक्षरों के साथ उदाहरण

               1. तत्व #1
               2. तत्व #2
               3. तत्व #3

               1. तत्व #1
               2. तत्व #2
               3. तत्व #3

               छोटे अक्षरों वाला उदाहरण

               1. तत्व #10
               2. तत्व #11
               3. तत्व #12

               यह पृष्ठ पर ऐसा दिखता है:

               1. तत्व #1
               2. तत्व #2
               3. तत्व #3

               उदाहरण 2. रोमन अक्षरों में HTML क्रमांकित सूची

               बड़े अक्षरों के साथ उदाहरण

               1. तत्व #1
               2. तत्व #2
               3. तत्व #3

               यह पृष्ठ पर ऐसा दिखता है:

               1. तत्व #1
               2. तत्व #2
               3. तत्व #3

               छोटे अक्षरों वाला उदाहरण

               1. तत्व #1
               2. तत्व #2
               3. तत्व #3

               यह पृष्ठ पर ऐसा दिखता है:

               1. तत्व #1
               2. तत्व #2
               3. तत्व #3

               उदाहरण 3. क्रमांकित सूची html भिन्न प्रारंभिक स्थिति

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

               50. तत्व #1
               51. तत्व #2
               52. तत्व #3

               यह पृष्ठ पर ऐसा दिखता है:

               1. तत्व #1
               2. तत्व #2
               3. तत्व #3

               उदाहरण 4. HTML क्रमांकित सूचियों में गिनती बदलना

               टैग में नए तत्व प्रदर्शित करते समय वैल्यू विशेषता का उपयोग करके काउंटर वैल्यू को बदलने की क्षमता वाला एक उदाहरण नीचे दिया गया है

               • .

                 10. तत्व #1
                 11. तत्व #2
                 100. तत्व #3
                 101. तत्व #4

                 यह पृष्ठ पर ऐसा दिखता है:

                 1. तत्व #1
                 2. तत्व #2
                 3. तत्व #3
                 4. तत्व #4

                 उदाहरण 5. html में उलटी क्रमांकित सूची

                 नीचे उलटी क्रमांकित सूची (उल्टे क्रम में गिनती) का एक उदाहरण दिया गया है।

                 10. तत्व #1
                 11. तत्व #2
                 12. तत्व #3
                 13. तत्व #4

                 यह पृष्ठ पर ऐसा दिखता है:

                 1. तत्व #1
                 2. तत्व #2
                 3. तत्व #3
                 4. तत्व #4

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

                 दूध सफेद तरल दूध उत्पाद। ब्रेड आटे से बना एक खाद्य उत्पाद। मक्खन एक पीला ठोस डेयरी उत्पाद है। कॉफ़ी बीन्स कुछ कॉफ़ी पेड़ों के फल के बीज।

                 प्रत्येक परिभाषा और पद एक परिभाषा समूह (या नाम-मूल्य समूह) है। आप जितने चाहें उतने परिभाषा समूह रख सकते हैं, लेकिन प्रत्येक समूह में कम से कम एक पद और कम से कम एक परिभाषा होनी चाहिए। आपके पास परिभाषा के बिना कोई पद या पद के बिना कोई परिभाषा नहीं हो सकती।

                 एक परिभाषा के साथ एक से अधिक शब्दों को जोड़ना संभव है, या इसके विपरीत। उदाहरण के लिए, "कॉफ़ी" शब्द के कई अर्थ हो सकते हैं, और आप उन्हें एक के बाद एक दिखा सकते हैं:

                 कॉफ़ी भुनी हुई, पिसी हुई कॉफ़ी बीन्स से बना एक पेय, एक कप कॉफ़ी, एक बैठक जिसके दौरान मध्यम से गहरे भूरे रंग की कॉफ़ी पी जाती है

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

                 सोडा पॉप सोडा कोला मीठा, कार्बोनेटेड पेय

                 परिभाषा सूचियाँ अन्य प्रकार की सूचियों से भिन्न होती हैं क्योंकि वे सूची वस्तुओं के बजाय परिभाषित शब्दों और परिभाषा विवरणों का उपयोग करती हैं।

                 इसलिए परिभाषा सूचियाँ तत्वों की एक जोड़ी का उपयोग करती हैं

                 , टैग के समूहों को कवर करना
                 और
                 . कम से कम एक टैग समूह अवश्य जोड़ा जाना चाहिए
                 एक समूह के साथ
                 ; टैग
                 क्रम में हमेशा पहले आना चाहिए।

                 एक परिभाषा के साथ एक पद की परिभाषाओं की एक सरल सूची इस तरह दिखेगी:

                 अवधि

                 शब्द की परिभाषा

                 अवधि

                 शब्द की परिभाषा

                 अवधि

                 शब्द की परिभाषा

                 जिसका आउटपुट इस प्रकार है:

                 पद की परिभाषा पद की परिभाषा पद की परिभाषा पद की परिभाषा पद की परिभाषा

                 इस उदाहरण में, हम एक से अधिक शब्दों को एक परिभाषा से जोड़ते हैं और इसके विपरीत:

                 अवधि

                 शब्द की परिभाषा

                 अवधि

                 अवधि

                 एक परिभाषा जो पिछली दोनों शर्तों पर लागू होती है

                 एक शब्द जिसकी निम्नलिखित दोनों परिभाषाएँ हो सकती हैं

                 शब्द की एक परिभाषा

                 शब्द की एक और परिभाषा

                 जिसे इस प्रकार प्रस्तुत किया जाएगा:

                 किसी पद की परिभाषा, पद, पद, ऐसी परिभाषा, जो पूर्ववर्ती दोनों पदों पर लागू हो, एक शब्द, जिसकी निम्नलिखित दोनों परिभाषाएँ हो सकती हैं, एक शब्द की एक परिभाषा, एक शब्द की दूसरी परिभाषा।

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

                 सूची प्रकार का चयन करना

                 किसी विशेष सूची प्रकार का उपयोग करने का निर्णय लेते समय, आप आमतौर पर दो सरल प्रश्न पूछकर निर्णय ले सकते हैं:

                 1. क्या शब्द परिभाषित हैं (या अन्य नाम/मूल्य जोड़े संयोजित हैं)?
                    • यदि हाँ, तो परिभाषाओं की सूची का उपयोग करें।
                    • यदि नहीं, तो परिभाषाओं की सूची का उपयोग न करें - अगले प्रश्न पर जाएँ।
                 2. क्या सूची तत्वों का क्रम मायने रखता है?
                    • यदि हाँ, तो क्रमबद्ध सूची का उपयोग करें।
                    • यदि नहीं, तो उपयोग करें बेक़ायदासूची।

                 HTML सूचियों और पाठ के बीच अंतर

                 किसी को आश्चर्य हो सकता है कि HTML सूची और गोलियों या हस्तलिखित संख्याओं वाले कुछ पाठ के बीच क्या अंतर है। HTML सूची का उपयोग करने के कई फायदे हैं:

                 • यदि आपको किसी ऑर्डर की गई सूची में सूची आइटमों का क्रम बदलने की आवश्यकता है, तो आप बस उन्हें HTML कोड में इधर-उधर कर दें। यदि संख्याएं हाथ से लिखी गई हैं, तो आपको हर चीज से गुजरना होगा और क्रम को सही करने के लिए प्रत्येक तत्व की संख्या को बदलना होगा - जो कम से कम कहने के लिए काफी उबाऊ है!
                 • HTML सूची का उपयोग करने से आप सूची को उचित ढंग से स्टाइल कर सकते हैं। यदि आप केवल बड़े पाठ का उपयोग करते हैं, तो अलग-अलग तत्वों को किसी भी अधिक या कम उपयोगी तरीके से स्टाइल करना अधिक कठिन होगा।
                 • HTML सूची का उपयोग करने से सामग्री को केवल "सूची-जैसी" दृश्य प्रभाव के बजाय एक उचित अर्थ संरचना मिलती है। इसके महत्वपूर्ण लाभ हैं क्योंकि यह स्क्रीन रीडर्स को दृष्टिबाधित उपयोगकर्ताओं को यह बताने की अनुमति देता है कि वे केवल पाठ और संख्याओं के भ्रमित मिश्रण को पढ़ने के बजाय एक सूची पढ़ रहे हैं।

                 दूसरी ओर: पाठ और सूचियाँ एक ही चीज़ नहीं हैं। सूची के बजाय पाठ का उपयोग करने के लिए अधिक काम की आवश्यकता होती है और दस्तावेज़ पाठकों के लिए समस्याएँ पैदा हो सकती हैं। इसलिए, यदि किसी दस्तावेज़ को एक सूची की आवश्यकता है, तो एक उचित HTML सूची का उपयोग किया जाना चाहिए।

                 नेस्टेड सूचियाँ

                 किसी सूची के एक तत्व में दूसरी पूरी सूची शामिल हो सकती है - इसे "नेस्टेड" सूची कहा जाता है। यह विषय-सूची जैसी चीज़ों के लिए उपयोगी हो सकता है, जैसे कि व्याख्यान की शुरुआत में:

                 1. अध्याय एक 1. खंड एक 2. खंड दो 3. खंड तीन 2. अध्याय दो 3. अध्याय तीन

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

                 1. अध्याय एक
                    1. खण्ड एक
                    2. धारा दो
                    3. धारा तीन
                 2. अध्याय दो
                 3. अध्याय तीन

                 ध्यान दें कि नेस्टेड सूची तत्व के बाद शुरू होती है

               • और तत्व की सूची वाला पाठ ("अध्याय एक"); और तत्व से पहले समाप्त होता है
               , जिसमें तत्व की एक सूची शामिल है। नेस्टेड सूचियाँ अक्सर किसी वेब साइट के नेविगेशन मेनू का आधार बनती हैं क्योंकि वे किसी वेब साइट की संरचना को परिभाषित करने का एक सुविधाजनक तरीका हैं।

               सिद्धांत रूप में, आप कितनी भी सूचियाँ नेस्ट कर सकते हैं, हालाँकि व्यवहार में यह भ्रामक हो सकता है यदि सूचियाँ बहुत गहराई में नेस्ट की गई हों। बहुत बड़ी सूचियों के लिए, सामग्री को शीर्षकों के साथ कई सूचियों में या यहां तक ​​कि अलग-अलग पृष्ठों में विभाजित करना बेहतर हो सकता है।

               चरण दर चरण उदाहरण

               आइए इन सबको एक साथ लाने के लिए चरण-दर-चरण उदाहरण देखें। निम्नलिखित परिदृश्य पर विचार करें:

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

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

               मुख्य पृष्ठ लेआउट

               डॉकटाइप, तत्वों सहित एक सुव्यवस्थित HTML पृष्ठ बनाएं एचटीएमएल, सिर और शरीर, और इसे चरण-दर-चरण-main.html के रूप में सहेजें। एक मुख्य शीर्षक (h1) "HTML कुकिंग स्कूल", और एक उपशीर्षक (h2) "रेसिपी" जोड़ें:

               HTML कुकिंग स्कूल

               व्यंजनों

               व्यंजनों

               • केक
               • बिस्कुट
               • क्विकब्रेड

               ली तत्वों के लिए इंडेंटेशन से कोड को पढ़ना आसान हो जाता है, लेकिन इसकी आवश्यकता नहीं है।

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

               व्यंजनों

               • केक
                 • सादा स्पंज
                 • चॉकलेट केक
                 • सेब चाय केक
               • बिस्कुट
                 • Anzac बिस्कुट
                 • जाम गिरता है
                 • लम्हें पिघलने
               • ब्रेड/क्विकब्रेड
                 • स्पंज
                 • स्कोन