Types Of Html Element – एच टी एम एल तत्व के प्रकार

_Romeyo Boy_
2 सित॰ 2021
5 मिनट पठन

अपडेट करने की तारीख: 3 नव॰ 2021

एक Website बहुत सारे Web-Pages से मिलकर बने होते हैं या फिर एक Html Document, File पेज में बहुत सारे Elements से मिलकर बने होते हैं और इस पेज में मौजूद होते हैं और एक Element के अंदर बहुत सारे Elements उपलब्ध होते हैं, जो कि एक Tree के संरचना में होते हैं। सभी Elements के अर्थ, कार्य और उपयोगा अलग-अलग होते हैं।

For Examples:

<p> </p> Element का उपयोग Paragraph के किया जाता हैं।
<h1> </h1> Element का उपयोग बड़े शीर्षक ( Heading ) के किया जाता हैं।
<b> </b> Element का उपयोग के किया जाता हैं।आदि ऐसे ही बहुत से Elements हैं।

आइये अब इसको अच्छे से समझने के लिए निचे दिए गए HTML कोड को अच्छे से समझते हैं।

<DOCTYPE! html>
<html>
<head>
      <title> sketchy knowledges </title>
</head>
<body>
      <h1> This Is My First Heading </h1>
      <p> This Is My First Paragraph </p>
</body>
</html>

➤ Html Element :- यह Html Document का Root Element होता हैं, जिससे Browser को यह पता चलता हैं कि यह एक Html Document हैं।

➤ Head Element :- यह Html का Head Element होता हैं, जिसमे वेबपेज का Title लिखा जाता हैं।

➤ Title Element :- इसमें वेबपेज का शीर्षक दिया जाता हैं।

➤ Body Element :- इसमें Html Document का Visible पार्ट को प्रदर्शित किया जाता हैं, जो हमें Web Browser पर दिखाई देती हैं।

➤ Heading Element :- इसका उपयोग Heading यानि शीर्षक बनाने के लिए किया जाता हैं। जो H1, H2, H3, H4, H5, H6 तक होता हैं, जिसमे H1 सबसे बड़ा शीर्षक और H6 सबसे छोटा शीर्षक होता हैं।

➤ Paragraph Element :- इसका उपयोग एचटीएमएल में डाक्यूमेंट्स में पैराग्राफ लिखने के लिए किया जाता हैं।

What Is Html Element? (एचटीएमएल तत्व क्या है?)

एच टी एम एल तत्व ( Element ) Tags, Content, का संयोजन ( Combination ) होता हैं। यानि Opening और Closing Tag तक सब कुछ एक प्रकार से Html Element ही होता हैं।

Html Tutorial - Types Of Html Elements In Hindi | Creative Bloke

एक Html Element में Opening Tag, Closing Tag, ( जिसे Start और End Tag भी कहते हैं। ) Content,और Attributes से मिलकर बने होते हैं, जिन्हे सामूहिक रूप से Html Element कहा जाता हैं। Elements Web Page पर सूचनाओं के प्रदर्शित होने के तरीके को दर्शाता हैं। Heading, Paragraph, Hyperlink, List आदि Elements के उदाहरण हैं।

What Is Called Html Element? (एचटीएमएल तत्व किसे कहते हैं?)

Opening Tag, Closing Tag, Content, Attributes और Value के संयोजन ( Combination ) को सामूहिक रूप से हम Html Element कहते हैं। For Example:-

<DOCTYPE! html>
<html>
<body>
     <h1> This Is My First Heading </h1>
     <p> This Is My First Paragraph </p>
</body>
</html>

ऊपर दिए गए उदाहरण में कुल 4 एचटीएमएल एलिमेंट्स हैं। आइए प्रत्येक एचटीएमएल एलिमेंट्स को समझते हैं।

𝟏. <𝐡𝐭𝐦𝐥> </𝐡𝐭𝐦𝐥> (Html Elements)

एचटीएमएल एलिमेंट्स एक एचटीएमएल Document का Root Element होता हैं। इस Element से Browser को पता चलता है कि यह एक HTML Document हैं। Opening <html> tag, अन्य HTML Elements (Body, Heading और Paragraph) और Closing </html> tag तीनों से मिलकर HTML Elements का निर्माण करती हैं।

𝟐. <𝐛𝐨𝐝𝐲> </𝐛𝐨𝐝𝐲> (Body Elements)

Body Element में HTML Document का Visible Part लिखा जाता हैं। Opening <body> tag, अन्य HTML Elements (Heading और Paragraph) और Closing </body> tag से एक Body Elements का निर्माण होता हैं।

𝟑. <𝐡𝟏> </𝐡𝟏> (Heading Elements)

Heading Elements का उपयोग Heading बनाने के लिए किया जाता हैं। Opening <h1> tag, Heading Text और Closing </h1> tag से एक Heading Elements का निर्माण होता हैं।

