Block-level vs. inline elements In Hindi
एचटीएमएल5 वेब पेज डेवलपमेंट में सिमेंटिक टैग या एलिमेंट को मुख्य रूप से दो टाइप टैग एलिमेंट में डिवाइड किया गया है, जिसे ब्लॉक-लेवल एलिमेंट या इनलाइन टैग एलिमेंट के रूप में डिफाइन किया गया है। जहा एचटीएमएल5 वेब पेज वेबसाइट में ब्लॉक लेवल और इनलाइन टैग को डिजायर वेब पेज स्ट्रक्चर और लेआउट को डिज़ाइन और डेवलप करने में उपयोग करते है।
So, let’s know block-level and inline tags in HTML5.
HTML5 Block-Level Elements.
HTML5 Block Level Characteristics.
- Display Behavior – एचटीएमएल5 वेब पेज में ब्लॉक-लेवल टैग को वेब पेज में नए ब्लॉक एलिमेंट को क्रिएट करने में उपयोग करते है, यहाँ वेब पेज में ब्लॉक लेवल टैग नई लाइन से स्टार्ट किये जाते हैं, जहा ब्लॉक लेवल एलिमेंट टैग संबधित टैग के लिए एक ब्लॉक या कंटेनर को क्रिएट करता है।
- Formatting – एचटीएमएल5 में ब्लॉक लेवल एलिमेंट सेल्फ-फॉर्मटेड होते है, जहा ये टेक्स्ट एलिमेंट को सेल्फ जस्टिफाई करते है, और उपयोग होने वाले टैग के आधार पर वेब पेज टेक्स्ट इन्फो के बिच मार्जिन और ऑटो स्पेस क्रिएट करते हैं, जिसे वेब पेज में डिस्प्ले के समय अलग से डिफाइन या डिस्प्ले किया जाता है।
- Protection – एचटीएमएल5 में क्रिएटेड वेब पेज में ब्लॉक-लेवल एलिमेंट में आप जरूरत के अनुसार कई ब्लॉक और इनलाइन टैग या एलिमेंट को एडजस्ट कर सकते हैं।
Popular block-level elements in HTML5.
- <div> tag – एचटीएमएल5 वेब पेज में टेक्स्ट कंटेंट इनफार्मेशन को ग्रुप कर पैराग्राफ ब्लॉक कंटेनर को क्रिएट करने और सीएसएस स्टाइल्स ऐट्रिब्यूट्स को अप्लाई किया जाता है।
- <header> tag – एचटीएमएल5 वेब पेज के टॉप हैडर पोरशन में हैडर टेक्स्ट, मेनू, नेविगेशनल लिंक्स, टेक्स्ट और इनफार्मेशन को डिस्प्ले किया जाता है।
- <footer> tag – एचटीएमएल5 वेब पेज में पर्टिकुलर एरिया वेबसाइट बॉटम में वेबसाइट राइट्स, लीगल इन्फो, और कॉपीराइट सिंबल को प्रीव्यू किया जाता है।
- <section> tag – एचटीएमएल5 वेब पेज में सेक्शन ब्लॉक को सेक्शन टाइटल इनफार्मेशन के साथ प्रीव्यू किया जाता है।
- <article> tag – एचटीएमएल5 वेब पेज में टेक्स्ट इनफार्मेशन के ब्लॉक को एक सेल्फ-कॉन्टैन इनफार्मेशन होल्डर के रूप में दर्शाता है।
- <p> tag – एचटीएमएल5 वेब पेज में सिंगल और मल्टीलाइन पैराग्राफ टेक्स्ट ब्लॉक पैराग्राफ को क्रिएट कर सकते है।
- <h1> से <h6> tag – एचटीएमएल5 वेब पेज में टेक्स्ट पैराग्राफ हैडिंग को हैडिंग 1 से हैडिंग 6 तक टेक्स्ट हैडिंग को सबसे बड़े फॉण्ट साइज से सबसे छोटे फॉण्ट साइज टेक्स्ट फॉर्मेट आर्डर में प्रीव्यू करता है।
- <ul>, <ol>, <li> tag – एचटीएमएल5 वेब पेज में ऑर्डर्ड और अनऑर्डर्ड लिस्ट आइटम को नम्बरड और बुलेटेड लिस्ट आइटम को क्रिएट किया जाता है।
Block level tag examples in HTML5.
<!DOCTYPE html>
<html>
<body>
<div>
<h1>Div Tag</h1>
<p>Let Explore Div Container To Preview Some Text</p>
<ul>
<li>Html</li>
<li>Xhtml</li>
<li>Xml</li>
<li>Html5</li>
</ul>
</div>
</body>
</html>
याद रहे, एचटीएमएल5 वेब पेज में ब्लॉक-लेवल टैग जैसे (<h1>, <article> <p>, और <ul>) हमेशा नई लाइन से स्टार्ट होते है, ये टैग अपने आप वेब पेज में एडजस्ट या जस्टिफाई हो जाते है, जिससे वेब पेज टैग टेक्स्ट ऑटोमेटिकली नेक्स्ट लाइन पर मूव कर जाता है।
Inline tags or elements in HTML5.
HTML5 Inline tags attributes.
- Display behavior – एचटीएमएल5 वेब पेज में इनलाइन टैग किसी नई लाइन से स्टार्ट नहीं होते हैं, और इन्हे किसी अन्य इनलाइन लेवल टैग में क्रिएट किया जाता है, ये केवल उतनी ही जगह लेते है, जीतन इन्हे डिफाइन किया गया है।
- Formatting – इनलाइन टैग बिफोर और आफ्टर टैग स्पेस क्रिएट नहीं करते है।
- Containment – एचटीएमएल5 वेब पेज में इनलाइन टैग को ब्लॉक-लेवल एलिमेंट के साथ डिफाइन नहीं किया जाता हैं, जबकि आप इनमे अन्य इनलाइन एलिमेंट को उपयोग कर सकते हैं।
HTML5 Inline tags attributes.
- <span> tag – एचटीएमएल5 वेब पेज में टेक्स्ट या इनलाइन टेक्स्ट इनफार्मेशन के किसी पर्टिकुलर एरिया में स्टाइल अप्लाई करने के लिए एक डाटा कंटेनर है।
- <a> tag – एचटीएमएल5 वेब पेज में वेब पेज टेक्स्ट ऑब्जेक्ट में सिंगल या मल्टीप्ल हाइपरलिंक क्रिएट करते है।
- <b> tag – वेब पेज टेक्स्ट इनफार्मेशन को बोल्ड नेचर में प्रीव्यू किया जाता है।
- <i> tag – मौजूदा वेब पेज पर्टिकुलर टेक्स्ट इनफार्मेशन को इटैलिक थोड़ा वर्टीकल डाउन आर्डर में प्रीव्यू किया जाता है।
- <strong> tag – यह बोल्ड टैग की तरह प्रीव्यू करता है, जहा स्ट्रांग टेक्स्ट सामान्य टेक्स्ट से अलग प्रदर्शित किया जाता है।
- <em> tag – एम्फेसिस टैग इटैलिक टैग की तरह वेब पेज टेक्स्ट को इटैलिक आर्डर में प्रीव्यू करता है।
- <img> tag – एचटीएमएल5 वेब पेज में डिजायर इमेज, ग्राफ़िक, को इमेज टैग से वेब पेज में इन्सर्ट या एम्बेड किया जाता है।
Inline tags example in HTML5.
<p>This Text Is <b>bold</b> This Text Is <i>italic</i> You Can See Bold And Italic Text Effect Same Time. </p>
<a href=”https://vcanhelpsu.com”>Open Vcanhelps</a>
Block Level and Inline Element Difference in HTML5.
- Performance – एचटीएमएल5 में ब्लॉक-लेवल टैग हमेशा नई लाइन से स्टार्ट होते हैं, वही एचटीएमएल5 इनलाइन टैग न्यू लाइन से स्टार्ट नहीं होते हैं, और ये अपने आप वेब पेज में एडजस्ट हो जाते है।
- Containment – एचटीएमएल5 में उपयोग ब्लॉक-लेवल टैग एलिमेंट में अन्य ब्लॉक-लेवल और इनलाइन एलिमेंट डिक्लेअर या उपयोग हो सकते हैं, वही एचटीएमएल5 में इनलाइन टैग में केवल अन्य इनलाइन एलिमेंट ही हो सकते हैं।
- Usage – एचटीएमएल5 में ब्लॉक-लेवल एलिमेंट का उपयोग वेब पेज लेआउट सेक्शन को स्ट्रक्चर डिज़ाइन या मॉडिफाई करने में किया जाता है, वही इनलाइन एलिमेंट का उपयोग ब्लॉक-लेवल एलिमेंट के भीतर नई टैग या कंटेंट के एलिमेंट को फॉर्मेट या डेकोरेट करने में किया जाता है।
HTML5 Block-Level Tag Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>HTML5 Block-Level Element</title>
<style>
div {
font-family: times new roman;
font-size:1.2em;
background-color: yellow;
padding: 10px;
margin: 17px 0;
}
h1 {
color: red;
}
</style>
</head>
<body>
<div>
<h1>Let Tray Some Block Level Element</h1>
<p>This Is The Block Level Tag Eample, You Can See Some Block Level Tag Here</p>
</div>
<div>
<p>You Can Display Some Other Block Level Tag Here</p>
</div>
<div>
<p>This Is Another Block Level Div Tag</p>
</div>
</body>
</html>
HTML5 Inline Tag Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>HTML5 Inline Elements </title>
<style>
p{
color:blue;
font-size:1.3em;
font-family:bookman old style;
}
.highlight {
font-family:arial;
background-color: aqua;
}
</style>
</head>
<body>
<p>Let We Tary Some Inline Tag <strong>This Is Strong Webpage Text</strong>, <em>This Is Italic Webpage Text</em>, This Is A Hyperlink Text <a href=”https://vcanhelpsu.com”>Open Vcanhelpsu.com</a>. The word <span class=”highlight”>Text highlighted Preview</span> All Above Declare As Inline Tag. </p>
</body>
</html>
