नमस्ते मित्रों एक बार फिर से originclasses.com पे आपका स्वागत है. मै आशा करता हूँ की आपको HTML समझ में आ रही होंगी. आज के टुटोरिअल में html elements के बारे में जानेगे और कुछ कोड का लाइव व्यू भी देखेंगे. समय ज्यादा ना लेते हुए टुटोरिअल की शुरुआत करते हैं.

HTML Elements:

HTML elements सामान्य तौर पर , शुरू starting tag और समाप्त end tag से होते हैं. इनके बीच में हम कंटेंट लिखते हैं:

<tagname>यहां कंटेंट लिखा जाता है….</tagname>

starting tag से लेकर end tag के बीच वाले भाग HTML elements कहलाते हैं.

<p>ये  पैराग्राफ है.</p>

कुछ ऐसे elements होते हैं जिनमें कोई कंटेंट्स नहीं होते हैं. ऐसे elements के end tag नहीं होते हैं. जैस- <br> tag लाइन ब्रेक के लिए होता है जिसमे कोई end tag नहीं होता.

<p>ये एक पैराग्राफ है और<br>ये लाइन ब्रेक होने के बाद वाला पैराग्राफ है.</p>

कोशिश करें

Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br>    

Nested HTML Elements:

HTML elements को नेस्टेड किया जा सकता है. नेस्टेड का मतलब है की elements के अन्दर elements रखे जा सकते हैं.

  • सभी elements HTML elements के अन्दर नेस्टेड होते हैं.
  • निचे चार HTML elements दिए गए हैं जो नेस्टेड हैं.

Example:

<!DOCTYPE html>

<html>

 <body>

  <h1>Origin Classes</h1>

  <p>I like to learn on Origin Classes.</p>

 </body>

</html>

कोशिश करें

Explanation:

<html> element पुरे डाक्यूमेंट्स को define करते हैं.

  • इसमें भी start tag  <html> तथा end tag </html> होते हैं.
  • अन्य elements <body> tag में नेस्टेड है.
<html>

<body>

<h1>Origin Classes</h1>

<p>I like to learn on Origin Classes.</p>

</body>

</html>

<body> element डॉक्यूमेंट के body element को define करता है.

  • इसमें भी start tag  <body> तथा end tag </body> होते हैं.
  • इनके अन्दर दो अन्य HTML elements हैं – <h1> तथा <p>
<body>

<h1>Origin Classes- Heading</h1>

<p>I like to learn on Origin Classes.</p>

</body>

<h1> element हेडिंग को define करता है.

  • इसमें भी start tag  <h1> तथा end tag </h1> होते हैं.
  • इनके अन्दर जो लाइन लिखा है वो element कंटेंट है- Origin Classes
<h1>Origin Classes</h1>

<p> element पैराग्राफ को define करता है.

  • इसमें भी start tag  <p> तथा end tag </p> होते हैं.
  • इनके अन्दर जो लाइन लिखा है वो element कंटेंट है- I like to learn on Origin Classes.
<p>I like to learn on Origin Classes.</p>

End tag देना ना भूलें:

हालांकि end tag ऑप्शनल है. अगर आप end tag देना भूल जाते हैं, तो फिर भी ब्राउज़र इसको सही दिखायेगा:

Example:

<!DOCTYPE html>

<html>

<body>

<p>ये पैराग्राफ है </p>

<p>ये एक पैराग्राफ है जिसमे end tag नहीं है.

</body>

</html>

कोशिश करें

लेकिन इसमें विश्वाश न रखें Error भी आ सकता है. बेहतर परिणाम के लिए end tag का भी उपयोग करें.

Empty HTML Elements:

वैसे HTML elements जिनमे कोई कंटेंट्स नहीं होते Empty elements कहलाते हैं.

<br> एक empty element है जो लाइन ब्रेक के लिए प्रयोग किया जाता है, इसमें end tag नहीं होता है.

Empty element को हम start tag में  end tag की तरह क्लोज कर सकते हैं : <br />

हालांकि HTML 5 में empty element को close ना भी करें तो चलेगा लेकिन अगर पूरी सुनिश्चितता चाहते हैं तो close कर सकते है.

हमेशा Lowercase Tags का प्रयोग करें:

हमेशा lowercase letter का उपयोग करें. वैसे HTML 5 में इसकी जरुरत नहीं है. <p> की जगह पे <P> भी दे सकते हैं. वर्ल्ड वाइड कंसोर्टियम lowercase recommend करते हैं.

इस पोस्ट में बस इतना काफी है आगे की जानकारी अगले पोस्ट में लेंगे. अगर कोई भी परेशानी हो रही हो तो कमेंट बॉक्स में आप अपना सन्देश छोड़ सकते हैं और चेक बॉक्स सेलेक्ट करके आप हमारे टुटोरिअल को सीधे अपने मेल पे भी प्राप्त कर सकते हैं.

originclasses.com पे Pradeep Karn के साथ बने रहने के लिए शुक्रिया!

Leave a Reply

Your email address will not be published. Required fields are marked *