HTML संरचना और टैग्स - HTML Structure and Tags in Hindi

HTML: संरचना, टैग्स और कार्य

वेब डेवलपमेंट की मूलभूत भाषा की पूरी जानकारी

HTML (HyperText Markup Language) एक मार्कअप भाषा है जिसका उपयोग वेब पेजों को बनाने के लिए किया जाता है। इसमें विभिन्न टैग्स का प्रयोग कर के पेज की संरचना तैयार की जाती है। यह वेब पेज की हड्डी (skeleton) होती है, जिस पर डिजाइन (CSS) और कार्यक्षमता (JavaScript) लागू होती है।

नोट: HTML5 वर्तमान में उपयोग होने वाला HTML का नवीनतम संस्करण है, जिसे 2014 में लॉन्च किया गया था।

HTML डॉक्यूमेंट की बेसिक संरचना

एक सामान्य HTML डॉक्यूमेंट की संरचना इस प्रकार होती है:

<!DOCTYPE html>
<html lang="hi">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>पेज का शीर्षक</title>
  </head>
  <body>
    <h1>यह मुख्य शीर्षक है</h1>
    <p>यह एक अनुच्छेद है।</p>
  </body>
</html>

व्याख्या:

<!DOCTYPE html>: ब्राउज़र को HTML5 का संकेत देता है।
<html>: पूरा HTML डॉक्यूमेंट इसी के अंदर होता है। lang एट्रिब्यूट भाषा निर्धारित करता है।
<head>: मेटा जानकारी जैसे टाइटल, स्टाइल, स्क्रिप्ट आदि।
<body>: मुख्य कंटेंट जिसमें टेक्स्ट, इमेज, लिंक आदि होते हैं।

टिप: हमेशा lang एट्रिब्यूट का उपयोग करें और viewport मेटा टैग जोड़ें ताकि पेज मोबाइल डिवाइस पर सही तरीके से दिखे।

HTML टैग्स क्या होते हैं?

HTML टैग्स वे निर्देश होते हैं जिनके माध्यम से ब्राउज़र को बताया जाता है कि कोई सामग्री कैसे दिखाई जाएगी। अधिकांश टैग्स एक ओपनिंग टैग <tag> और एक क्लोजिंग टैग </tag> में होते हैं।

उदाहरण: <p>यह एक अनुच्छेद है</p>

HTML टैग्स में एट्रिब्यूट्स भी हो सकते हैं जो अतिरिक्त जानकारी प्रदान करते हैं:

<a href="https://example.com" target="_blank">उदाहरण वेबसाइट</a>

यहाँ href और target एट्रिब्यूट्स हैं जो लिंक के व्यवहार को नियंत्रित करते हैं।

HTML के प्रमुख टैग्स और उनके प्रकार

प्रकार	टैग्स	विवरण
डॉक्यूमेंट स्ट्रक्चर	`<!DOCTYPE>, <html>, <head>, <body>`	पूरे डॉक्यूमेंट की मूल संरचना
हेडिंग्स	`<h1> से <h6>`	शीर्षकों के लिए, h1 सबसे महत्वपूर्ण
टेक्स्ट फॉर्मेटिंग	`<p>, <strong>, <em>, <span>`	टेक्स्ट को प्रदर्शित और फॉर्मेट करने के लिए
लिंक्स और इमेज	`<a>, <img>`	हाइपरलिंक्स और चित्र जोड़ने के लिए
लिस्ट्स	`<ul>, <ol>, <li>, <dl>`	सूचियाँ बनाने के लिए
टेबल्स	`<table>, <tr>, <th>, <td>`	टेबुलर डेटा प्रदर्शित करने के लिए
फॉर्म्स	`<form>, <input>, <button>, <select>`	उपयोगकर्ता इनपुट के लिए
सेमेंटिक टैग्स	`<header>, <nav>, <section>, <article>`	HTML5 में पेश किए गए सार्थक टैग्स

सेल्फ-क्लोज़िंग टैग्स

