Container & Empty Tags, Basic HTML Elements, Headings, Paragraphs, Line Breaks, Horizontal Rules, and Comments in HTML.

Siddharth Sharma
Feb 4, 2025
2 min read

नमस्ते Students! 🌟 आज हम HTML के कुछ basic elements सीखेंगे, जैसे Container/Empty Tags, Headings, Paragraphs, Line Breaks, Horizontal Rules, और Comments. ये सभी concepts बहुत simple हैं और हर वेबपेज के लिए जरूरी हैं। Let’s start!

1. Container Tags vs Empty Tags

Container Tags

ये वे टैग्स होते हैं जिनमें opening tag + content + closing tag होता है।उदाहरण (Example):

<p>This is a paragraph.</p>  
<h1>Heading</h1>  
<div>This is a div container.</div>

Run HTML

Empty Tags

ये टैग्स बिना closing tag के होते हैं। इन्हें self-closing tags भी कहते हैं।उदाहरण (Example):

<br>          <!-- Line Break -->  
<hr>          <!-- Horizontal Rule -->  
<img src="...">  <!-- Image Tag -->

2. Basic HTML Elements

Headings (शीर्षक)

HTML में 6 levels के headings होते हैं: <h1> (सबसे बड़ा) से <h6> (सबसे छोटा)।Code Example:

<h1>Main Heading</h1>  
<h2>Subheading</h2>  
<h3>Smaller Heading</h3>

Paragraphs (पैराग्राफ)

पैराग्राफ के लिए <p> tag use करते हैं।Code Example:

<p>This is a paragraph. यह हिंदी में एक पैराग्राफ है।</p>

Run HTML

Line Breaks (लाइन बदलें)

<br> tag से text को अगली line में ले जाएँ।Code Example:

<p>First line<br>Second line</p>

Horizontal Rules (क्षैतिज रेखा)

<hr> tag से एक horizontal line बनाएँ।Code Example:

<p>Section 1</p>  
<hr>  
<p>Section 2</p>

3. Comments in HTML (टिप्पणियाँ)

Comments वे lines होती हैं जो browser display नहीं करता। इन्हें code को समझने के लिए use करते हैं।Syntax:

<!-- यह एक comment है -->

Code Example:

<!-- Header Section Starts -->  
<header>  
  <h1>My Website</h1>  
</header>  
<!-- Header Section Ends -->

Full HTML Program Example

यहाँ एक complete HTML file का उदाहरण है जिसमें सभी concepts शामिल हैं:

<!DOCTYPE html>  
<html>  
<head>  
  <title>HTML Basics</title>  
</head>  
<body>  
  <!-- Main Heading -->  
  <h1>Welcome to My Page</h1>  

  <!-- Paragraph with Line Break -->  
  <p>This is a paragraph.<br>This text is in a new line.</p>  

  <!-- Horizontal Rule -->  
  <hr>  

  <!-- Subheading -->  
  <h2>About Me</h2>  
  <p>मेरा नाम राहुल है।</p>  

  <!-- Empty Tag Example (Image) -->  
  <img src="photo.jpg" alt="My Photo">  
</body>  
</html>

Key Takeaways

Container Tags: जोड़े में आते हैं (e.g., <p>...</p>).
Empty Tags: अकेले होते हैं (e.g., <br>).
Headings: <h1> से <h6> तक।
Comments:  से code को explain करें।

Practice Time!

एक HTML file बनाएँ और सभी headings (h1 to h6) add करें।
Paragraphs, line breaks, और horizontal rules का use करके एक poem लिखें।
अपने code में comments डालें ताकि दूसरे उसे आसानी से समझ सकें।

याद रखें: HTML सीखना like learning ABCs है। Once you master these basics, आप amazing websites बना सकते हैं! 😊