تگ p در HTML

تگ p در HTML

تگ p چیست؟ کاربرد آن در html چگونه است؟ چرا به آن، تگ پاراگراف نیز می گویند؟

معرفی تگ p

در بحث آموزش html، یکی از مهمترین تگ ها، تگ p هست. از این المان برای ایجاد پاراگراف استفاده میشه. شما در سرتاسر یک صفحه اچ تی ام ال و وبسایتتون، به دفعات از این تگ استفاده خواهید کرد. آموزش html بدون آموزش این تگ هیچ مفهومی نداره.

این المان، جزو تگ های block-level در اچ تی ام ال است و همواره از سطر جدید شروع میشه. اگه با بحث block-level آشنایی ندارین به مقاله  آموزش html ما مراجعه کنین.

مرورگرها به قبل و بعد تگ p، یک فضای خالی یا margin اضافه می کنن. الیته شما میتونین با دستورات css این فضا رو کم و زیاد کنین.

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

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

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

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

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

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

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

و نتیجه :

فاصله در ابتدای تگ p

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

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

در این مثال، در بین خطوط از دکمه Enter در کیبورد استفاده کردیم، اما هیچکدوم اعمال نخواهند شد:

اینتر زدن در تگ p

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

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

استفاده از تگ br داخل تگ p

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

و نتیجه در مرورگر:

تگ p تگ block-level است

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

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

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

به عبارتی اکثر مرورگر ها تگ پاراگراف رو با این استایل ها نشون میدن. البته شما میتونین هر استایلی که خواستین به این تگ اعمال کنین. در فیلم آموزشی اچ تی ام ال نیز می تونین نه این تگ بلکه همه تگ ها رو یکجا به صورت حرفه ای و کاربردی یاد بگیرین.

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

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

نام مرورگرتگ p در html و پشتیبانی گوگل کروم تگ p در html و پشتیبانی موزیلا فایرفاکس firefoxتگ p در html و پشتیبانی سافاری safariتگ p در html و پشتیبانی اپرا Operaتگ p در html و پشتیبانی Internet Explorer
پشتیبانی می کند؟بلهبلهبلهبلهبله

 

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

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

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

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

توجه

اگه از مطالعه تک تک مقاله های html خسته شدین و یک آموزش جامع و کامل رو میخواین، پکیج بی نظیر زیر رو بهتون پیشنهاد میکنم:

فیلم آموزش HTML  در سه و نیم ساعت

 

سایر منابع
  1.  آموزش تگ p از وبسایت https://www.w3docs.com/learn-html/html-p-tag.html
  2.  آموزش تگ p از وبسایت https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
مطالب زیر را حتما بخوانید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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