𝟒. <𝐩> </𝐩> (Paragraph Elements)

Paragraph Element का उपयोग Heading बनाने के लिए किया जाता हैं। Opening <p> tag, Paragraph Text, और Closing </p> tag से एक Paragraph Element का निर्माण होता हैं।

Types Of Elements In Html ( एचटीएमएल में तत्वों के प्रकार )

Html Tutorial - Types Of Html Elements Examples Of Block Level Elements & Inline Level Elements | Creative Bloke

एचटीएमएल एलिमेंट्स को दो 𝗖𝗮𝘁𝗲𝗴𝗼𝗿𝘆 में बांटा गया हैं;_

Block-Level Elements
Inline-Level Elements

01} Block-Level Elements ( ब्लॉक-स्तर के तत्व )

Html Tutorial - Block Level Elements Example | Creative Bloke

वह Elements होते हैं, जिनका उपयोग करने के बाद Content New Line में Start होता हैं। यह Elements Web-Page में Right Side से लेकर Left Side तक पूरा Width Cover करता हैं यानि कि Block-Level Elements के बाद लिखें गए Content भी New Line से Start होते हैं।

𝐔𝐬𝐞 𝐎𝐟 𝐁𝐥𝐨𝐜𝐤-𝐋𝐞𝐯𝐞𝐥 𝐄𝐥𝐞𝐦𝐞𝐧𝐭𝐬 ( ब्लॉक-स्तर तत्वों उपयोग )

Block Level Elements का इस्तेमाल Web-Page में लिखें गए Content को अलग – अलग भाग में बांटने के लिए किया जाता हैं। जैसा कि <table>…….</table/> का इस्तेमाल Table Create करने के लिए किया जाता हैं।

° यह Elements जहां से भी शुरू होते हैं, वहां ऊपर की एक Line को छोड़ देते हैं। ° और जहां खत्म होते हैं, वहां Last की एक Line को छोड़ देता हैं। ° यह हमेशा New Line से Start होता हैं। ° और यह Webpage में Left से Right तक पूरा width लेता हैं।

Block-Level Element को Block -Level और Inline Element दोनों के जैसा इस्तेमाल किया जा सकता हैं। नीचे कुछ Block-Level Element के नाम दीए गए हैं।

<address> <artical> <canvas> <aside>
<blockquote> <fieldest> <figure> <footer>
<dl> <div> <dd> <dt>
<figcaption> <form> <h1> to <h6> <header>
<hr> <Ol> <li> <p>
<main> <nav> <pre> <coscripts>
<section> <tfoot> <ul> <video>

𝐅𝐨𝐫 𝐄𝐱𝐚𝐦𝐩𝐥𝐞:-

<DOCTYPE! html>
<html>
<head>
     <title> Block-Level Elements </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>

☞ 𝐎𝐮𝐭𝐩𝐮𝐭;

ऊपर के Example में एक Heading एक Paragraph और एक div Tag (division tag) का उपयोग किया हैं और तीनों का Background Color Different दिया है ताकि Block आसानी से पता चल सके।

आप Output में देख सकतें हैं कि Heading Left से Right तक पूरा Space ले रहा हैं। ठीक उसी प्रकार Paragraph और div भी Width ले रहा हैं, जिससे ये साफ पता चल रहा है कि Block Level Elements हमेशा New Line से Start होता हैं और By Default हर Line के Last में हमेशा एक Line का Space मिलता है।

02} Inline-Level Elements ( इनलाइन-स्तर के तत्व )

Html Tutorial - Inline-Level Elements Example | Creative Bloke

Inline Element कभी भी नई Line से शुरू नहीं होता हैं। बल्कि उसी पुरानी Line में कुछ Space ले लेता हैं।

Inline Element वे Element हैं, जो दिए गए भाग को अलग करते हैं और इसे एक विशेष Function प्रदान करते हैं।
ये Element नई Line से शुरू नहीं होते हैं और आवश्यकता के अनुसार चौड़ाई लेते हैं।
Inline Element का उपयोग ज्यादातर अन्य Elements के साथ किया जाता हैं।

Inline Elementa के नाम नीचे दिए गए हैं;

<a> <b> <br> <abbr>
<bdo> <button> <acronyms> <big>
<cite> <code> <dfn> <em>
<i> <img> <input> <kbd>
<label> <map> <object> <q>
<samp> <script> <select> <small>
<spam> <strong> <sub> <sup>
<textarea> <time> <tt> <var>

उदाहरण के लिए हम Span Tag को लेते हैं। Span Tag का Use Paragraph में होता हैं।

<DOCTYPE! html>
<html>
<head>
      <title> Span Element </title>
</head>
<body>
      <P> This Website is useful for <span style="border: 1px solid 
          black;"> Web Developer </span> The demands of a Web
          Developer are increases day by day. </p>
</body>
</html>