div and span in HTML: हम हमारे Document में विभिन्न प्रकार के Alphanumerical Characters को उपयोग में लेते हैं, लेकिन हम उन Characters को अपने Document में सामान्य तरीके से Use नहीं कर सकते हैं, जिनका XHTML Document के लिए Special Meaning होता है।
उदाहरण के लिए यदि हम हमारे Document में Angle Bracket को उपयोग में लेना चाहें, तो सामान्य तरीके से इन्हें उपयोग में नहीं ले सकते हैं। इस प्रकार के Characters को Document में लिखने के लिए हमें कुछ Special Character Combination को Use करना पडता है। इस प्रकार के Characters को Escape Characters भी कहा जाता है।
इन Escape Characters में से कुछ को एक Unique Entity के रूप में एक नाम भी दिया गया है, जबकि बाकी Special Characters को उपयोग में लेने के लिए हमें उन Characters के Numerical Equivalent मान को या Numeric Entity को उपयोग में लेना होता है। कुछ Escape Characters निम्नानुसार हैं:
| Character | Numeric Entity | Named Entity |
| ” | “ | " |
| & | & | & |
| < | < | < |
| > | > | > |
Comments
सभी Programming Languages की तरह ही XHTML Codes लिखते समय भी हम विभिन्न प्रकार के Comments लिख सकते हैं। Comments लिखने के लिए हमें निम्नानुसार Statement लिखना होता है:
<!-- comment goes here -->
इस Element के बीच हम जो कुछ भी लिखते हैं, उसे हमारा Browser Ignore कर देता है और उन्हें Web Page पर Render नहीं करता है।
Block and Inline Elements
अभी तक हमने जितने Elements के बारे में जाना है, लगभग 90 प्रतिशत Coding में इन्हीं Elements का प्रयोग होता है और हम हमारी ज्यादातर जरूरतों को इन Elements द्वारा पूरा कर सकते हैं। इन सभी Elements को <body> Element के बीच रखा जाता है, क्योंकि ये सभी Elements निम्न दो Categories में से किसी एक में Place किए जाते हैं:
- Block-Level Elements
- Inline Elements
Block Level Elements Screen पर इस तरह से Appear होते हैं, जैसे उनसे पहले व बाद में Carriage Return या Line Break का प्रयोग किया गया हो। उदाहरण के लिए <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr /> और <blockquote> आदि Block Level Elements हैं। ये सभी अपनी स्वयं की एक नई Line में Start होते हैं और इनके बाद जो कुछ भी लिखा जाता है, वह भी एक नई Line में ही Display होता है।
जबकि Inline Elements किसी Sentence के बीच में Appear हो सकते हैं और इन्हें एक नई Line में Display होने की जरूरत नहीं होती है। उदाहरण के लिए <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li> आदि Inline Elements के उदाहरण हैं। निम्न Code में हम देख सकते हैं कि किस तरह से Block Level Elements एक नई Line में Appear होते हैं, जबकि Inline Elements किसी भी Line में Appear हो सकते हैं।
<h1>Block-Level Elements</h1> <p><strong>Block-level elements</strong> always start on a new line. The <code><h1></code> and <code><p></code> elements will not sit on the same line, whereas the inline elements flow with the rest of the text.</p>
Strict XHTML Document में एक Block Level Element के बीच अन्य Block Level Elements व Inline Elements Place किए जा सकते हैं, लेकिन एक Inline Element को हमेंशा किसी ना किसी Block Level Element के बीच ही Place किया जा सकता है।
<div> and <span> – Grouping Elements
ये दोनों Elements हमें एक से ज्यादा Elements का एक Group Create करने की सुविधा प्रदान करते हैं, जो कि किसी Page को Section या Sub-Section में Divide करता है। ये स्वयं Document के Appearance पर किसी तरह का कोई प्रभाव नहीं डालते हैं, लेकिन इनका प्रयोग सामान्यतया CSS के साथ किया जाता है, जिससे हम Page के किसी एक हिस्से पर किसी CSS Style को Apply करने की सुविधा प्राप्त कर लेते हैं।
उदाहरण के लिए मानलो कि हम हमारे Page से सम्बंधित Footnotes को Indicate करने वाले सभी Elements को एक <div> Element में Place कर सकते हैं और बाद में जरूरत होने पर हम इस <div> Element पर किसी CSS Style Rule को Apply कर सकते हैं। सामान्यतया <div> Element का प्रयोग Block-Level Elements को Group करने के लिए किया जाता है। जैसे:
<div class=”footnotes”> <h2>Footnotes</h2> <p><b>1</b> The World Wide Web was invented by Tim Berners-Lee</p> <p><b>2</b> The W3C is the World Wide Web Consortium who maintain many Web standards</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="footnotes"> <h2>Footnotes</h2> <p> <span class="inventor"> <b>1</b>The World Wide Web was invented by Tim Berners Lee</span></p> <p><b>2</b>The W3C is the World Wide Web Consortium </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 को भी उपयोग में लिया जा सकता है। (div and span in HTML)
ये Article इस वेबसाईट पर Selling हेतु उपलब्ध EBook HTML5 with CSS3 in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी।
HTML5 with CSS3 in Hindi | Page: 481 | Format: PDF
