ब्लॉक-स्तर और इनलाइन तत्वों के बीच अंतर

एचटीएमएल विभिन्न तत्वों से बना है जो वेब पेजों के निर्माण खंड के रूप में कार्य करता है। इनमें से प्रत्येक तत्व दो श्रेणियों में से एक में आता है: ब्लॉक-स्तरीय तत्व या एक इनलाइन तत्व। इन दो प्रकार के तत्वों के बीच अंतर को समझना वेब पेज बनाने में एक महत्वपूर्ण कदम है।

ब्लॉक स्तर के तत्व

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

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

इनलाइन तत्व

एक ब्लॉक-स्तरीय तत्व के विपरीत, एक इनलाइन तत्व:

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

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

instagram viewer

ब्रेक टैग।

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

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

मेटा डेटा को परिभाषित करता है।
HTML दस्तावेज़ तत्व है जो इन तत्वों को रखता है।

स्विचिंग इनलाइन और ब्लॉक एलिमेंट प्रकार

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

प्रदर्शन क्षेत्र;

प्रदर्शन: इनलाइन;

कुछ भी डिस्प्ले मत करो;

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

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

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

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

सामान्य इनलाइन तत्व स्वरूपण गलतियाँ

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

इनलाइन तत्व कई गुणों की उपेक्षा करते हैं:

```
चौड़ाई
```
तथा
```
ऊंचाई
```

अधिकतम चौड़ाई

तथा

अधिकतम ऊँचाई

न्यूनतम-चौड़ाई

तथा

मिनट-ऊंचाई

Microsoft Internet Explorer (Microsoft Edge द्वारा प्रतिस्थापित) ने अतीत में इन गुणों में से कुछ को इनलाइन बॉक्स में भी गलत तरीके से लागू किया है। यह मानकों के अनुरूप नहीं है। Microsoft के वेब ब्राउज़र के नए संस्करणों के साथ ऐसा नहीं हो सकता है।

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