ایجاد پاراگراف‌ها در صفحات وب

مقدمه

در این درس قصد داریم در مورد پاراگراف‌های HTML و عنصر p که برای ایجاد پاراگراف در صفحات وب کاربرد دارد، صحبت کنیم. خواهیم دید که پاراگراف‌های ایجاد شده توسط عنصر p می‌توانند شامل محتوای غیر متنی نیز باشند. به علاوه در این درس، با عنصر دیگری با نام pre نیز آشنا خواهیم شد که برای ایجاد پاراگراف‌های متنی کاربرد دارد و دارای این ویژگی تقریباً منحصر به فرد است که محتوای خود را بر اساس قراردادهای تایپوگرافیک نمایش می‌دهد. این یعنی اینکه این عنصر فاصله‌های سفید اضافی و شکست خطوط ایجاد شده با استفاده از کلیدهایی مانند space و tab و enter را نادیده نمی‌گیرد. در پایان این درس با عنصر hr نیز آشنا خواهیم شد که برای جداسازی موضوعی محتوای یک صفحه کاربرد دارد.

ایجاد پاراگراف با عنصر p

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

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

HTML

<p>
    Separating paragraphs with blank lines is easiest
    for readers to scan, but they can also be separated
    by indenting their first lines. This is often used
    to take up less space, such as to save paper in print
</p>

<p>
    Writing that is intended to be edited, such as school
    papers and rough drafts, uses both blank lines and
    indentation for separation. In finished works, combining
    both is considered redundant and amateurish.                    
</p>

<p>
    In very old writing, paragraphs were separated with a
    special character but Nowadays, this
    is considered claustrophobic and hard to read.                    
</p>

در مورد عنصر p باید توجه داشته باشید که از این عنصر در شرایطی که عنصر دیگری وجود دارد که برای ارائه‌ی محتوای مورد نظر مناسب‌تر است، نباید استفاده کنیم. برای درک این موضوع به کدهای زیر نگاه کنید:

HTML

<section>
  <p>Last modified: 2023-11-19</p>
  <p>Author: harry@example.com</p>
</section>

این کدها از نظر فنی مشکلی ندارند اما بهتر است از کدهای جایگزین زیر استفاده کنیم:

HTML

<section>
  <p>Last modified: 2023-11-19</p>
  <address>Author: harry@example.com</address>
</section>

ایجاد پاراگراف‌های pre-formatted با عنصر pre

همانطور که قبلاً دیدیم، مرورگرها و سایر مفسرهای HTML فاصله‌های سفید اضافی و شکست‌خط‌هایی را که با استفاده از کلیدهایی مانند space و tab و enter ایجاد می‌کنیم، نادیده می‌گیرند. به عنوان مثال، اگر متن شعری را درون یک پاراگراف قرار دهیم و سعی کنیم فرمتی مناسب برای شعر را با ایجاد فاصله‌های بیشتر بین مصراع‌های یک بیت ایجاد کنیم، این تغییرات در خروجی منعکس نمی‌شوند.

HTML

<p>
  تا کی غم آن خورم که دارم یا نه      وین عمر به خوشدلی گذارم یا نه 
  پر کن قدح باده که معلومم نیست       کاین دم که فرو برم برآرم یا نه
</p>

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

HTML

<pre>
  تا کی غم آن خورم که دارم یا نه      وین عمر به خوشدلی گذارم یا نه 
  پر کن قدح باده که معلومم نیست       کاین دم که فرو برم برآرم یا نه
</pre>

با توجه به اینکه عنصر pre محتوای خود را بر اساس قراردادهای تایپوگرافیک نمایش می‌دهد و نه بر اساس قوانین عناصر HTML، این امکان وجود دارد که از این عنصر برای ترسیم دیاگرام‌ها یا خلق تصاویر استفاده کنیم. مثال زیر را ببینید:

HTML

<pre>
___________________________
  < I'm an expert in my field. >
    ---------------------------
           \   ^__^ 
            \  (oo)\_______
               (__)\       )\/\
                   ||----w |
                   ||     ||
</pre>

اما باید در نظر داشته باشیم که افرادی که به خاطر مشکلات بینایی از تکنولوژی‌هایی مانند نرم‌افزارهای صفحه‌خوان برای خواندن محتویات صفحه استفاده می‌کنند، نمی‌توانند درک کنند که کاراکترهای استفاده شده درون عنصر pre در مثال بالا چه چیزی را نشان می‌دهند. بنابراین، بهتر است از استفاده از عنصر pre برای اینگونه کارها اجتناب کنیم.

جداسازی قسمت‌های مختلف سند با عنصر hr

عنصر hr برای ایجاد یک مرزبندی بین عناصر paragraph-level کاربرد دارد. یک عنصر paragraph-level عنصری است که همانند پاراگراف‌ها برای ارائه‌ی بلوک‌های محتوایی یا به عبارت دیگر، برای ارائه‌ی محتوای گروه‌بندی‌شده کاربرد دارد. در دروس بعدی این فصل با سایر عناصر paragraph-level به جز پاراگراف‌ها آشنا خواهیم شد.

در نسخه‌هاي قبل از HTML5 از عنصر hr برای درج خط افقی در صفحه استفاده می‌شد و می‌توانستیم با استفاده از این عنصر یک مرزبندی بصری (visual) بین قسمت‌هاي مختلف سند به وجود بیاوریم. اما در HTML5 عنصر hr نه به عنوان یک ابزار برای مرزبندی بصری بلکه به عنوان ابزاری برای مرزبندی منطقی و محتوایی تعریف شده است. البته هنوز هم مرورگرها با دیدن عنصر hr اقدام به ترسیم یک خط افقی می‌کنند اما همانطور که گفته شد، فلسفه‌ی این عنصر تغییر کرده و جنبه‌ی معنایی پیدا کرده است.

HTML

<h2>HTML</h2>
<p>HTML is a markup language for describing web pages.</p>
<hr>
<h2>CSS</h2>
<p>CSS is  a styling language for defining style of webpages.</p>

عنصر hr در نسخه‌های قبلی HTML از تعدادی صفت مربوط به ظاهر خط ترسیم شده نیز پشتیبانی می‌کرد که این پشتیبانی از زمان انتشار HTML5 با توجه به مفهوم جدید معنایی این عنصر، متوقف شده است. اگر هدفتان نه ایجاد یک مرزبندی محتوایی بلکه صرفاً ترسیم یک خط است، باید این کار را با استفاده از CSS انجام دهید نه HTML و عنصر hr.