پاراگراف ها در زبان HTML

با سلام و عرض ادب خدمت شما خوانندگان گرامی، امروز در رابطه با تگ  و مشکلات مربوط به آن مانند white space و یا line break ها صحبت خواهیم کرد.

المان یا تگ

عنصر  در زبان HTML یک پاراگراف را تعریف می کند:

<!DOCTYPE html>
<html>
<body>

<p>این یک پاراگراف است</p>
<p>این یک پاراگراف است</p>
<p>این یک پاراگراف است</p>

</body>
</html>

مشاهده ی خروجی در JSBin

اگر به لینک بالا رفته و خروجی را مشاهده کنید، متوجه می شوید که مرورگرها به طور پیش فرض قبل و بعد از هر پاراگراف، کمی فضای خالی (white space) اضافه می کنند تا پاراگراف ها به عناصر پیرامون خود نچسبند.

مسئله ی جالبی که در زبان HTML به آن برمیخوریم مسئله ی حذف شدن فضاهای خالی است. اگر شما به پاراگراف های خود فضای خالی اضافه کنید (به طور مثال استفاده از اینتر و رفتن به خط بعد و یا استفاده از چندین اسپیس) مرورگر تمام این فضاها را حذف می کند و نمایش نخواهد داد!

به مثال زیر توجه کنید (در این مثال توضیحاتی نوشته ام بنابراین خود مثال را نیز مطالعه کنید):

<!DOCTYPE html>
<html>
<body dir = 'rtl'>

<p>
این یک پاراگراف است
که شامل خطوط زیادی می شود
این خطوط و فاصله ها در سورس کد قرار دارند
اما مرورگر ها
آن را حذف می کنند.
</p>

<p>
این یک پاراگراف است
که شامل             فضاهای خالی زیادی است
که      در سورس کد       قرار دارند
اما در    مرورگر
نادیده گرفته می شوند.
</p>

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

</body>
</html>

اگر دقیقا به این کد دقت کنید متوجه می شوید فضاهای خالی و اینترهای متعددی در آن استفاده شده است. حالا بیایید خروجی آن در JSBin را ببینیم.

در قسمت آخر این مثال گفته ام که با تغییر سایز مرورگر و صفحه ی کاربر (لپتاپ، تبلت، تلفن هوشمند و ...)، تعداد خطوط یک پاراگراف تغییر می کند. برای مشاهده ی این مسئله با چشم های خودتان می توانید در JSBin خط وسط صفحه را بگیرید و فضای سمت راست را کوچکتر کنید. می بینید که تعداد خطوط بیشتر می شوند. همچنین می توانید به جای این کار، پنجره ی مرورگر خود را کوچک و بزرگ کنید تا شاهد این مسئله باشید.

توجه داشته باشید که اگر تگ پایانی  را فراموش کنید باز هم خروجی به شکل صحیح نمایش داده می شود:

<p>This is a paragraph.
<p>This is another paragraph.

اما در قسمت قبل نیز به شما توصیه ی اکید کردیم که به هیچ عنوان چنین کاری نکنید.

نکته: من در مثال های مختلف چینش صفحات را «راست چین» می کنم تا متن های فارسی بهتر نمایش داده شوند ('dir = 'rtl). اگر متوجه آن نمی شوید نگران نباشید در آینده با آن آشنا می شویم.

المان یا تگ

حتما با خود می گویید اگر مرورگرها فضای خالی در زبان HTML را نادیده می گیرند، پس چطور این فضا را در متون خود ایجاد کنیم؟ اگر بخواهم به خط بعد بروم باید چکار کنم؟ نگران نباشید این کار بسیار ساده است؛ از عنصر   استفاده می کنیم! در برنامه نویسی به مفهوم اینتر زدن و به خط بعد رفتن line break می گوییم که یعنی شکستن خط. بنابراین در طول این دوره نیز از همین مفهوم به جای اینتر استفاده می کنیم.

حتما خودتان متوجه شده اید که استفاده از   بسیار آسان است:

<!DOCTYPE html>
<html>
<body dir = 'rtl'>

<p>این خط شامل<br>یک پاراگراف<br>می باشد که در خط جداگانه قرار دارد</p>

</body>
</html>

مشاهده ی خروجی در JSBin

حالا می بینید با اینکه تمام این متن در سورس کد (HTML) در یک خط نوشته شده است اما به خاطر استفاده از   در حالت خروجی خود دارای چندین خط می باشد.

نکته: اگر از قسمت قبل یادتان باشد به تگ هایی مانند   تگ پوچ یا تگ خالی می گفتیم؛ این تگ ها، تگ پایانی ندارند.

سوال: اما اگر من بخواهم مطلبی بنویسم که line break های زیادی داشته باشد چطور؟ به عنوان مثال اگر بخواهم یک شعر بنویسم (که دارای فضاهای خالی زیادی است) نمی توانم از   استفاده کنم چرا که باید صد ها مورد تگ   بنویسم!

پاسخ: برای چنین حالت هایی باید از <pre> که مخفف preformatted (به معنی «از پیش قالب بندی شده») است، استفاده کنید. در واقع هر متنی که داخل <pre> قرار بگیرد دقیقا به شکلی نمایش داده می شود که در سورس کد نوشته شده باشد.

استفاده از این تگ، فونتِ متن داخلش را تغییر می دهد که می توانید آن را بعدا با کمک CSS تغییر دهید. مثال:

<!DOCTYPE html>
<html>
<body>

<p>The pre tag preserves both spaces and line breaks:</p>

<pre>
   گر مرد رهی میان خون باید رفت

   از پای فتاده، سرنگون باید رفت

   تو پای به راه نه و هیچ مپرس
   
   خود راه بگویدت كه چون باید رفت   
</pre>

</body>
</html>

مشاهده ی خروجی در JSBin

هنوز دوره ی CSS را برگزار نکرده ایم اما اگر از قبل با CSS آشنایی دارید می توانم به شما کد های پیش فرض تگ pre را معرفی کنم:

pre {
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0;
}

دلیل عجیب بودن شکل متن داخل این تگ همین کد CSS است. واضح است که شما می توانید این کد را تغییر دهید تا شکل متن تان نیز تغییر کند.

به طور مثال شعر بالا را می توان اینگونه نمایش داد:

<!DOCTYPE html>
<html>
<head>
<style>
pre {
  display: block;
  font-family: calibri;
  white-space: pre;
  margin: 1em 0;
} 
</style>
</head>
<body>

<p>The pre tag preserves both spaces and line breaks:</p>

<pre>
   گر مرد رهی میان خون باید رفت

   از پای فتاده، سرنگون باید رفت

   تو پای به راه نه و هیچ مپرس
   
   خود راه بگویدت كه چون باید رفت   
</pre>

</body>
</html>

مشاهده ی خروجی در JSBin

حالا با مراجعه به خروجی این کد متوجه می شوید که شکل متن به حالت عادی خود برگشته است.

خلاصه ی مقاله

در این قسمت با پاراگراف ها و رفتار پیش فرضشان در زبان HTML و نحوه ی نمایششان در مرورگرهای مدرن صحبت کردیم. همچنین به برخی از مشکلات و راه حل های آن در رابطه با white space و line break پرداختیم. امیدوارم این قسمت مورد پسند شما واقع شده باشد.

پاراگراف ها در زبان HTML

المان یا تگ <p>

المان یا تگ <br>

خلاصه ی مقاله