HTML Elements

HTML में हर चीज़ Element कहलाती है। Element वो structure होता है जो Tag और Content से मिलकर बनता है। Simply बोलें तो — “Tag वो है जिससे आप code लिखते हैं, और Element वो है जो उस Tag से बनता है।”

Example:

<p>Hello World!</p>

यहाँ —

<p> → Opening Tag
Hello World! → Content
</p> → Closing Tag

इन तीनों को मिलाकर पूरा बनता है एक HTML Element।

2. HTML Element की Basic Structure

हर HTML element की एक सामान्य संरचना होती है

या फिर कुछ elements ऐसे भी होते हैं जो अपने आप बंद हो जाते हैं (self-closing elements)।

3. HTML Tags और Elements में अंतर

HTML Tag	HTML Element
सिर्फ कोड का हिस्सा होता है, जैसे `<p>` या `</p>`	Opening + Content + Closing मिलकर बनता है Element
बिना content के भी हो सकता है	हमेशा किसी structure को represent करता है
Syntax का हिस्सा है	Layout या structure का हिस्सा है

Example:

<p>HTML is fun!</p>

यहाँ <p> और </p> टैग हैं, लेकिन <p>HTML is fun!</p> पूरा element है।

4. Element के प्रकार (Types of HTML Elements)

HTML Elements दो तरह के होते हैं

1. Block-Level Elements

2. Inline Elements

Block-Level Elements

Block-level elements हमेशा नई लाइन से शुरू होते हैं
और पूरी लाइन की चौड़ाई (width) ले लेते हैं।

Exampl

<h1>Heading</h1> 
<p>This is a paragraph.</p> 
<div>This is a division.</div>

Common Block Elements:

<div>, <p>, <h1> से <h6>, <table>, <form>, <header>, <footer>, <section>, <article>

Example Output:

Heading (This text starts from a new line) This is a paragraph. This is a division.

Inline Elements

Inline elements नई लाइन से शुरू नहीं होते, बल्कि जिस लाइन में होते हैं, उसी में दिखाई देते हैं।

Example:

<p>This is <b>bold</b> and <i>italic</i> text.</p>

Output एक ही लाइन में आएगा।

Common Inline Elements:

<span>, <a>, <b>, <i>, <u>, <strong>, <em>, <img>, <mark>, <small>

5. Nested Elements (Elements के अंदर Elements)

HTML में एक element के अंदर दूसरा element लिखा जा सकता है।
इसे Nesting कहा जाता है।

Example:

<p>This is a <b>nested</b> element example.</p>

यहाँ <b> element <p> element के अंदर nested है।

❗ Important Rule:

हर बार elements को सही तरीके से बंद (close) करना ज़रूरी है।

गलत nesting ❌

<p><b>This is wrong.</p></b>

सही nesting

<p><b>This is correct.</b></p>

6. Empty Elements (Self-Closing Elements)

कुछ elements ऐसे होते हैं जिनमें कोई content नहीं होता।
इन्हें Empty Elements या Self-Closing Elements कहा जाता है।

Example:

<br> 
<!-- Line Break --> 
<hr> 
<!-- Horizontal Line --> 
<img src="photo.jpg" alt="Image"> 
<meta charset="UTF-8"> 
<link rel="stylesheet" href="style.css">

इन elements को बंद करने के लिए अलग closing tag की जरूरत नहीं होती।

7. Example: Elements का Real Structure

<!DOCTYPE html> 
<html> 
<head> 
<title>HTML Elements Example</title> 
</head> 
<body> 
<h1>HTML Elements in Action</h1> 
<p>This is a <b>paragraph</b> inside the body.</p> 
<div> <h2>About HTML</h2> 
<p>HTML stands for <strong>HyperText Markup Language</strong>.</p> 
</div> 
<hr> 
<p>Visit <a href="https://codekeet.com" target="_blank">CodeKeet</a> for more info.</p> 
</body> 
</html>

8. HTML Element Tree (DOM Structure)

जब browser HTML को पढ़ता है,
तो वो उसे एक Tree Structure में बदल देता है जिसे DOM (Document Object Model) कहा जाता है।

Example Structure

html ├── head │ └── title └── body ├── h1 ├── p │ └── b └── a

हर parent के अंदर child elements होते हैं। यह hierarchy ही HTML की असली ताकत है।

9. Example: Nested Layout Practice

<!DOCTYPE html> 
<html> 
<head> 
<title>Nested Elements Example</title> 
</head> 
<body> 
<div> 
<h1>My Profile</h1> 
<p>Hello, my name is <b>Ravi</b>.</p>
 <p>I am learning <i>HTML</i> and <u>CSS</u>.</p> 
<div> 
<h2>My Skills</h2> 
<ul> 
<li>HTML</li> 
<li>CSS</li> 
<li>JavaScript</li> 
</ul> 
</div> 
</div> 
</body> 
</html>

Output:

My Profile 
Hello, my name is Ravi. I am learning HTML and CSS. My Skills 
• HTML 
• CSS 
• JavaScript

10. Semantic vs Non-Semantic Elements

HTML5 में दो तरह के elements होते हैं:

Type	Example	Description
Semantic Elements	`<header>`, `<footer>`, `<article>`, `<section>`, `<nav>`	ये elements content का अर्थ (meaning) बताते हैं।
Non-Semantic Elements	`<div>`, `<span>`	ये केवल layout या grouping के लिए होते हैं।

Example:

<header> 
<h1>My Website</h1> 
</header> 
<section> 
<h2>About Me</h2> 
<p>I love coding!</p> 
</section> 
<footer> 
<p>© 2025 MyWebsite.com</p> 
</footer>

यहाँ <header> और <footer> semantic हैं क्योंकि ये अपने आप बताती हैं कि इनमें क्या content होगा।

11. Element Attributes के साथ Example

<img src="nature.jpg" alt="Beautiful Nature" width="400" height="300"> 
<a href="https://youtube.com" target="_blank" title="Go to YouTube">YouTube</a>

Attribute	Description
`src`	Image का path
`alt`	Image load न होने पर दिखने वाला text
`width`/`height`	Size control
`href`	Link का URL
`target="_blank"`	Link नए tab में खुले
`title`	Hover पर tooltip text

12. Nested Element Practical Exercise

नीचे दिया गया code खुद टाइप करें और output देखें:

<!DOCTYPE html> 
<html> 
<head> 
<title>Practice Nested Elements</title> 
</head> 
<body> 
<h1>My Daily Routine</h1> 
<ol> 
<li>Wake up at <b>6:00 AM</b></li> 
<li>Do <i>Yoga</i> and <mark>Meditation</mark></li> 
<li>Start <strong>Coding Practice</strong></li> 
<li>Read <u>Tech Articles</u></li> 
</ol> 
<hr> 
<p>Made with ❤️ by <em>Jaswant</em></p> 
</body> 
</html>

13. Quick Summary

Concept	Description
HTML Element	Opening + Content + Closing Tag
Types	Block, Inline, Empty
Nesting	Elements के अंदर Elements
Semantic Elements	Meaningful Elements
Non-Semantic Elements	Layout Elements
DOM	Tree Structure of Elements

Bonus Tip:

“हर HTML पेज एक पेड़ की तरह होता है – <html> उसकी जड़ (root) है, और बाकी Elements उसकी शाखाएँ।”