📘 Paragraph Alignment in HTML
🔷 1. Introduction:
In HTML, we can align paragraph text to the left, right, center, or justify using alignment attributes or CSS.
It helps in organizing and beautifying the content layout on a webpage.
🔷 2. Definition:
Paragraph alignment means setting the position of text inside a paragraph.
It can be:
- Left aligned (default)
- Right aligned
- Center aligned
- Justify (text spreads evenly across width)
🔷 3. Syntax (HTML4 – using align attribute):
<p align="left">This is left aligned text.</p>
<p align="right">This is right aligned text.</p>
<p align="center">This is center aligned text.</p>
<p align="justify">This is justified text.</p>
⚠️ Note: align
attribute is deprecated in HTML5. Use CSS instead.
🔷 4. Syntax (HTML5 using CSS):
<p style="text-align: left;">Left aligned</p>
<p style="text-align: right;">Right aligned</p>
<p style="text-align: center;">Center aligned</p>
<p style="text-align: justify;">Justified text</p>
🔷 5. Output Preview:
Alignment | Example Output |
---|---|
Left | Text starts from left margin (default) |
Right | Text ends at right margin |
Center | Text appears in the middle |
Justify | Text fills both left and right margins evenly |
🔷 6. Real Life Example:
Suppose you’re writing a biography. You might:
- Left align intro paragraph
- Center align a title
- Justify long story content
<h2 style="text-align: center;">APJ Abdul Kalam</h2>
<p style="text-align: justify;">
Dr. APJ Abdul Kalam was an Indian scientist and the 11th President of India...
</p>
🔷 7. Use Table for Summary:
Alignment | Description | HTML (CSS Method) |
---|---|---|
Left | Default, left side | text-align: left; |
Right | Aligns to right | text-align: right; |
Center | Centered text | text-align: center; |
Justify | Full width fit | text-align: justify; |
🔷 8. Where It’s Used:
- Blog posts
- News articles
- Business pages
- Quotes or biographies
- Content formatting in forms
🔷 9. Advantages:
- Improves readability
- Makes webpage neat and professional
- Helps focus on important sections
- Works in all browsers
🔷 10. Limitations:
align
is not supported in HTML5- Must use CSS for modern design
- Overuse can reduce readability
📗 HTML में Paragraph Alignment (अनुच्छेद संरेखण)
🔷 1. परिचय (Introduction):
HTML में हम पैराग्राफ के टेक्स्ट को बाएं (left), दाएं (right), बीच में (center), या फैलाकर (justify) दिखा सकते हैं।
इससे कंटेंट साफ-सुथरा और पेशेवर लगता है।
🔷 2. परिभाषा (Definition):
Paragraph Alignment का मतलब है – पैराग्राफ के अंदर टेक्स्ट को किस दिशा में दिखाना है।
मुख्यतः चार प्रकार के Alignment होते हैं:
- Left (बाएं) — डिफ़ॉल्ट
- Right (दाएं)
- Center (बीच में)
- Justify (दोनों तरफ फैला हुआ)
🔷 3. सिंटैक्स (HTML4 – पुराना तरीका):
<p align="left">यह बाएं साइड का टेक्स्ट है।</p>
<p align="right">यह दाएं साइड का टेक्स्ट है।</p>
<p align="center">यह सेंटर में है।</p>
<p align="justify">यह जस्टिफाई टेक्स्ट है।</p>
⚠️ नोट: HTML5 में align
एट्रिब्यूट deprecated (पुराना) हो गया है। अब CSS का प्रयोग करना बेहतर है।
🔷 4. HTML5 में CSS से Alignment:
<p style="text-align: left;">यह बाएं संरेखित टेक्स्ट है।</p>
<p style="text-align: right;">यह दाएं संरेखित टेक्स्ट है।</p>
<p style="text-align: center;">यह सेंटर में टेक्स्ट है।</p>
<p style="text-align: justify;">यह जस्टिफाइड टेक्स्ट है जो दोनों किनारों तक फैला हुआ है।</p>
🔷 5. आउटपुट प्रकार (Output Types):
संरेखण | प्रभाव |
---|---|
Left | टेक्स्ट बाईं ओर से शुरू होता है |
Right | टेक्स्ट दाईं ओर खत्म होता है |
Center | टेक्स्ट बीच में दिखता है |
Justify | टेक्स्ट दोनों साइड से बराबर फैला होता है |
🔷 6. वास्तविक जीवन उदाहरण (Real Life Example):
मान लीजिए आप डॉ. कलाम जी पर बायोग्राफी बना रहे हैं:
<h2 style="text-align: center;">डॉ. ए. पी. जे. अब्दुल कलाम</h2>
<p style="text-align: justify;">
डॉ. कलाम एक महान वैज्ञानिक और भारत के 11वें राष्ट्रपति थे। उन्होंने युवाओं को प्रेरित किया और मिसाइल मैन के नाम से प्रसिद्ध हुए।
</p>
🔷 7. सारणी (Table Summary):
Alignment | अर्थ | CSS कोड |
---|---|---|
Left | बाएं संरेखण | text-align: left; |
Right | दाएं संरेखण | text-align: right; |
Center | सेंटर | text-align: center; |
Justify | फैलाकर | text-align: justify; |
🔷 8. उपयोग के क्षेत्र (Where to Use):
- ब्लॉग लेखों में
- बायोग्राफी या निबंध में
- वेबसाइट के परिचय भाग में
- समाचार लेखों में
- रिपोर्ट्स और दस्तावेजों में
🔷 9. लाभ (Advantages):
- कंटेंट सुंदर और व्यवस्थित लगता है
- रीडर के लिए पढ़ना आसान होता है
- वेबसाइट को प्रोफेशनल लुक देता है
- सभी ब्राउज़र में काम करता है
🔷 10. सीमाएँ (Limitations):
align
एट्रिब्यूट HTML5 में सपोर्ट नहीं करता- CSS का उपयोग ज़रूरी हो गया है
- ज्यादा प्रयोग से संतुलन बिगड़ सकता है