परिचय
HTML पैराग्राफ्स <p> टैग का उपयोग करके पैराग्राफ एलिमेंट बनाने के लिए उपयोग किए जाते हैं। यह एक ब्लॉक-लेवल एलिमेंट है जो टेक्स्ट के ब्लॉक्स को अलग करता है।
सिंटैक्स
<p>सामग्री</p>
उदाहरण
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
font-family: Arial, sans-serif;
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
p {
text-align: left;
line-height: 1.6;
margin: 1rem 0;
}
</style>
<body>
<h1>HTML पैराग्राफ्स</h1>
<p>मैं कुछ डमी टेक्स्ट वाला एक पैराग्राफ एलिमेंट हूँ। पैराग्राफ टेक्स्ट के ब्लॉक्स को अलग करने के लिए उपयोग किए जाते हैं। ब्राउज़र स्वचालित रूप से पैराग्राफ से पहले और बाद में कुछ स्पेस (मार्जिन) जोड़ता है।</p>
<p>यह दूसरा पैराग्राफ है। प्रत्येक <p> टैग एक नया ब्लॉक बनाता है। आप CSS से मार्जिन, लाइन-हाइट, इंडेंटेशन आदि नियंत्रित कर सकते हैं।</p>
</body>
</html>
आउटपुट
दो अलग-अलग पैराग्राफ दिखाई देंगे, प्रत्येक के ऊपर और नीचे डिफ़ॉल्ट मार्जिन के साथ।
महत्वपूर्ण बिंदु
<p>एक ब्लॉक-लेवल एलिमेंट है - यह नई लाइन पर शुरू होता है और पूरी चौड़ाई लेता है- ब्राउज़र डिफ़ॉल्ट रूप से ऊपर और नीचे मार्जिन जोड़ते हैं (आमतौर पर 1em)
- पैराग्राफ के अंदर ब्लॉक-लेवल एलिमेंट्स नहीं रख सकते (div, ul, ol, h1-h6, p, आदि)
- इंलाइन एलिमेंट्स (span, a, strong, em, आदि) रख सकते हैं
- खाली पैराग्राफ
<p></p>स्पेस बनाने के लिए उपयोग न करें - CSS margin/padding उपयोग करें
पैराग्राफ स्टाइलिंग (CSS)
p {
line-height: 1.6; /* पठनीयता के लिए */
margin: 1rem 0; /* पैराग्राफ के बीच स्पेस */
text-indent: 2em; /* पहली लाइन इंडेंट */
text-align: justify; /* जस्टिफाइड टेक्स्ट */
}
p::first-line {
font-weight: bold; /* पहली लाइन बोल्ड */
}
p::first-letter {
font-size: 2em; /* ड्रॉप कैप */
float: left;
margin-right: 0.1em;
}
सिमेंटिक विकल्प
<article>- स्वतंत्र सामग्री<section>- थीमैटिक समूह<div>- सामान्य कंटेनर (कोई अर्थ नहीं)<blockquote>- उद्धृत ब्लॉक<pre>- पूर्व-फॉर्मेटेड टेक्स्ट
ब्राउज़र समर्थन
सभी ब्राउज़रों में पूर्ण समर्थन।
