شکست خط و خط افقی در HTML؛ آشنایی با br، hr، pre و code

در درس قبل با عناصر مهم فرمت‌بندی و تأکید متن در HTML آشنا شدیم و تفاوت strong، em، b و i را یاد گرفتیم.

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

در این درس با شکست خط و خط افقی در HTML آشنا می‌شویم و کاربرد عناصر br، hr، pre و code را با مثال‌های ساده بررسی می‌کنیم.

چرا Enter زدن در HTML همیشه خط جدید ایجاد نمی‌کند؟

یکی از اولین نکاتی که هنگام نوشتن HTML باید بدانیم این است که مرورگرها فاصله‌ها و شکست‌های خط معمولی در کد HTML را دقیقاً به همان شکلی که در فایل نوشته‌ایم نمایش نمی‌دهند.

<p>
    خط اول
    خط دوم
    خط سوم
</p>

ممکن است انتظار داشته باشیم هر عبارت در یک خط جدا نمایش داده شود، اما مرورگر معمولاً این فاصله‌ها و Enterها را به فضای سفید معمولی تبدیل می‌کند.

تگ br در HTML چیست؟

عنصر br مخفف Line Break است و برای ایجاد شکست خط در همان جریان متن استفاده می‌شود.

<p>
    تهران<br>
    خیابان مثال<br>
    پلاک ۱۰
</p>

br زمانی مناسب است که شکستن خط بخشی از خود محتوا باشد؛ مثل آدرس پستی، شعر یا اطلاعات چندخطی کوتاه.

آیا برای فاصله بین پاراگراف‌ها از br استفاده کنیم؟

خیر. برای ایجاد فاصله ظاهری بین دو پاراگراف نباید چند بار br بنویسیم. اگر دو بخش واقعاً دو پاراگراف جدا هستند، از دو عنصر p استفاده می‌کنیم و فاصله ظاهری را بعداً با CSS تنظیم می‌کنیم.

آیا br تگ بسته دارد؟

خیر. br یک Void Element است و به شکل <br> نوشته می‌شود.

تگ hr در HTML چیست؟

عنصر hr برای مشخص کردن یک تغییر موضوع یا مرز معنایی بین بخش‌های محتوا استفاده می‌شود.

<p>بخش اول مقاله درباره HTML است.</p>

<hr>

<p>از اینجا وارد موضوع CSS می‌شویم.</p>

در بسیاری از مرورگرها hr به شکل یک خط افقی دیده می‌شود، اما نقش اصلی آن فقط تزئین نیست.

آیا hr فقط برای کشیدن خط است؟

خیر. اگر فقط یک خط تزئینی می‌خواهیم، CSS انتخاب مناسب‌تری است. hr باید زمانی استفاده شود که واقعاً یک جدایی یا تغییر موضوع در محتوا داریم.

تفاوت br و hr چیست؟

تگ pre در HTML چیست؟

عنصر pre مخفف Preformatted Text است. وقتی متنی را داخل pre قرار می‌دهیم، مرورگر فاصله‌ها و شکست‌های خط را تا حد زیادی همان‌طور که نوشته‌ایم حفظ می‌کند.

<pre>
خط اول
    خط دوم با فاصله
        خط سوم با فاصله بیشتر
</pre>

pre برای نمونه کد، متن‌های قالب‌بندی‌شده، ASCII Art و هر محتوایی که فاصله‌ها و شکست خطوط در آن مهم است کاربرد دارد.

تگ code در HTML چیست؟

عنصر code برای مشخص کردن یک قطعه کد کامپیوتری استفاده می‌شود.

<p>
    فایل اصلی پروژه را با نام
    <code>index.html</code>
    ذخیره کنید.
</p>

تفاوت pre و code چیست؟

pre قالب فاصله‌ها و شکست خطوط را حفظ می‌کند، اما code از نظر معنایی مشخص می‌کند که محتوا یک قطعه کد است.

