HTML Elements

एक Element की संरचना

ज़्यादातर HTML elements को एक opening tag, अंदर के content, और forward slash वाले closing tag की ज़रूरत होती है। closing tag भूल जाना beginners की सबसे आम गलतियों में से एक है और इसके बाद आने वाले पूरे layout को तोड़ सकता है।

उदाहरण: The Structure of an Element

<p>This is the inner content.</p>

Nested Elements

HTML आपको elements को दूसरे elements के अंदर रखने देता है। इसे nesting कहा जाता है, और इसी तरह हम complex web layouts बनाते हैं।

सही nesting मायने रखती है: tags को उसी क्रम के उल्टे क्रम में close होना चाहिए जिसमें वे खुले थे, वरना ब्राउज़र आपके markup को अप्रत्याशित तरीके से auto-correct करने की कोशिश करेगा।

उदाहरण: Nested Elements

<div>
  <p>Nested inside a div.</p>
</div>

Empty Elements

कुछ elements में कोई content या closing tags नहीं होते। इन्हें empty या self-closing elements कहा जाता है, और इनका उपयोग images, line breaks, या metadata जैसी चीज़ें insert करने के लिए किया जाता है।

आम उदाहरणों में img, br, hr, और input शामिल हैं -- इनके लिए closing tag लिखना, element के आधार पर या तो ignore हो जाता है या invalid होता है।

उदाहरण: Empty Elements

<img src="photo.jpg" alt="Photo">
<br>
<hr>
<input type="text">

Block बनाम Inline Elements

div और p जैसे block-level elements हमेशा नई line पर शुरू होते हैं और उपलब्ध पूरी width लेते हैं, जबकि span और a जैसे inline elements बिना line break किए आसपास के text के flow के अंदर बैठते हैं।

उदाहरण: Block vs Inline Elements

<div>
  <p>Block elements start on a new line.</p>
  <span>Inline</span> <a href="#">elements</a> stay in the flow.
</div>

Void Elements Reference

img, br, और input के अलावा, HTML void elements की एक निश्चित list define करता है जिसमें hr, meta, link, और source शामिल हैं, जो specification के अनुसार कभी भी content या closing tag नहीं रखते।

उदाहरण: Void Elements Reference

<hr>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<source src="video.mp4" type="video/mp4">