HTML में ब्लॉक-लेवल और इनलाइन ब्लॉक एलिमेंट्स के बीच अंतर के बारे में जानें।
HTML में, सभी एलिमेंट्स का एक डिफ़ॉल्ट डिस्प्ले वैल्यू होता है जो यूजर एजेंट स्टाइलशीट (UAS) द्वारा इनहेरिट किया जाता है जो सभी ब्राउज़र्स में बिल्ट-इन होता है।
दो डिस्प्ले वैल्यू विकल्प हैं, ब्लॉक और इनलाइन:
- CSS में ब्लॉक:
display:block; - CSS में इनलाइन:
display: inline-block;
किसी भी HTML एलिमेंट का व्यवहार या स्टाइल ब्राउज़र की यूजर एजेंट स्टाइलशीट (UAS) से आता है — जिसे आप आसानी से ओवरराइड कर सकते हैं। इसलिए किसी भी ब्लॉक-लेवल एलिमेंट को एक साधारण घोषणा के साथ इनलाइन एलिमेंट में बदला जा सकता है: display: inline-block; — और इसके विपरीत।
ब्लॉक-लेवल एलिमेंट क्या है?
HTML में, एक ब्लॉक-लेवल एलिमेंट एक ऐसा एलिमेंट है जो हमेशा एक नई लाइन पर शुरू होता है (लाइन ब्रेक की तरह) और अपने कंटेनर (पैरेंट एलिमेंट) की पूरी चौड़ाई ले लेता है।
इसलिए यदि मैं इस पैराग्राफ के ठीक नीचे एक <div> एलिमेंट जोड़ता हूँ, तो यह अपने पैरेंट एलिमेंट कंटेनर की पूरी चौड़ाई को बाएं से दाएं किनारे तक ले लेता है।
कोड उदाहरण:
<div>मैं एक ब्लॉक-लेवल एलिमेंट हूँ।</div>परिणाम:
ठीक है, यह देखना मुश्किल है कि यह पूरी चौड़ाई लेता है। इसे देखने में आसान बनाने के लिए इसमें बॉर्डर जोड़ते हैं:
<div style="border:1px solid #dd4c4f">मैं एक ब्लॉक-लेवल एलिमेंट हूँ।</div>परिणाम:
अब आप देख सकते हैं कि <div> एलिमेंट अपने कंटेनर की पूरी चौड़ाई लेता है, जो इस वेबसाइट पर जिस पर आप हैं, एक <article> एलिमेंट है।
जैसा कि मैंने उल्लेख किया, ब्लॉक-लेवल एलिमेंट्स एक नई लाइन शुरू करते हैं, और यहाँ यह कोड लेवल पर कैसा दिखता है और यूजर के दृष्टिकोण से ब्राउज़र में कैसे रेंडर होता है:
<div style="border:1px solid #dd4c4f">मैं एक ब्लॉक-लेवल एलिमेंट हूँ।</div> <div style="border:1px solid #dd4c4f">मैं एक और ब्लॉक-लेवल एलिमेंट हूँ।</div>यह कैसा दिखता है:
यदि ऊपर के दो <div> एलिमेंट्स इनलाइन होते तो वे एक ही लाइन पर एक दूसरे के बगल में बैठते (जैसा कि आप अगले सेक्शन में देखेंगे)। लेकिन क्योंकि वे ब्लॉक-लेवल एलिमेंट्स हैं, वे लेआउट में अपनी लाइन पर बैठते हैं और प्रत्येक पैरेंट कंटेनर की पूरी चौड़ाई लेते हैं।
सभी HTML ब्लॉक-लेवल एलिमेंट्स
HTML में ब्लॉक-लेवल एलिमेंट्स की पूरी सूची:
<address>- संपर्क जानकारी।
<article>- आर्टिकल कंटेंट।
<aside>- असाइड कंटेंट।
<blockquote>- लंबा ("ब्लॉक") उद्धरण।
<details>- डिस्क्लोजर विजेट।
<dialog>- डायलॉग बॉक्स।
<dd>- विवरण सूची में एक टर्म का वर्णन करता है।
<div>- डॉक्यूमेंट डिवीजन।
<dl>- विवरण सूची।
<dt>- विवरण सूची टर्म।
<fieldset>- फील्ड सेट लेबल।
<figcaption>- फिगर कैप्शन।
<figure>- मीडिया कंटेंट को कैप्शन (
<figcaption>) के साथ ग्रुप करता है। <footer>- सेक्शन या पेज फूटर।
<form>- इनपुट फॉर्म।
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>- हेडिंग लेवल 1-6।
<header>- सेक्शन या पेज हेडर।
<hgroup>- हेडर जानकारी को ग्रुप करता है।
<hr>- क्षैतिज नियम (विभाजन रेखा)।
<li>- सूची आइटम।
<main>- मुख्य कंटेंट कंटेनर।
<nav>- नेविगेशन लिंक्स शामिल हैं।
<ol>- क्रमबद्ध सूची।
<p>- पैराग्राफ।
<pre>- प्रीफॉर्मेटेड टेक्स्ट।
<section>- वेब पेज का सेक्शन।
<table>- टेबल।
<ul>- अक्रमबद्ध सूची।
इनलाइन एलिमेंट्स क्या हैं?
HTML में, इनलाइन एलिमेंट्स वे एलिमेंट्स हैं जो नहीं एक नई लाइन पर शुरू होते हैं, और केवल उतनी जगह लेते हैं जितनी उन्हें आवश्यकता होती है (उनकी कंटेंट चौड़ाई, जैसे अंदर टेक्स्ट की लंबाई)।
कोड उदाहरण:
<div style="display:inline-block;border:1px solid #dd4c4f;"> मैं एक इनलाइन-ब्लॉक एलिमेंट हूँ </div>यह कैसा दिखता है:
इनलाइन ब्लॉक एलिमेंट्स एक नई लाइन (लाइन ब्रेक) पर शुरू नहीं होते।
इसलिए यदि आपके पास कोड लेवल पर एक दूसरे के बगल में दो इनलाइन ब्लॉक एलिमेंट्स हैं:
<div style="display:inline-block;border:1px solid #dd4c4f"> मैं एक इनलाइन ब्लॉक एलिमेंट हूँ। </div> <div style="display:inline-block;border:1px solid #dd4c4f"> मैं एक और इनलाइन ब्लॉक एलिमेंट हूँ। </div>तो वे ब्राउज़र में इस तरह रेंडर होते हैं:
और बस यह स्पष्ट करने के लिए कि इनलाइन ब्लॉक और ब्लॉक एक दूसरे से कैसे भिन्न हैं, आइए उनकी "साइड बाय साइड" तुलना करें:
सभी HTML इनलाइन ब्लॉक एलिमेंट्स
HTML में सभी इनलाइन एलिमेंट्स की सूची:
<a><abbr><acronym><audio>(केवल अगर इसमें विज़िबल कंट्रोल्स हों)<b><bdi><bdo><big><br><button><canvas><cite><code><data><datalist><del><dfn><em><embed><iframe><img><input><ins><kbd><label><map><mark><meter><noscript><object><output><picture><progress><q><ruby><s><samp><script><select><slot><small><span><strong><sub><sup><svg><template><textarea><time><u><tt><var><video><wbr>
ब्लॉक और इनलाइन के बीच एक और महत्वपूर्ण अंतर
आपने सीखा कि ब्लॉक और इनलाइन एलिमेंट्स इसमें भिन्न हैं:
- पूरी चौड़ाई (ब्लॉक) बनाम कंटेंट चौड़ाई (इनलाइन)
- नई लाइन (ब्लॉक) बनाम उसी लाइन (इनलाइन)।
लेकिन उनके उपयोग में एक और अंतर है:
- इनलाइन ब्लॉक एलिमेंट्स नहीं ब्लॉक-लेवल एलिमेंट्स को समाहित कर सकते हैं।
- ब्लॉक एलिमेंट्स कर सकते हैं इनलाइन ब्लॉक एलिमेंट्स को समाहित।
तो यह स्वीकार्य HTML नहीं है:
<span><p>इनलाइन ब्लॉक एलिमेंट के अंदर ब्लॉक एलिमेंट।</p></span>लेकिन यह स्वीकार्य HTML है:
<p><span>ब्लॉक एलिमेंट के अंदर इनलाइन ब्लॉक एलिमेंट।</span></p>इस संरचनात्मक कंटेंट मॉडल अंतर के पीछे विचार यह है कि ब्लॉक एलिमेंट्स का उपयोग इनलाइन एलिमेंट्स की तुलना में बड़ी संरचनाओं का वर्णन करने के लिए किया जाना चाहिए।
याद रखें, किसी भी HTML एलिमेंट का display वैल्यू आपकी CSS स्टाइलशीट में ओवरराइड किया जा सकता है, लेकिन आज आपने जो देखा है वह यह है कि ब्लॉक-लेवल एलिमेंट्स और इनलाइन-ब्लॉक एलिमेंट्स डिफ़ॉल्ट रूप से कैसे काम करते हैं यदि आप उन्हें स्वयं स्टाइल नहीं करते हैं।
