HTML Paragraphs
Paragraphs HTML में text content के sections होते हैं। ये browser में अलग अलग block के रूप में दिखते हैं। Simply बोलें तो — Paragraph = Text का छोटा block जो एक idea या content को represent करता है।
Syntax:
<p>Your text goes here</p>2. Example: Basic Paragraph
<p>Hello! This is my first paragraph in HTML.</p>
<p>HTML is fun and easy to learn.</p>Output:
Hello! This is my first paragraph in HTML.
HTML is fun and easy to learn.
Notice: Paragraphs browser में automatically new line लेते हैं।
3. Paragraph Attributes
Paragraph tag <p> में कुछ attributes use किए जा सकते हैं:
| Attribute (विशेषता) | Description (विवरण) | Example (उदाहरण) |
|---|---|---|
| align | Text alignment (टेक्स्ट संरेखण) | <p align="center">Centered Text</p> |
| class | CSS class assign (CSS क्लास असाइन) | <p class="intro">Hello</p> |
| id | Unique identifier (अद्वितीय पहचानकर्ता) | <p id="para1">Text</p> |
| style | Inline CSS (इनलाइन CSS) | <p style="color:red;">Red Text</p> |
| title | Tooltip (टूलटिप) | <p title="Hover Text">Text</p> |
Example:
<p id="intro" class="highlight" style="color:blue;" title="Hello Paragraph"> Welcome to my website! </p>4. Line Breaks in Paragraphs
Browser में new line automatically नहीं आती अगर आपने <br> use नहीं किया। Use <br> for manual line breaks.
Example:
<p>This is line one.<br>This is line two.<br>This is line three.</p>Output
This is line one.
This is line two.
This is line three.
5. Paragraphs में Text Formatting
Paragraphs में आप text को bold, italic, underline, highlight कर सकते हैं।
Example:
<p>
This is a <b>bold</b> word,
this is <i>italic</i>,
this is <u>underlined</u>,
and this is <mark>highlighted</mark>.
</p>6. Nested Paragraphs (क्या कर सकते हैं?)
<p>Outer paragraph <p>Inner paragraph</p></p><p>Outer paragraph</p>
<p>Another paragraph</p>7. Paragraphs + Headings + Lists
Paragraphs अक्सर headings और lists के साथ use होते हैं।
Example:
<h1>My Daily Routine</h1>
<p>Here is how I spend my day:</p>
<ul>
<li>Wake up at 6 AM</li>
<li>Do Yoga</li>
<li>Have Breakfast</li>
<li>Start Coding Practice</li>
</ul>
<p>End of day: Relax and sleep by 10 PM</p>8. Paragraphs + Links + Images
Paragraphs के अंदर links और images भी use कर सकते हैं।
Example:
<p>
Visit my favorite website
<a href="https://www.youtube.com" target="_blank">YouTube</a>
</p>
<p>
Here is a beautiful image:<br>
<img src="nature.jpg" alt="Nature" width="400">
</p>9. Paragraphs + Inline Elements
Paragraphs में आप inline elements जैसे <span>, <strong>, <em> भी use कर सकते हैं।
Example:
<p>
This is a normal text and
<strong>this text is strong</strong>
and <em>this text is emphasized</em>.
</p>10. Paragraphs with CSS (Inline + Internal)
<p style="color:green; font-size:18px;">Green Paragraph with bigger text</p><head>
<style>
.highlight {
color: red;
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<p class="highlight">This paragraph uses CSS class.</p>
</body>11. Multiple Paragraphs Example
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<h1>About Me</h1>
<p>Hello! My name is Jaswant. I am learning HTML, CSS, and JavaScript.</p>
<p>I enjoy coding and building websites. I practice daily to improve my skills.</p>
<p>This is my personal blog where I share tutorials and tips.</p>
</body>
</html>12. Paragraphs Best Practices
- Each idea → Separate paragraph
- Avoid nesting paragraphs
- Use inline elements for styling instead of breaking paragraphs
- Use semantic headings + paragraphs for hierarchy
- Use class/id for styling instead of inline style
13. Quick Summary
| अवधारणा (Concept) | विवरण (Description) |
|---|---|
| <p> | पैराग्राफ एलिमेंट (Paragraph element) |
| <br> | पैराग्राफ के अंदर लाइन ब्रेक (Line break inside paragraph) |
| इनलाइन एलिमेंट्स (Inline elements) | <b>, <i>, <u>, <em>, <strong>, <mark> |
| एट्रिब्यूट्स (Attributes) | id, class, style, title, align |
| सर्वोत्तम अभ्यास (Best Practice) | 1 पैराग्राफ = 1 आईडिया, नेस्टिंग से बचें, स्टाइलिंग के लिए CSS का उपयोग करें (1 paragraph = 1 idea, avoid nesting, use CSS for styling) |