अवधि और Div HTML तत्वों का उपयोग कैसे करें

अधिक शैली और लेआउट नियंत्रण के लिए सीएसएस के साथ अवधि और div का प्रयोग करें।

वेब डिज़ाइन और HTML / CSS के लिए नए लोग बहुत से वेबपृष्ठों के निर्माण के साथ और

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

तत्व का उपयोग करना

Div तत्व आपके वेब पेज पर लॉजिकल डिवीजन को परिभाषित करता है।

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

Div तत्व का उपयोग करने के लिए, अपने पृष्ठ के क्षेत्र से पहले एक खुला

टैग रखें जिसे आप एक अलग विभाजन के रूप में चाहते हैं, और उसके बाद एक करीबी टैग:

div की सामग्री

यदि आपके पृष्ठ के क्षेत्र में कुछ अतिरिक्त जानकारी की आवश्यकता है जिसका उपयोग आप बाद में सीएसएस के साथ शैली के लिए करेंगे, तो आप एक आईडी चयनकर्ता जोड़ सकते हैं (उदाहरण के लिए,

आईडी = "myDiv">), या एक वर्ग चयनकर्ता (उदाहरण के लिए, वर्ग = "bigDiv">)। इन दोनों विशेषताओं को तब सीएसएस का उपयोग करके चुना जा सकता है या जावास्क्रिप्ट का उपयोग करके संशोधित किया जा सकता है। आईडी के बजाए कक्षा चयनकर्ताओं का उपयोग करने की दिशा में मौजूदा सर्वोत्तम अभ्यास, कुछ विशिष्ट आईडी चयनकर्ताओं के कारण हैं। सच में, हालांकि, आप किसी एक का उपयोग कर सकते हैं और एक आईडी और एक वर्ग चयनकर्ता दोनों को भी एक विभाजन दे सकते हैं।

बनाम <अनुभाग> का उपयोग कब करें

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

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

आखिरकार, divs और खंड दोनों समान रूप से व्यवहार करते हैं और आप उनमें से किसी भी विशेषता मान को दे सकते हैं और उन्हें अपनी साइट की तलाश करने के लिए सीएसएस के साथ शैली दे सकते हैं। ये दोनों ब्लॉक स्तर तत्व हैं।

तत्व का उपयोग करना

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

यह अवधि और div तत्वों के बीच मुख्य अंतर है। जैसा ऊपर बताया गया है, div तत्व में एक अनुच्छेद ब्रेक शामिल है, जबकि अवधि तत्व केवल ब्राउज़र को टैग द्वारा संलग्न किए गए सीएसएस शैली नियमों को लागू करने के लिए कहता है:


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

सीएसएस के साथ पाठ को स्टाइल करने के लिए वर्ग = "हाइलाइट" या अन्य वर्ग को अवधि तत्व में जोड़ें (उदाहरण के लिए, वर्ग = "हाइलाइट">)।

अवधि तत्व में कोई आवश्यक गुण नहीं है, लेकिन तीन सबसे उपयोगी हैं जो div तत्व के समान हैं:

  • अंदाज
  • कक्षा
  • आईडी

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

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

यह मेरा बहुत बढ़िया शीर्षक है

जेरेमी गिरार्ड द्वारा 2/2/17 को संपादित किया गया