Other Elements
HTML में <div> और <span> का प्रयोग
Block और Inline Elements क्या है ?
अभी तक हमने
जितने Elements के बारे में जाना है, लगभग 90 प्रतिशत Coding में इन्हीं Elements
का प्रयोग होता है और हम हमारी ज्यादातर जरूरतों को इन Elements द्वारा पूरा कर
सकते हैं। इन सभी Elements को <body>
Element के बीच रखा जाता है, क्योंकि ये सभी Elements निम्न दो Categories में से
किसी एक में Place किए जाते हैं:
- Block-Level Elements
- Inline Elements
Block Level
Elements और Inline Elements में अंतर
इन HTML elements को block level elements या inline elements भी कहा जाता है। सामान्यत: Block Level
Elements Screen पर इस तरह से Appear होते हैं, जैसे उनसे पहले व बाद में Carriage
Return या Line Break का प्रयोग किया गया हो।
Block
level elements होते है : <h1>, <p>, <ul>, <table>
इसमें आने वाले elements हैं - <p>,
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>,
<ul>, <ol>, <dl>, <pre>, <hr /> और <blockquote>
आदि
ये सभी अपनी स्वयं की एक नई Line में Start होते
हैं और इनके बाद जो कुछ भी लिखा जाता है, वह भी एक नई Line में ही Display होता
है।
जबकि Inline
Elements किसी Sentence के बीच में Appear हो सकते हैं और इन्हें एक नई Line में
Display होने की जरूरत नहीं होती है।
Inline Elements होते है : <b>, <td>, <a>, <img>
इसमें आने वाले elements हैं - <b>, <i>,
<u>, <em>, <strong>, <sup>, <sub>, <big>,
<small>, <li> आदि
निम्न Code में हम
देख सकते हैं कि किस तरह से Block Level Elements एक नई Line में Appear होते हैं,
जबकि Inline Elements किसी भी Line में Appear हो सकते हैं।
|
<h1>Example of Block-Level Elements </h1>
<p>start in a new line and <strong>Inline
Elements </strong> flow with the same line.</p>
|
HTML
Document में एक Block Level Element के बीच अन्य Block Level Elements व Inline
Elements Place किए जा सकते हैं, लेकिन एक Inline Element को हमेंशा किसी ना किसी
Block Level Element के बीच ही Place किया जा सकता है।
<div> और <span>Elements
ये दोनों
Elements हमें एक से ज्यादा Elements का एक Group Create करने की सुविधा प्रदान
करते हैं, जो कि किसी Page को Section या Sub-Section में Divide करता है। ये स्वयं
Document के Appearance पर किसी तरह का कोई प्रभाव नहीं डालते हैं, लेकिन इनका
प्रयोग सामान्यतया CSS के साथ किया जाता है, जिससे हम Page के किसी एक हिस्से पर
किसी CSS Style को Apply करने की सुविधा प्राप्त कर लेते हैं।
<div> - पेज मे block-level
section के लिये प्रयोग किया जाता है।
<span> -
पेज मे inline section के लिये प्रयोग किया जाता है।
उदाहरण के लिए
मानलो कि हम हमारे Page से सम्बंधित Footnotes को Indicate करने वाले सभी Elements
को एक <div> Element में Place कर सकते हैं और बाद में जरूरत होने पर हम इस
<div> Element पर किसी CSS Style Rule को Apply कर सकते हैं। सामान्यतया
<div> Element का प्रयोग Block-Level Elements को Group करने के लिए किया
जाता है। जैसे:
|
<div class=”Paragraph”>
<h2>Paragraph </h2>
<p><b>1</b> this is Paragraph 1</p>
<p><b>2</b> this is Paragraph 2</p>
</div>
|
जिस तरह से
<div> Element केवल Block Level Elements को Group करता है, ठीक उसी तरह से
केवल Inline Elements को Group करने के लिए हम <span> Element का प्रयोग करते हैं।
यानी यदि हमारे Page पर Sentences अथवा Paragraphs का एक हिस्सा हो और हम उस हिस्से
को Group करना चाहते हों, तो हम <span> Element का प्रयोग कर सकते हैं। यहां
हमने एक <span> Element का प्रयोग किया है, जो ये Indicate करता है कि कौनसा
Content, Inventor को Refer करता है। इसमें एक Bold Element व कुछ Content है।
|
<div class="Paragraph">
<h2>Footnotes</h2>
<p>
<span class="blink">
<b>1</b> this is Paragraph 1 </span></p>
<p><b>2</b> this is Paragraph 2</p> </div>
|
<div>
Element की तरह ही इस Element का भी Document के Appearance पर कोई प्रभाव नहीं
पडता है, लेकिन इसका प्रयोग करने से Markup में कुछ Extra Meanings Add हो जाती
हैं, जो कि आपस में Logically Related Elements को Group करता है और हम इस पूरे
Group को एक साथ Handle कर सकने की सुविधा प्राप्त कर लेते हैं। इस Group का
प्रयोग या तो Application Processing के लिए अथवा इन Elements पर CSS Rules को
Apply करने के लिए किया जा सकता है। <div>
व <span>
Elements के साथ सभी Universal Attributes, UI Event Attributes व Deprecated align Attribute को भी उपयोग में लिया
जा सकता है।
CSS के साथ
<div> element का प्रयोग content के large blocks पर
एक साथ style attributes का प्रयोग करने के लिए होता है । <div> element का
अन्य सामान्य प्रयोग, document के layout के लिए प्रयोग करना । यह layout के
निर्माण के पुराने तरीके (tables का प्रयोग) का स्थान लेता है। layout के लिए
<table> elements का प्रयोग करना <table> element का सही उपयोग नही है
। <table> element का purpose tabular data को प्रदर्शित करना है ।
CSS के साथ <span> element का प्रयोग text के parts पर एक साथ style
attributes का प्रयोग करने के लिए होता है ।
No comments:
Post a Comment