HTML ब्लॉक-लेवल और इनलाइन तत्व
यह लेख HTML ब्लॉक-लेवल और इनलाइन तत्वों की व्याख्या करता है।
यह ब्लॉक-स्तरीय तत्वों और इनलाइन तत्वों के बीच के अंतर को समझाता है, साथ ही मुख्य ब्लॉक-स्तरीय तत्वों और इनलाइन तत्वों को भी।
YouTube Video
ब्लॉक-स्तरीय तत्व और इनलाइन तत्व
HTML में दो प्रमुख प्रकार के तत्व होते हैं जो यह निर्धारित करते हैं कि उन्हें स्क्रीन पर कैसे प्रदर्शित किया जाएगा: 'ब्लॉक-स्तरीय तत्व' और 'इनलाइन तत्व'। ये तत्व पेज लेआउट में महत्वपूर्ण भूमिका निभाते हैं और सीधे इस बात को प्रभावित करते हैं कि उन्हें कैसे स्थित किया जाता है। यहां, हम प्रत्येक तत्व की विशेषताओं और उपयोग को विस्तार से समझाएंगे।
ब्लॉक-स्तरीय तत्व क्या है?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Block-Level Elements Example</title>
7</head>
8<body>
9 <div>
10 <h1>This is a Block-Level Heading</h1>
11 <p>
12 This is a paragraph.
13 Block-level elements start on a new line and
14 take up the full width of their container.
15 </p>
16 </div>
17 <section>
18 <h2>Another Block-Level Section</h2>
19 <p>This is another paragraph inside a section element.</p>
20 </section>
21 <section>
22 <h2>Unordered List And Ordered List</h2>
23 <ul>
24 <li>List Item A</li>
25 <li>List Item B</li>
26 <li>List Item C</li>
27 </ul>
28 <ol>
29 <li>List Item 1</li>
30 <li>List Item 2</li>
31 <li>List Item 3</li>
32 </ol>
33 </section>
34</body>
35</html>ब्लॉक-स्तरीय तत्व आमतौर पर पेज की पूरी चौड़ाई घेरते हैं और अन्य तत्वों से अलग एक पंक्ति पर दिखाई देते हैं। ये तत्व अपने अंदर अन्य ब्लॉक-स्तरीय या इनलाइन तत्व रख सकते हैं और एक डॉक्यूमेंट की बड़ी संरचना को परिभाषित करते हैं।
विशेषताएँ:
- ये तत्व एक नई पंक्ति पर शुरू होते हैं और जितनी चौड़ाई संभव हो उतनी फैलते हैं (आमतौर पर पैरेंट तत्व की पूरी चौड़ाई)।
- ये अन्य ब्लॉक तत्वों से ऊर्ध्वाधर रूप से अलग होते हैं, और उनके बीच में मार्जिन लागू होता है।
- वे अपने भीतर अन्य ब्लॉक या इनलाइन तत्वों को शामिल कर सकते हैं।
यहां, निम्नलिखित ब्लॉक-स्तरीय तत्वों का उपयोग किया गया है:।
<div>टैग का उपयोग आमतौर पर लेआउट बनाने के लिए किया जाता है।<p>टैग का उपयोग एक अनुच्छेद को परिभाषित करने के लिए किया जाता है।<h1>से<h6>तक के तत्व शीर्षकों को परिभाषित करने के लिए उपयोग किए जाते हैं।<h1>सबसे बड़ा हेडिंग है, और<h6>सबसे छोटा।<ul>टैग एक अव्यवस्थित सूची बनाता है।<ol>टैग एक व्यवस्थित सूची बनाता है।<section>टैग एक डॉक्यूमेंट के भीतर एक सेक्शन को परिभाषित करता है।
इनलाइन तत्व क्या है?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Inline Elements Example</title>
7</head>
8<body>
9 <p>
10 This is a paragraph with
11 <a href="#">an inline link</a> and
12 <strong>some bold text</strong>.
13 </p>
14 <p>
15 You can also include <em>italicized text</em>,
16 an <img src="images/image.jpg" alt="Sample image" width="100">,
17 and a <span style="color: red;">styled span element</span>
18 within inline elements.
19 </p>
20</body>
21</html>इनलाइन तत्व अन्य तत्वों के साथ एक ही लाइन पर रखे जाते हैं और आमतौर पर केवल उनकी सामग्री की चौड़ाई तक ही सीमित रहते हैं। इन तत्वों को पाठ के हिस्से के रूप में माना जाता है और ब्लॉक स्तर के तत्वों के विपरीत, ये पूरी पंक्ति को नहीं घेरते।
विशेषताएँ:
- तत्व समान पंक्ति पर दिखाई देते हैं और अन्य इनलाइन तत्वों के साथ बगल में स्थित होते हैं।
- चौड़ाई तत्व की सामग्री (पाठ या चित्र) द्वारा निर्धारित की जाती है।
- इन्हें ब्लॉक-स्तरीय तत्वों के भीतर शामिल किया जा सकता है, लेकिन इसका उल्टा संभव नहीं है।
यहां, निम्नलिखित इनलाइन तत्वों का उपयोग किया गया है:।
<span>टैग का उपयोग पाठ के एक भाग को विशेष शैली के साथ जोर देने के लिए किया जाता है।<a>टैग एक हाइपरलिंक को परिभाषित करता है।<img>टैग एक तत्व है जिसका उपयोग छवियों को एम्बेड करने के लिए किया जाता है।<strong>महत्वपूर्ण पाठ को उजागर करता है (आमतौर पर बोल्ड में दर्शाया जाता है)।<em>जोर दिए गए पाठ को इंगित करता है (आमतौर पर इटैलिक में दर्शाया जाता है)।
ब्लॉक-स्तरीय तत्वों और इनलाइन तत्वों के बीच अंतर।
- प्रदर्शन विधि: ब्लॉक-स्तरीय तत्व नई पंक्ति पर प्रदर्शित होते हैं और पूरे पेज की चौड़ाई घेरते हैं, जबकि इनलाइन तत्व अन्य तत्वों के साथ एक ही पंक्ति पर प्रदर्शित होते हैं और उनकी चौड़ाई उनके सामग्री द्वारा निर्धारित होती है।
- आंतरिक तत्वों का संचालन: ब्लॉक-स्तरीय तत्व अन्य ब्लॉक-स्तरीय तत्वों और इनलाइन तत्वों को शामिल कर सकते हैं, लेकिन इनलाइन तत्व ब्लॉक-स्तरीय तत्वों को शामिल नहीं कर सकते।
- लेआउट भूमिका: ब्लॉक-स्तरीय तत्वों का उपयोग मुख्य रूप से पेज की लेआउट संरचना बनाने के लिए किया जाता है, जबकि इनलाइन तत्व छोटे तत्वों को जैसे पाठ और लिंक को परिभाषित करते हैं।
अंतर करने के लिए प्रमुख बिंदु।
लेआउट बनाने के लिए: <div>, <section>, <article> जैसे ब्लॉक-स्तरीय तत्वों का उपयोग करके बड़े सेक्शन और सामग्री ब्लॉक परिभाषित करें।
पाठ सजावट और लिंक: <span>, <a>, <strong>, <em> जैसे इनलाइन तत्वों का उपयोग करके पाठ के भागों को सजाएं या लिंक जोड़ें।
ब्लॉक-स्तरीय और इनलाइन तत्वों का मिश्रण
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Mixed Block-Level and Inline Elements</title>
7</head>
8<body>
9 <header>
10 <h1>Main Heading with Mixed Content</h1>
11 <p>
12 This is a paragraph that contains an
13 <a href="#">inline link</a> and
14 <strong>bold text</strong>. You can also have
15 <em>italicized words</em> here.
16 </p>
17 </header>
18 <main>
19 <section>
20 <h2>Subheading with Additional Inline Elements</h2>
21 <p>
22 Here is a section that includes inline elements such as
23 <span style="color: blue;">colored text</span> and an
24 <img src="images/image.jpg" alt="Example image" width="50">.
25 This text demonstrates how inline elements work within block-level elements.
26 </p>
27 </section>
28 <section>
29 <h2>Lists with Mixed Content</h2>
30 <p>
31 This paragraph precedes a list and has
32 <a href="#">a link</a> and <strong>bold</strong> text.
33 </p>
34 <ul>
35 <li>List item with <em>italic</em> text.</li>
36 <li>List item containing <span style="color: green;">styled span</span>.</li>
37 <li>List item with <img src="images/example.jpg" alt="Icon" width="20"> icon.</li>
38 </ul>
39 </section>
40 </main>
41</body>
42</html>- ब्लॉक-स्तरीय तत्व जैसे
<main>,<header>, और<section>का उपयोग किया जाता है, और इन्हें आमतौर पर एक नई पंक्ति में प्रदर्शित किया जाता है, जो अपने पैरेंट तत्व की पूरी चौड़ाई को घेरते हैं। - इनलाइन तत्व जैसे
<a>,<strong>,<span>, और<img>का उपयोग किया जाता है, और ये इनलाइन रूप से ब्लॉक-स्तरीय तत्वों के भीतर पूर्ण चौड़ाई को घेरे बिना पंक्ति के भीतर रखे जाते हैं।
ब्लॉक-स्तरीय तत्वों के भीतर इनलाइन तत्वों को शामिल करना एक सामान्य पैटर्न है। उदाहरण के लिए, एक अनुच्छेद (<p>) के भीतर लिंक (<a>) या जोर (<strong>) शामिल करना सामान्य है। हालांकि, क्योंकि आप इनलाइन तत्वों के भीतर ब्लॉक-स्तरीय तत्व शामिल नहीं कर सकते हैं, इसलिए उनका उचित उपयोग करना महत्वपूर्ण है।
सारांश
ब्लॉक-स्तरीय तत्व और इनलाइन तत्व HTML तत्वों के दो बुनियादी प्रकार हैं, जिनमें से प्रत्येक की अपनी भूमिका है। ब्लॉक-स्तरीय तत्व पृष्ठ लेआउट की नींव बनाते हैं, जबकि इनलाइन तत्व उनके भीतर की सामग्री को सजाने और प्रबंधित करने के लिए उपयोग किए जाते हैं। इन दो प्रकार के तत्वों को समझना और उनका सही तरीके से उपयोग करना प्रभावी HTML कोडिंग को सक्षम बनाता है।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।