एचटीएमएल तत्व: ब्लॉक-स्तर बनाम इनलाइन तत्व

HTML में तीसरे प्रकार का तत्व भी है: वे जो बिल्कुल प्रदर्शित नहीं होते हैं। ये तत्व पृष्ठ के बारे में जानकारी प्रदान करते हैं लेकिन वेब ब्राउज़र में प्रस्तुत किए जाने पर प्रदर्शित नहीं होते हैं।

उदाहरण के लिए:

• <शैली> शैलियों और स्टाइलशीट को परिभाषित करता है।
• <मेटा> मेटा डेटा को परिभाषित करता है।
• HTML दस्तावेज़ तत्व है जो इन तत्वों को रखता है।

इनलाइन और ब्लॉक तत्व प्रकार स्विचिंग

आप इन सीएसएस गुणों में से किसी एक का उपयोग करके, किसी तत्व के प्रकार को इनलाइन से अवरुद्ध करने के लिए, या इसके विपरीत, बदल सकते हैं:

• प्रदर्शन क्षेत्र;
• display: inline;
• कुछ भी डिस्प्ले मत करो;

सीएसएस डिस्प्ले प्रॉपर्टी आपको ब्लॉक में इनलाइन प्रॉपर्टी को बदलने या इनलाइन करने के लिए ब्लॉक को बदलने की सुविधा देती है।

प्रदर्शन संपत्ति कब बदलें

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

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

सामान्य इनलाइन तत्व स्वरूपण त्रुटियां

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

इनलाइन तत्व कई गुणों को अनदेखा करते हैं:

• चौड़ाई और ऊंचाई
• अधिकतम चौड़ाई और अधिकतम ऊंचाई
• न्यूनतम चौड़ाई और न्यूनतम ऊंचाई

नोट: माइक्रोसॉफ्ट इंटरनेट एक्सप्लोरर (जिसे अब माइक्रोसॉफ्ट एज कहा जाता है) ने अतीत में इन गुणों में से कुछ को इनलाइन बॉक्स में भी गलत तरीके से लागू किया है। यह मानकों का अनुपालन नहीं है, और यह माइक्रोसॉफ्ट के वेब ब्राउज़र के नए संस्करणों के मामले में नहीं हो सकता है।

यदि आपको किसी तत्व को उठाने वाली चौड़ाई या ऊंचाई को परिभाषित करने की आवश्यकता है, तो आप इसे अपने इनलाइन टेक्स्ट वाले ब्लॉक-स्तरीय तत्व पर लागू करना चाहेंगे।

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