HTML (HyperText Markup Language) is the standard markup language used to create web pages. It is platform-independent, tag-based, and case-insensitive.
HTML (हाइपरटेक्स्ट मार्कअप लैंग्वेज) एक मानक मार्कअप भाषा है जिसका उपयोग वेब पेज बनाने के लिए किया जाता है। यह प्लेटफॉर्म-इंडिपेंडेंट, टैग-आधारित और केस-इनसेंसिटिव होती है।
HTML allows us to design structured documents using tags and elements. Each tag tells the browser how to display the content.
HTML हमें टैग्स और एलिमेंट्स की सहायता से संरचित डॉक्यूमेंट डिज़ाइन करने की अनुमति देता है। प्रत्येक टैग ब्राउज़र को यह बताता है कि सामग्री को कैसे प्रदर्शित किया जाए।
# 🧱 Basic Structure of an HTML Document | HTML डॉक्यूमेंट की संरचना
```html
<!DOCTYPE html>
<html>
<head>
<title>Title of Page</title>
</head>
<body>
<h1>Main Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
This is a simple HTML page structure that includes a header and body content.
यह एक साधारण HTML पेज की संरचना है जिसमें हेडर और बॉडी कंटेंट होता है।
# 🏷️ Common HTML Tags | सामान्य HTML टैग्स
| Tag | Purpose (उद्देश्य) |
| ---------- | ------------------------------------------------ |
| `<html>` | HTML डॉक्यूमेंट की शुरुआत और अंत करता है |
| `<head>` | मेटा जानकारी, स्क्रिप्ट और टाइटल के लिए |
| `<title>` | ब्राउज़र टैब में वेबपेज का शीर्षक दिखाता है |
| `<body>` | मुख्य दृश्य सामग्री को परिभाषित करता है |
| `<applet>` | Java Applet जोड़ने के लिए (HTML5 में deprecated) |
# ✍️ Formatting Tags | फॉर्मेटिंग टैग्स
| Tag | Description (विवरण) |
| ---------- | ------------------------------------------ |
| `<i>` | Italic text (इटैलिक टेक्स्ट) |
| `<b>` | Bold text (बोल्ड टेक्स्ट) |
| `<u>` | Underlined text (रेखांकित टेक्स्ट) |
| `<mark>` | Highlighted text (हाइलाइटेड टेक्स्ट) |
| `<sub>` | Subscript text (सबस्क्रिप्ट टेक्स्ट) |
| `<sup>` | Superscript text (सुपरस्क्रिप्ट टेक्स्ट) |
| `<strong>` | Emphasized bold text (प्रबल बोल्ड टेक्स्ट) |
| `<small>` | Smaller text (छोटा टेक्स्ट) |
| `<ins>` | Inserted text (नया जोड़ा गया टेक्स्ट) |
---
# 📝 Form Tags | फॉर्म टैग्स
HTML forms are used to collect user input.
HTML फॉर्म का उपयोग यूज़र से इनपुट प्राप्त करने के लिए किया जाता है।
| Tag | Purpose (उद्देश्य) |
| ------------ | ------------------------------------------------ |
| `<form>` | HTML फॉर्म तैयार करता है |
| `<input>` | टेक्स्ट बॉक्स, चेकबॉक्स, रेडियो बटन, पासवर्ड आदि |
| `<textarea>` | मल्टीलाइन इनपुट हेतु |
| `<select>` | ड्रॉपडाउन लिस्ट के लिए |
| `<option>` | ड्रॉपडाउन में विकल्प जोड़ने हेतु |
| `<button>` | बटन बनाने के लिए |
| `<label>` | किसी इनपुट के लिए टेक्स्ट लेबल दर्शाता है |
### 📌 Sample Form Code (फॉर्म कोड का उदाहरण):
```html
<form action="thankyou.html" method="post">
Name: <input type="text" name="name"><br>
Password: <input type="password" name="pass"><br>
Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br>
<input type="submit" value="Submit">
</form>
```
---
# 📦 Frame Tags | फ्रेम टैग्स
Used to divide web pages into multiple sections or windows.
वेब पेज को कई हिस्सों में विभाजित करने के लिए फ्रेम टैग्स का प्रयोग किया जाता है।
| Tag | Description (विवरण) |
| ------------ | ---------------------------------------------------------- |
| `<frame>` | एक फ्रेम परिभाषित करता है |
| `<frameset>` | फ्रेम के सेट को परिभाषित करता है |
| `<noframes>` | फ्रेम न सपोर्ट करने वाले ब्राउज़रों के लिए वैकल्पिक कंटेंट |
| `<iframe>` | इनलाइन फ्रेम तैयार करता है |
---
# 🖼️ Image Tags | इमेज टैग्स
| Tag | Purpose (उद्देश्य) |
| -------- | ----------------------------------------- |
| `<img>` | वेबपेज पर इमेज शामिल करता है |
| `<map>` | इमेज मैप को परिभाषित करता है |
| `<area>` | इमेज मैप के क्षेत्रों को परिभाषित करता है |
```html
<img src="winter.jpg" alt="Winter Image" width="300">
```
---
# 🔗 Link Tags | लिंक टैग्स
Used to create hyperlinks.
वेब पेज में एक से दूसरे पेज पर जाने के लिए लिंक टैग्स का प्रयोग होता है।
| Tag | Description (विवरण) |
| -------- | ------------------------------------ |
| `<a>` | हाइपरलिंक बनाने के लिए |
| `<link>` | CSS जैसी बाहरी फाइल्स को जोड़ने हेतु |
```html
<a href="about.html">About Us</a>
```
---
# 📋 List Tags | लिस्ट टैग्स
| Tag | Purpose (उद्देश्य) |
| ------ | -------------------------------- |
| `<ul>` | अनऑर्डर्ड लिस्ट (unordered list) |
| `<ol>` | ऑर्डर्ड लिस्ट (ordered list) |
| `<li>` | लिस्ट आइटम |
| `<dl>` | डेफिनिशन लिस्ट |
| `<dt>` | डेफिनिशन टर्म (शब्द) |
| `<dd>` | डेफिनिशन विवरण |
---
# 📊 Table Tags | टेबल टैग्स
| Tag | Purpose (उद्देश्य) |
| ----------- | --------------------------------- |
| `<table>` | टेबल बनाता है |
| `<tr>` | टेबल की एक रो बनाता है |
| `<th>` | टेबल हैडर सेल तैयार करता है |
| `<td>` | टेबल डाटा सेल तैयार करता है |
| `<caption>` | टेबल का शीर्षक (कैप्शन) जोड़ता है |
```html
<table border="1">
<caption>Student Data</caption>
<tr><th>Name</th><th>Class</th></tr>
<tr><td>Ravi</td><td>10th</td></tr>
</table>
```
---
# 🎨 Style Tags | स्टाइल टैग्स
CSS can be applied using the `<style>` tag within HTML documents.
HTML डॉक्यूमेंट में स्टाइल लागू करने के लिए `<style>` टैग का प्रयोग होता है।
```html
<style>
p { color: red; font-size: 20px; }
</style>
```
---
# 📚 Section Tags | सेक्शन टैग्स
| Tag | Purpose (उद्देश्य) |
| ----------- | --------------------------------------- |
| `<div>` | ब्लॉक लेवल सेक्शन बनाता है |
| `<span>` | इनलाइन लेवल कंटेनर बनाता है |
| `<section>` | डॉक्यूमेंट के विभागों को दर्शाने के लिए |
---
# 📜 Scripting Tags | स्क्रिप्टिंग टैग्स
Used for embedding scripts like JavaScript.
HTML में JavaScript जैसी स्क्रिप्ट्स जोड़ने हेतु टैग्स का प्रयोग होता है।
```html
<script>
alert("Welcome to HTML World!");
</script>
<noscript>
Your browser does not support JavaScript.
</noscript>
```
---
# 🚀 Conclusion | निष्कर्ष
HTML is the foundational language for web development. With HTML5, we now have richer media support, semantic tags, and better integration with JavaScript and CSS.
HTML वेब विकास की आधारशिला है। HTML5 के साथ अब हमें बेहतर मीडिया सपोर्ट, सेमान्टिक टैग्स और JavaScript व CSS के साथ बेहतर समन्वय मिलता है।
HTML अकेले नहीं, बल्कि CSS और JavaScript के साथ मिलकर एक पूर्ण वेबसाइट तैयार करता है।
