المان های <p> و پاراگراف ها در HTML
در HTML از المان <p> برای تعریف پاراگراف یا بند استفاده میشود. متن پاراگراف ها در اچتیامال مشابه با نمونه زیر مابین تگ شروع <p> و تگ پایان </p> قرار میگیرد.
<p>This is a paragraph.</p>نتیجه این المان چیزی مشابه با نمونه زیر خواهد بود:
معمولا یک پاراگراف به شکل مجزا در یک خط جدید شروع میشود. به صورت پیشفرض، مرورگرهای وب حاشیهای قبل و بعد از پاراگراف اضافه میکنند. در ادامه یک قطعه کد HTML شامل دو پاراگراف را همراه با نتیجه آن مشاهده میکنید.
See the Pen
HTML Paragraphs by techdic (@techdic)
on CodePen.
المان های <p> از جمله المان های سطح بلاک هستند. به این معنی که هر پاراگراف به صورت پیشفرض در یک بلاک یا قطعه قرار میگیرد. چنین المانی تمام فضای افقی المان والد خود (یعنی المانی که در آن قرار گرفته) را اشغال میکند.
خط جدید در پاراگراف های HTML
از آنجایی که Whitespace ها در HTML معمولا نادیده گرفته میشوند درج فاصلههای اضافی یا خط جدید در محتوای داخلی المان <p> تغییری در نتیجه آن ایجاد نمیکند. در عوض میتوانید از تگ <br> برای ایجاد Line break (شکست خط) یا خط جدید استفاده کنید.
در کد HTML زیر میتوانید نتیجه محتوای داخلی چند خطی در المان <p> (نمونه پاراگراف اول) و همچنین استفاده از تگ <br> (نمونه پاراگراف دوم) را مشاهده و با هم مقایسه کنید. همانطور که میبینید در نتیجه کد، خط جدیدی داخل پاراگراف اول وجود ندارد اما در پاراگراف دوم دقیقا در محل تگ <br> مابقی متن به خط جدید منتقل شده است.
See the Pen
Untitled by techdic (@techdic)
on CodePen.
بیشتر بخوانید: خط جدید یا شکست خط در HTML – المان <br>
تغییر استایل پاراگراف
برای تغییر خصوصیات ظاهری پاراگراف (مانند تغییر میزان حاشیه و نحوه تراز خطوط، ایجاد فاصله ابتدایی یا ایندنت در خط اول و …) از CSS استفاده میشود. به عنوان مثال در نمونه زیر با کمک CSS تراز خطوط پاراگراف به صورت دوطرفه تعیین شده و در خط اول پاراگراف نیز ایندنت ایجاد شده است.
See the Pen
Styled paragraph by techdic (@techdic)
on CodePen.
بازگشت به فهرست مجموعه آموزشی HTML