برای یک بلوک چندخطی کد معمولاً این دو را با هم استفاده می‌کنیم:

<pre><code>
&lt;h1&gt;آموزش HTML&lt;/h1&gt;
&lt;p&gt;این یک پاراگراف است.&lt;/p&gt;
</code></pre>

چرا برای نمایش تگ HTML باید از < و > استفاده کنیم؟

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

نمایش کد کوتاه داخل جمله

اگر کد کوتاه است، خود code کافی است.

<p>
    فایل را با نام
    <code>index.html</code>
    ذخیره کنید.
</p>

نمایش بلوک چندخطی کد

برای نمونه‌های چندخطی، استفاده از pre و code با هم خواناتر و معنایی‌تر است.

تفاوت p و pre چیست؟

آیا برای ایجاد فاصله از چند Space استفاده کنیم؟

خیر. در متن عادی HTML، Spaceهای متعدد معمولاً به یک فضای معمولی تبدیل می‌شوند. برای چیدمان و فاصله‌گذاری باید از CSS استفاده کنیم.

آیا برای پایین بردن محتوا از چند br استفاده کنیم؟

خیر. چند br پشت سر هم برای فاصله‌گذاری عمودی روش اصولی نیست. br فقط زمانی استفاده شود که شکست خط بخشی از معنای محتوا باشد.

مثال عملی: اطلاعات تماس

<address>
    ویترین وردپرس<br>
    تهران، خیابان نمونه<br>
    پلاک ۱۰
</address>

مثال عملی: جدا کردن دو موضوع

<h2>آموزش HTML</h2>
<p>HTML ساختار صفحات وب را مشخص می‌کند.</p>

<hr>

<h2>آموزش CSS</h2>
<p>CSS ظاهر و چیدمان صفحات وب را کنترل می‌کند.</p>

اشتباهات رایج

استفاده از br برای فاصله‌گذاری

br ابزار طراحی نیست.

استفاده از hr فقط برای زیبایی

اگر فقط خط تزئینی می‌خواهید، CSS مناسب‌تر است.

استفاده از pre برای همه متن‌ها

pre فقط وقتی مناسب است که حفظ فاصله‌ها و شکست خط مهم باشد.

نمایش مستقیم تگ‌های HTML داخل code

برای نمایش خود تگ‌ها باید کاراکترهای ویژه را Escape کنیم.

تمرین اول

با یک پاراگراف و چند br یک آدرس سه‌خطی بسازید و بعد brها را حذف کنید تا تفاوت را ببینید.

تمرین دوم

دو موضوع کوتاه بنویسید و فقط اگر واقعاً بین آنها تغییر موضوع وجود دارد، از hr استفاده کنید.

تمرین سوم

با استفاده از pre و code یک نمونه HTML چندخطی را در صفحه نمایش دهید.

تمرین چهارم

صفحه را با DevTools باز کنید و عناصر br، hr، pre و code را در پنل Elements پیدا کنید.

در این درس چه چیزهایی یاد گرفتیم؟

• br برای شکست خط در همان جریان محتوا است.
• br نباید برای فاصله‌گذاری ظاهری استفاده شود.
• hr تغییر موضوع یا مرز معنایی را مشخص می‌کند.
• br و hr Void Element هستند.
• pre فاصله‌ها و شکست خطوط را حفظ می‌کند.
• code برای مشخص کردن قطعه کد است.
• برای کد چندخطی معمولاً pre و code با هم استفاده می‌شوند.
• برای نمایش تگ‌های HTML به‌صورت متن باید از Entity استفاده کنیم.

جمع‌بندی

برای کنترل متن در HTML باید از عنصر مناسب با توجه به معنی محتوا استفاده کنیم.

br برای شکست خط، hr برای جدایی معنایی، pre برای حفظ قالب‌بندی متن و code برای مشخص کردن قطعه کد استفاده می‌شود.

استفاده درست از این عناصر باعث می‌شود HTML ما خواناتر، معنایی‌تر و قابل‌فهم‌تر باشد.