एक web page बहुत सारे HTML elements से मिलकर बने होते हैं| लेकिन जब बात आती है इसे विस्तार (details) में समझने की या समझाने की तो बहुत सारे लोग इसे नहीं समझ पाते हैं| आज के इस tutorial में हम आपको बतायेंगे की HTML elements क्या होता है? यह HTML tags से कैसे अलग है that means HTML tag और HTML elements में क्या अंतर है?
HTML Elements क्या होता है?
एक website बहुत सारे web pages से मिलकर बने होते हैं और एक web page HTML के ढेर सारे elements से मिलकर बना होता है| HTML file में ढेर सारे elements मौजूद होते हैं और सभी elements का कार्य और meaning अलग अलग होता है|
एक HTML element start tag (opening tag) <tagname>, end tag (closing tag) </tagname>, content (जो की opening और closing that means start और end tag के बीच में लिखा हुआ रहता है) और Attributes से मिलकर बने होते हैं| Attributes किसी भी elements में extra properties add करने के लिए इस्तेमाल किया जाता है जैसा की आप निचे दिए गए example में देख सकते हैं|
इस example में एक h1 tag है जिसमें id उस h1 tag का attribute है और abc उस attribute का value है| opening और closing tag के बीच में content है जो की web page पर display होगा| H1 tag heading के लिए इस्तेमाल किया जाता है|
Attributes के बारे में हम अगले पोस्ट में पढेंगे|
Note: कुछ elements को represent करने के लिए end tag की आवश्यकता नहीं पड़ती है जैसे की <hr>, <img..>, <br> इसलिए इसे void element या empty element कहा जाता है|
एक HTML page में बहुत सारे elements मौजूद होते हैं और एक elements के अन्दर बहुत सारे elements available होते हैं जो की tree structure में होते हैं| सभी elements का कार्य अलग अलग प्रकार का होता है जैसे की <p>this is paragraph</p> element का कार्य paragraph को web page पर show करना उसी प्रकार <h1>This is first heading</h1> का कार्य heading को show करना|
Nested element
जब एक element के अन्दर दूसरा elements मौजूद होता है तो उस elements को nested element कहा जाता है| जैसा की आप example में देख सकते हैं की एक paragraph के अन्दर एक <b>...</b> element लगा हुआ है जिसका कार्य paragraph के बीच में particular word को या particular sentence को bold करने के लिए होता है|
बाहर वाले element को parent element भी कहा जाता है जबकि अन्दर वाले elements (inner elements) को child element भी कहा जाता है|
<!DOCTYPE html>
<html>
<head>
<title>HTML Elements example</title>
</head>
<body>
<p>We are here to show you <b>the importance of time</b>. Let's start.</p>
</body>
</html>HTML tags vs Elements – tags और elements में क्या अंतर है?
Start tag, end tag, content, attributes और value के combination को HTML element कहा जाता है जबकि elements को represent करने के लिए angle brackets के अन्दर लिखा गया word को tag कहा जाता है जो की elements के start और end में use होता है|
HTML elements और tags दोनों ही case insensitive होते हैं that means आप elements और tags दोनों को ही upper case या lower case या दोनों के combination में लिख सकते हैं| लेकिन हम आपको tags और attributes को generally lower case में ही लिखने के लिए suggest करेंगे| HTML attributes के कुछ values case sensitive होते हैं|
Categories of HTML elements – Elements के category
Elements को दो category में बाँटा गया है|
- Block-level element
- Inline element
Block-level element
Block-level element webpage पर हमेशा new line से start होता है और यह webpage में left से right तक पूरा width लेता है|इस element का इस्तेमाल webpage को अलग अलग part में divide करने के लिए किया जाता है| जैसे की <table>....</table> का इस्तेमाल table create करने के लिए किया जाता है|
Block-level element को block-level और inline element दोनों के जैसा इस्तेमाल किया जा सकता है| निचे कुछ block-level element के नाम दिए गए हैं|
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.<!DOCTYPE html>
<html>
<head>
<title>Block level element</title>
</head>
<body>
<h1 style="background: red;">This is first heading</h1>
<p style="background: green;">This is paragraph</p>
<div style="background: brown;">This is third heading</div>
</body>
</html>Output:
ऊपर के HTML में मैं एक heading, एक paragraph और एक div (division) tag का उपयोग किया है और तीनो का background color different दिया है ताकि block आसानी से पता चल सके| आप output में देख सकते हैं की heading left से right तक पूरा space ले रहा है ठीक उसी प्रकार paragraph और div width ले रहा है जिससे ये साफ पता चल रहा है की block-level element हमेशा नया line से start होता है|
Inline elements
Inline elements वैसे elements होते हैं जो की किसी particular text के function को define करते हैं that means किसी sentence में particular word को या particular sentence के properties को अलग तरीके से define करते हैं|
ये elements नए line से start नहीं होते हैं और ये width अपने requirement के अनुसार लेते हैं| ये element ज्यादातर दूसरे elements के साथ इस्तेमाल किये जाते हैं| निचे कुछ inline elements के नाम दिए गए हैं|
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var><!DOCTYPE html>
<html>
<head>
<title>Inline level element</title>
</head>
<body>
<h1>We are going to <span style="background: brown;color: white;">market</span> to buy pens.</h1>
</body>
</html>Output:
इस example में मैंने एक heading के अन्दर “Market” का background color change किया है जो की inline element <span>..</span> के द्वारा किया गया है|
Read Also:
good post, I love guptatreepoint.com !
https://www.guptatreepoint.com/html-elements/