HTML में Tags सबसे important concept होते हैं।
पूरे HTML document का structure tags के माध्यम से ही बनाया जाता है।
Tags ऐसे keywords होते हैं जो angle brackets < > के अंदर लिखे जाते हैं और browser को बताते हैं कि content को कैसे display करना है।
👉 सरल शब्दों में:
Tags = Instructions जो browser को बताते हैं क्या और कैसे दिखाना है
HTML Tag क्या होता है?
HTML tag एक special keyword होता है जो किसी content को define करता है।
👉 Example:
<h1>This is heading</h1>
<p>This is paragraph</p>What is this?
यहाँ:
<h1>→ heading define करता है<p>→ paragraph define करता है
HTML Element क्या होता है?
जब हम opening tag, content और closing tag को एक साथ लेते हैं, तो उसे Element कहते हैं।
👉 Example:
<p>This is a paragraph</p>What is this?
👉 इसमें:
<p>→ Opening TagThis is a paragraph→ Content</p>→ Closing Tag
👉 पूरा मिलकर = HTML Element
Opening Tag और Closing Tag
1. Opening Tag
- यह tag content की शुरुआत को बताता है
- इसमें
/नहीं होता
👉 Example:
<p>What is this?
2. Closing Tag
- यह content के अंत को बताता है
- इसमें
/होता है
👉 Example:
</p>What is this?
Empty Tags (Self Closing Tags)
कुछ tags ऐसे होते हैं जिनका closing tag नहीं होता। इन्हें Empty Tags कहते हैं।
👉 Example:
<br>
<hr>
<img src="image.jpg">What is this?
👉 ये tags सिर्फ एक ही बार use होते हैं
Common HTML Tags (Important for Exam)
Heading Tags
<h1>Heading 1</h1>
<h2>Heading 2</h2>What is this?
👉 <h1> सबसे बड़ा heading होता है
Paragraph Tag
<p>This is a paragraph</p>What is this?
Line Break Tag
<br>What is this?
नई line में ले जाता है
Horizontal Line
<hr>What is this?
👉 एक horizontal line draw करता है
Image Tag
<img src="image.jpg">What is this?
👉 image display करता है
Link Tag
<a href="https://example.com">Click Here</a>What is this?
👉 एक page से दूसरे page पर जाने के लिए
HTML Tags के Types
1. Paired Tags
- Opening + Closing दोनों होते हैं
👉 Example:<p>...</p>
2. Unpaired Tags
- सिर्फ एक tag होता है
👉 Example:<br>
Attributes क्या होते हैं?
Attributes tag के अंदर extra information देते हैं।
👉 Example:
<a href="https://google.com">Google</a>What is this?
👉 यहाँ:
href= attribute- यह link का address बताता है
HTML Tags कैसे काम करते हैं?
- Developer tag लिखता है
- Browser tag को पढ़ता है
- Tag के अनुसार content render होता है
👉 Example:
<h1>→ बड़ा text<p>→ normal text
Important Points
- Tags हमेशा
< >में लिखे जाते हैं - ज्यादातर tags के opening और closing दोनों होते हैं
- Tags case-insensitive होते हैं (लेकिन lowercase best practice है)
- Proper nesting जरूरी है
गलत:
<b><i>Text</b></i>What is this?
सही:
<b><i>Text</i></b>What is this?
Common HTML Tags Table
| Tag | Description | Example |
|---|---|---|
<html> | पूरे HTML document को define करता है | <html>...</html> |
<head> | Page की information रखता है | <head>...</head> |
<title> | Browser tab में title दिखाता है | <title>My Page</title> |
<body> | Visible content दिखाता है | <body>...</body> |
<h1> - <h6> | Headings define करते हैं | <h1>Heading</h1> |
<p> | Paragraph लिखने के लिए | <p>Text</p> |
<br> | Line break देता है | <br> |
<hr> | Horizontal line बनाता है | <hr> |
<b> | Text को bold करता है | <b>Bold</b> |
<i> | Text को italic करता है | <i>Italic</i> |
<u> | Text को underline करता है | <u>Text</u> |
<a> | Link बनाने के लिए | <a href="url">Link</a> |
<img> | Image दिखाने के लिए | <img src="img.jpg"> |
<ul> | Unordered list (bullet) | <ul><li>Item</li></ul> |
<ol> | Ordered list (number) | <ol><li>Item</li></ol> |
<li> | List item define करता है | <li>Item</li> |
<table> | Table बनाने के लिए | <table>...</table> |
<tr> | Table row | <tr>...</tr> |
<td> | Table data | <td>Data</td> |
<th> | Table heading | <th>Heading</th> |
<form> | Form बनाने के लिए | <form>...</form> |
<input> | Input field के लिए | <input type="text"> |
Exam Point of View
- Tag और Element का difference पूछा जाता है
- Common tags बहुत important हैं
- Opening और closing tag concept जरूर आता है
- Practical में tags use करना जरूरी होता है