वेब डिज़ाइन में CSS के साथ Span और Div HTML तत्वों का उपयोग करना

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

Div Element का उपयोग करना

Divs अपने वेब पेज पर तार्किक विभाजन को परिभाषित करें। ए डिव—विभाजन के लिए संक्षिप्त—मूल रूप से एक बॉक्स है जिसमें आप दूसरे को रख सकते हैं HTML तत्व जो एक साथ हैं। एक विभाजन में कई अन्य तत्व हो सकते हैं, जैसे पैराग्राफ, शीर्षक, सूचियाँ, लिंक, चित्र आदि। अतिरिक्त संरचना और संगठन प्रदान करने के लिए इसके अंदर अन्य विभाग भी हो सकते हैं।

का उपयोग करने के लिए डिव तत्व, एक खुला रखें अपने पृष्ठ के उस क्षेत्र से पहले टैग करें जिसे आप एक अलग विभाजन के रूप में चाहते हैं, और एक समापन 

 इसके बाद टैग करें:

div. की सामग्री

यदि आप इस क्षेत्र को सीएसएस के साथ स्टाइल कर रहे हैं, तो आप एक जोड़ सकते हैं ईद उद्घाटन div टैग के लिए चयनकर्ता:


या, आप एक वर्ग चयनकर्ता जोड़ सकते हैं:


फिर आप इन तत्वों के साथ CSS या JavaScript में काम कर सकते हैं।

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

instagram viewer
डिव एक आईडी और एक वर्ग चयनकर्ता दोनों।

डिव या सेक्शन?

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

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

अंत में, दोनों विभाग तथा धारा समान व्यवहार करें, और आप उनमें से किसी एक को विशेषताएँ दे सकते हैं और उन्हें CSS के साथ स्टाइल कर सकते हैं। दोनों ब्लॉक-स्तरीय तत्व हैं।

स्पैन का उपयोग करना

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

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


हाइलाइट किया गया टेक्स्ट  और गैर-हाइलाइट किया गया पाठ।



आप जोड़ सकते हैं।

वर्ग = "हाइलाइट"

या के समान अवधि CSS के साथ टेक्स्ट को स्टाइल करने के लिए एलिमेंट।

स्पैन तत्व में कोई आवश्यक विशेषता नहीं है, लेकिन जो तीन सबसे उपयोगी हैं, वे समान हैं डिव तत्व:

  • अंदाज
  • कक्षा
  • ईद

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

उदाहरण के लिए, यदि आप an. का दूसरा शब्द चाहते हैं h3 लाल होने के लिए, आप उस शब्द को a. से घेर सकते हैं अवधि वह तत्व जो उस शब्द को लाल पाठ के रूप में शैलीबद्ध करेगा। शब्द अभी भी का हिस्सा बना हुआ है h3 तत्व, लेकिन लाल रंग में प्रदर्शित होगा।