HTML Elements

HTML Elements क्या हैं?

HTML Elements, HTML की संरचना का सबसे बुनियादी हिस्सा हैं। ये ब्राउज़र को यह निर्देश देते हैं कि वेब पेज पर कंटेंट कैसे दिखाना है। हर HTML Element, एक ओपनिंग टैग, कंटेंट, और क्लोज़िंग टैग से मिलकर बनता है।

उदाहरण:

<p>यह एक पैराग्राफ है।</p>

ऊपर दिए गए उदाहरण में:

1. <p>: यह ओपनिंग टैग है।
2. यह एक पैराग्राफ है।: यह कंटेंट है।
3. </p>: यह क्लोज़िंग टैग है।

HTML Elements की संरचना

एक HTML Element को तीन हिस्सों में बांटा जा सकता है:

1. Opening Tag: यह बताता है कि एलिमेंट कहां से शुरू हो रहा है।
2. Content: यह वह टेक्स्ट या अन्य डेटा है, जो एलिमेंट के अंदर होता है।
3. Closing Tag: यह बताता है कि एलिमेंट कहां समाप्त हो रहा है।

उदाहरण:

<h1>यह एक हेडिंग है</h1>

Self-Closing Elements

कुछ HTML Elements ऐसे होते हैं, जिनके पास क्लोज़िंग टैग नहीं होता। इन्हें Self-Closing Elements कहते हैं।
उदाहरण:

<img src="image.jpg" alt="यह एक इमेज है">
<br>
<hr>

Nested Elements

HTML में एक एलिमेंट के अंदर दूसरे एलिमेंट को लिखा जा सकता है। इसे Nested Elements कहते हैं।
उदाहरण:

<div>
  <h1>यह एक हेडिंग है</h1>
  <p>यह एक पैराग्राफ है।</p>
</div>

यहां <div> एक बाहरी एलिमेंट है, जिसके अंदर <h1> और <p> जैसे एलिमेंट्स हैं।

Block-Level और Inline Elements

HTML Elements को उनकी प्रकृति के आधार पर दो श्रेणियों में बांटा जाता है:

Block-Level Elements

Block-Level Elements पूरे वेब पेज पर एक नया सेक्शन बनाते हैं। ये हमेशा नई लाइन पर शुरू होते हैं।
उदाहरण:

• <div>
• <p>
• <h1> से <h6>

उदाहरण:

<div>यह एक डिव सेक्शन है।</div>
<p>यह एक पैराग्राफ है।</p>

Inline Elements

Inline Elements, एक ही लाइन पर मौजूद रहते हैं और नए सेक्शन की शुरुआत नहीं करते।
उदाहरण:

• <span>
• <a>
• <img>

उदाहरण:

<p>यह <span>inline</span> टेक्स्ट है।</p>

HTML Elements के Attributes

HTML Elements के साथ Attributes का उपयोग किया जाता है, जो उन्हें अतिरिक्त जानकारी प्रदान करते हैं।
उदाहरण:

<a href="https://example.com" target="_blank">यह एक लिंक है</a>

यहां:

• href: लिंक का URL सेट करता है।
• target: बताता है कि लिंक नई विंडो में खुलेगा।

Common HTML Elements

नीचे HTML के कुछ सामान्य Elements दिए गए हैं:

Heading Elements

हेडिंग्स बनाने के लिए <h1> से <h6> तक के टैग्स का उपयोग किया जाता है।

<h1>यह सबसे बड़ा हेडिंग है</h1>
<h6>यह सबसे छोटा हेडिंग है</h6>

Paragraph Element

पैराग्राफ लिखने के लिए <p> टैग का उपयोग किया जाता है।

<p>यह एक साधारण पैराग्राफ है।</p>

Anchor Element

लिंक जोड़ने के लिए <a> टैग का उपयोग किया जाता है।

<a href="https://example.com">यह एक लिंक है</a>

Image Element

इमेज जोड़ने के लिए <img> टैग का उपयोग किया जाता है।

<img src="image.jpg" alt="यह एक इमेज है">

List Elements

लिस्ट बनाने के लिए Ordered List और Unordered List टैग्स का उपयोग होता है।

Ordered List:

<ol>
  <li>पहला आइटम</li>
  <li>दूसरा आइटम</li>
</ol>

Unordered List:

<ul>
  <li>पहला आइटम</li>
  <li>दूसरा आइटम</li>
</ul>

Semantic Elements

Semantic Elements वे होते हैं, जो उनके उपयोग के अनुसार नामित होते हैं।
उदाहरण:

• <header>
• <footer>
• <article>
• <section>

<header>यह हेडर सेक्शन है।</header>
<section>यह सेक्शन है।</section>
<footer>यह फुटर है।</footer>

निष्कर्ष

HTML Elements, वेब पेज की नींव हैं। इनके सही उपयोग से आप वेब पेज को बेहतर और व्यवस्थित बना सकते हैं। इस अध्याय में आपने HTML Elements की संरचना, प्रकार, और उनके उपयोग को जाना। अगले अध्याय में, हम HTML Attributes के बारे में विस्तार से जानेंगे।