HTML के पहले कदम - पाठ 1 - टैग h1-h6, p, strong

11/10/2025, by Ivan

कैसे HTML दस्तावेज़ बनाए जाते हैं, इसके बारे में पढ़ें HTML – पहले कदम में।

पिछले पाठ में हमने अपना पहला HTML दस्तावेज़ बनाया था।

<html>
  <head>
    <title>मेरा पहला HTML-दस्तावेज़</title>
  </head>
  <body>
    HTML मेरे पहले कदम
  </body>
</html>

इस पाठ में हम अपने दस्तावेज़ को टेक्स्ट से भरेंगे। इसके लिए हम HTML का सबसे सामान्य टैग <p></p> जोड़ेंगे। याद रखें कि टैग लैटिन अक्षरों में लिखे जाते हैं, यह रूसी “р” नहीं है। टैग <p> का अर्थ “paragraph” यानी पैराग्राफ (अनुच्छेद) होता है।

HTML में सारा टेक्स्ट किसी न किसी टैग के भीतर होना चाहिए। इसलिए चलिए अपने दस्तावेज़ में टेक्स्ट को <p> टैग के अंदर डालते हैं:

<html>
  <head>
    <title>मेरा पहला HTML-दस्तावेज़</title>
  </head>
  <body>
    <p>HTML मेरे पहले कदम</p>
  </body>
</html>

दिखने में हमारे दस्तावेज़ में कोई खास बदलाव नहीं होगा, लेकिन अब HTML की संरचना अधिक सही हो गई है। हम इसमें और कुछ पैराग्राफ भी जोड़ सकते हैं:

<html>
  <head>
    <title>मेरा पहला HTML-दस्तावेज़</title>
  </head>
  <body>
    <p>HTML मेरे पहले कदम</p>
    <p>हर शिकारी चाहता है</p>
    <p>जानना कि कहाँ</p>
    <p>बैठा है तीतर</p>
  </body>
</html>

जैसा कि आप देख सकते हैं, सब कुछ बहुत सरल है — <p> टैग एक ही स्तर पर रखे जाते हैं।

अब अपने दस्तावेज़ में एक शीर्षक (heading) जोड़ते हैं। HTML में शीर्षक क्यों ज़रूरी हैं? पहली बात, शीर्षक टेक्स्ट को संरचित करते हैं, जिससे पढ़ना और समझना आसान होता है। दूसरी बात, शीर्षक SEO (सर्च इंजन ऑप्टिमाइज़ेशन) के लिए बहुत महत्वपूर्ण हैं। इसलिए अपने HTML टेक्स्ट में शीर्षकों को नज़रअंदाज़ नहीं करना चाहिए।

शीर्षकों के लिए हम <h1>, <h2>, <h3>, <h4>, <h5>, <h6> टैग्स का उपयोग करते हैं। अक्षर “h” (header) के बाद की संख्या शीर्षक के महत्व को दर्शाती है। <h1> शीर्षक पेज पर केवल एक बार होना चाहिए — यह बताता है कि पेज किस बारे में है। इसके बाद <h2>, फिर <h3> और आगे इसी तरह छोटे शीर्षक उपयोग किए जा सकते हैं। आम तौर पर छह स्तरों के शीर्षक पर्याप्त होते हैं।

<html>
  <head>
    <title>मेरा पहला HTML-दस्तावेज़</title>
  </head>
  <body>
    <h1>मेरा पहला HTML-दस्तावेज़</h1><br>
    <h2>मेरे पहले कदम</h2>
    <p>HTML मेरे पहले कदम</p>
    <h3>एक और कदम</h3><br>
    <h2>और ऐसे कहते हैं</h2>
    <p>हर शिकारी चाहता है</p>
    <p>जानना कि कहाँ</p>
    <p>बैठा है तीतर</p>
  </body>
</html>

आपने शायद ध्यान दिया होगा कि “h” टैग का आकार उसकी संख्या पर निर्भर करता है — जितनी छोटी संख्या, उतना बड़ा शीर्षक। इस प्रकार ब्राउज़र दिखाता है कि h1 सबसे महत्वपूर्ण शीर्षक है।

h1–h6 टैग्स की एक और विशेषता यह है कि वे डिफ़ॉल्ट रूप से बोल्ड (गाढ़े) होते हैं। हम टेक्स्ट को बोल्ड करने के लिए <strong> टैग का भी उपयोग कर सकते हैं:

<html>
  <head>
    <title>मेरा पहला HTML-दस्तावेज़</title>
  </head>
  <body>
    <h1>मेरा पहला HTML-दस्तावेज़</h1>
    <h2>मेरे पहले कदम</h2>
    <p>HTML मेरे पहले कदम</p>
    <h3>एक और कदम</h3>
    <h2>और ऐसे कहते हैं</h2>
    <p>हर <strong>शिकारी</strong> चाहता है</p>
    <p>जानना कि कहाँ</p>
    <p>बैठा है तीतर</p>
  </body>
</html>

ध्यान दें कि टेक्स्ट को बोल्ड करने के लिए हम <strong> टैग का उपयोग करते हैं। <p> टैग के अंदर <h1>–<h6> टैग्स का उपयोग नहीं करना चाहिए! यह याद रखें — यदि आप ऐसा करते हैं, तो यह आपकी वेबसाइट की SEO रैंकिंग को Google पर नुकसान पहुँचा सकता है।

सही तरीका इस प्रकार है:

<p>बहुत <strong>गाढ़ा</strong> टेक्स्ट</p>

और यह तरीका गलत है:

<p><h3>ऐसा मत करें</h3>!</p>

मुझे लगता है अब आप अपनी HTML पेज पर जितना चाहें उतना टेक्स्ट जोड़ सकते हैं, उसे बोल्ड कर सकते हैं, और सबसे ज़रूरी बात — यह सब सही ढंग से कर सकते हैं।

एक्स्ट्रा ब्लॉक टाइप्स (EBT) - नया लेआउट बिल्डर अनुभव❗

❗एक्स्ट्रा पैराग्राफ टाइप्स (EPT) - नया पैराग्राफ्स अनुभव

HTML के पहले कदम - पाठ 1 - टैग h1-h6, p, strong