logo

تگ p در HTML

تگ p در HTML

تگ p در HTML تگ p چیست؟ کاربرد آن در html چگونه است؟ چرا به آن، تگ پاراگراف نیز می گویند؟ در بحث آموزش html، یکی از مهمترین تگ ها، تگ p هست. از این المان برای ایجاد پاراگراف استفاده میشه. شما در سرتاسر یک صفحه اچ تی ام ال و وبسایتتون، به دفعات از این تگ استفاده خواهید کرد. آموزش html بدون آموزش این تگ هیچ مفهومی نداره. این المان، جزو تگ های block-level در اچ تی ام ال است و همواره از سطر جدید شروع میشه. اگه با بحث block-level آشنایی ندارین به مقاله  آموزش html ما مراجعه کنین. مرورگرها به قبل و بعد تگ p، یک فضای خالی یا margin اضافه می کنن. الیته شما میتونین با دستورات css این فضا رو کم و زیاد کنین.

نحوه نوشتن تگ p

به مثال زیر دقت کنین:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>

    <p>This is a paragraph</p>

  </body>
</html>

نکات مهم در تگ p

1- تگ پایانی دارد

چنانچه در مثال بالا هم مشاهده می کنین، این المان، تگ پایانی داره و باید با <p/> بسته بشه.

2- فاصله ابتدای متن

اگر بین ابتدای محتوا و تگ باز <p/> فاصله باشه یا خودتون فاصله بزارین، این فاصله در مرورگر نادیده گرفته شده و نمایش داده نمیشه :

<p>                                                  my name is Salar Abapour.</p>

3- ایجاد خط جدید در تگ p

در یک تگ p، اینتر زدن بین سطر ها باعث ایجاد خط جدید نمیشه:

<p>
       hello.
       my name is Salar Abapour.
       whats your name?
       how are you? 
</p>

اگه قصد دارین در یک پاراگراف، یه سطر جدید رو شروع کنین و درضمن نمیخواین یه تگ p جدید باز کنین، باید از تگ br استفاده کنین:

<p>
       hello.<br/>my name is Salar Abapour.<br/>whats your name?<br/>how are you? 
</p>

حالا همونی خواهد شد که انتظار داشتین.

4- تگ پاراگراف جزو تگ های Block-level است

   <p>Hello</p><p>My name is Salar Abapour</p>

با اینکه هر دو تگ پاراگراف بغل هم نوشته شدنن اما باز مشاهده می کنین که هرکدوم، یک سطر جدید به خود اختصاص دادن. این نکته یکی از نکات مهم در نوشتن تگ پاراگراف در HTML است.

دستورات css پیش فرض برای تگ p

دستورات پیش فرض css برای این تگ در غالب مرورگرها این است:

p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

به عبارتی اکثر مرورگر ها تگ پاراگراف رو با این استایل ها نشون میدن. البته شما میتونین هر استایلی که خواستین به این تگ اعمال کنین.

پشتیبانی مرورگر ها از تگ p

تمامی مرورگر ها از تگ پاراگراف پشتیبانی کامل می کنن.

خصوصیات عمومی

تگ پاراگراف از همه خصوصیات عمومی پشتیبانی کامل میکنه.

رویداد های عمومی

تگ پاراگراف از همه رویداد های عمومی پشتیبانی کامل میکنه.

آموزش از سایت آموزش amp

مطالب مرتبط