🔷 1. Introduction:
In HTML, different tags are used to format content.
Some tags come in pairs – with an opening and closing.
Some tags are single and self-closing.
Understanding the difference between paired and singular tags is important in web design.
🔷 2. Definition:
🔹 Paired Tags:
These tags have two parts —
- Opening tag:
<tag> - Closing tag:
</tag>
They enclose some content between them.
Example:
<p>This is a paragraph.</p>🔹 Singular Tags (Empty Tags):
These tags have only one part and don’t enclose content.
They are also called self-closing tags.
Example:
<br>
<img src="pic.jpg" alt="Image">🔷 3. Real Life Example:
When you write a message and want to skip a line, you use <br> (singular tag).
When you want to show a full paragraph, you use <p>...</p> (paired tag).
🔷 4. Practical Use:
✅ Common Paired Tags:
<html>...</html>– HTML document<head>...</head>– Head section<title>...</title>– Title in browser tab<body>...</body>– Main page content<h1>...</h1>– Headings<p>...</p>– Paragraphs<a>...</a>– Links
✅ Common Singular Tags:
<br>– Line break<hr>– Horizontal line<img>– Image<input>– Form input<meta>– Meta info
🔷 5. Output Example:
<h1>My Page</h1>
<p>This is a paragraph.</p>
<img src="photo.jpg" alt="My Photo">
<br>
<p>Second paragraph after line break.</p>
What You See in Browser:
- A heading: My Page
- A paragraph
- An image
- A line break
- Another paragraph
🔷 6. Advantages:
- Keeps code well-organized
- Helps in structuring the layout clearly
- Singular tags save space and reduce code length
- Easy to nest and design elements properly
- Used in forms, media, layout, etc.
🔷 7. Limitations:
- Incorrect use may cause display issues
- Missing a closing tag in paired tags can break layout
- Self-closing tags need to be used carefully
🔷 1. परिचय (Introduction):
HTML में कंटेंट को व्यवस्थित करने के लिए अलग-अलग टैग्स का प्रयोग किया जाता है।
कुछ टैग्स दो भागों में होते हैं – ओपनिंग और क्लोजिंग।
कुछ टैग्स अकेले ही पूरे काम को पूरा करते हैं।
इन्हें Paired Tags और Singular Tags (या Empty Tags) कहा जाता है।
इन्हें समझना वेबपेज डिज़ाइन के लिए ज़रूरी है।
🔷 2. परिभाषा (Definition):
🔹 Paired Tags क्या होते हैं?
ऐसे टैग जिनमें एक ओपनिंग टैग <tag> और एक क्लोजिंग टैग </tag> होता है।
इनके बीच कंटेंट लिखा जाता है।
उदाहरण:
<p>यह एक पैराग्राफ है।</p>🔹 Singular Tags क्या होते हैं?
ये टैग्स अकेले होते हैं।
इनका क्लोजिंग टैग नहीं होता।
इन्हें Self-closing या Empty Tags भी कहते हैं।
उदाहरण
<img src=”image.jpg” alt=”चित्र”>
🔷 3. वास्तविक जीवन उदाहरण (Real Life Example):
जब आप एक मैसेज लिखते हैं और नई लाइन पर आना चाहते हैं, तो <br> का प्रयोग करते हैं।
जब आप कोई अनुच्छेद दिखाना चाहते हैं, तो <p>...</p> टैग का उपयोग होता है।
🔷 4. प्रयोगात्मक उपयोग (Practical Use):
✅ आम Paired Tags:
<html>...</html>– पूरी HTML फाइल<head>...</head>– हेड सेक्शन<title>...</title>– पेज का टाइटल<body>...</body>– मुख्य कंटेंट<h1>...</h1>– शीर्षक<p>...</p>– पैराग्राफ<a>...</a>– लिंक
✅ आम Singular Tags:
<br>– लाइन ब्रेक<hr>– क्षैतिज रेखा<img>– चित्र<input>– इनपुट फ़ील्ड<meta>– मेटा जानकारी
🔷 5. आउटपुट उदाहरण (Output Example):
<h1>मेरा पेज</h1>
<p>यह एक पैराग्राफ है।</p>
<img src="photo.jpg" alt="मेरी फोटो">
<br>
<p>दूसरा पैराग्राफ लाइन ब्रेक के बाद।</p>ब्राउज़र में जो दिखेगा:
- एक हेडिंग: मेरा पेज
- एक पैराग्राफ
- एक चित्र
- एक लाइन ब्रेक
- दूसरा पैराग्राफ
🔷 6. लाभ (Advantages):
- कोड को व्यवस्थित और स्पष्ट बनाते हैं
- कंटेंट को सही तरीके से दिखाने में मदद करते हैं
- Singular tags कोड को छोटा रखते हैं
- आसान नेस्टिंग (nesting) संभव होती है
- फॉर्म, इमेज और मीडिया में ज़रूरी
🔷 7. सीमाएँ (Limitations):
- टैग को सही तरीके से प्रयोग करना आवश्यक है
- Paired टैग में क्लोजिंग टैग भूलने से डिज़ाइन बिगड़ सकता है
- Self-closing टैग को सावधानी से लगाना होता है