कुछ HTML टैग्स ऐसे होते हैं जिन्हें बंद करने की आवश्यकता नहीं होती, इन्हें self-closing टैग्स कहते हैं। ये टैग्स अपने आप बंद हो जाते हैं:

<br />: लाइन ब्रेक के लिए
<img src="image.jpg" alt="विवरण" />: चित्र जोड़ने के लिए
<hr />: क्षैतिज रेखा डालने के लिए
<input type="text" name="username" />: फॉर्म इनपुट के लिए
<meta charset="UTF-8" />: मेटा जानकारी के लिए
<link rel="stylesheet" href="style.css" />: एक्सटर्नल रिसोर्स लिंक करने के लिए

नोट: HTML5 में आप self-closing टैग्स को <br> या <br /> दोनों तरीकों से लिख सकते हैं, दोनों सही हैं।

टैग्स का नेस्टिंग और इंडेंटेशन

HTML में टैग्स को सही क्रम में और उचित spacing (indentation) के साथ लिखना आवश्यक होता है, जिससे कोड पढ़ना और समझना आसान हो:

<!DOCTYPE html>
<html>
  <head>
    <title>मेरी वेबसाइट</title>
  </head>
  <body>
    <header>
      <h1>वेबसाइट का शीर्षक</h1>
      <nav>
        <ul>
          <li><a href="/">होम</a></li>
          <li><a href="/about">हमारे बारे में</a></li>
        </ul>
      </nav>
    </header>
    
    <main>
      <article>
        <h2>लेख का शीर्षक</h2>
        <p>लेख की सामग्री...</p>
      </article>
    </main>
  </body>
</html>

इंडेंटेशन के नियम:

जब भी एक टैग दूसरे टैग के अंदर हो, उसे 2 स्पेस या 1 टैब से इंडेंट करें
समान स्तर के टैग्स को एक ही इंडेंटेशन पर रखें
क्लोजिंग टैग को उसी इंडेंटेशन पर रखें जहाँ ओपनिंग टैग है

HTML5 के नए सेमेंटिक टैग्स

HTML5 में कुछ नए सार्थक (semantic) टैग्स पेश किए गए जो वेब पेज की संरचना को बेहतर ढंग से परिभाषित करते हैं:

<header>: पेज या सेक्शन का हेडर
<nav>: नेविगेशन लिंक्स
<main>: पेज का मुख्य कंटेंट
<section>: पेज का एक खंड
<article>: स्वतंत्र कंटेंट जैसे ब्लॉग पोस्ट
<aside>: साइडबार या अतिरिक्त जानकारी
<footer>: पेज या सेक्शन का फुटर
<figure> और <figcaption>: इमेज या मीडिया के साथ कैप्शन

फायदे: सेमेंटिक टैग्स का उपयोग करने से सर्च इंजन आपकी वेबसाइट को बेहतर समझ पाते हैं, एक्सेसिबिलिटी बढ़ती है, और कोड अधिक व्यवस्थित होता है।

निष्कर्ष और अगले कदम

HTML एक वेबपेज की नींव है। इसकी सही संरचना और टैग्स का सही उपयोग वेबसाइट की गुणवत्ता, प्रदर्शन और SEO पर सीधा असर डालता है।

मुख्य सीख:

हमेशा DOCTYPE डिक्लेरेशन और सही HTML संरचना का उपयोग करें
सेमेंटिक HTML5 टैग्स का प्रयोग करें
कोड को साफ और इंडेंटेड रखें
सभी इमेज के लिए alt टेक्स्ट प्रदान करें
फॉर्म एलिमेंट्स को सही तरीके से लेबल करें

अगले कदम:

CSS सीखें - वेब पेजों को स्टाइल करने के लिए
JavaScript सीखें - इंटरैक्टिविटी जोड़ने के लिए
एक्सेसिबिलिटी बेस्ट प्रैक्टिसेज सीखें
SEO बेस्ट प्रैक्टिसेज को समझें

HTML: संरचना, टैग्स और कार्य - HTML Structure and Tags in Hindi