خط جدید و خط افقی

br و hr: وقتی به یه شکستگی کوچیک نیاز داری

تو درس قبل گفتیم که برای جدا کردن ایده‌های مختلف، بهتره از پاراگراف‌های جداگانه استفاده کنیم، نه از شکستن خط دستی. اما گاهی واقعاً به یه شکست خط ساده داخل یه بلوک متنی نیاز داریم، یا می‌خوایم یه جداکننده‌ی بصری بین دو بخش از محتوا بذاریم. برای همین دو تا کار، HTML دو تگ مشخص داره: <br> و <hr>.

تگ br: شکستن خط بدون شروع پاراگراف جدید

<p>
  خیابان آزادی، پلاک ۱۲<br>
  طبقه‌ی دوم، واحد ۴<br>
  تهران، ایران
</p>

تگ br مخفف Break هست و کارش اینه که یه خط جدید داخل متن ایجاد کنه، بدون اینکه یه پاراگراف کاملاً جدید شروع بشه. تو مثال بالا، آدرس پستی رو داریم که سه خط جدا داره، اما همه‌شون از نظر معنایی بخشی از یه واحد واحد (آدرس) هستن؛ به همین خاطر به‌جای سه تا p جدا، از یه p با چند br استفاده کردیم.

br یه تگ خالیه (Void Element)

همون‌طور که تو درس ۲-۷ درباره‌ی تگ‌های خالی صحبت کردیم، br هم جزو همین دسته‌ست؛ یعنی نه محتوایی داره، نه تگ بسته‌شونده نیاز داره:

<!-- درست -->
<br>

<!-- این هم درسته ولی امروز رایج نیست -->
<br />

چه زمانی باید از br استفاده کنیم؟

br مناسب جاهاییه که شکست خط بخشی از معنای واقعی محتواست، مثل:

• آدرس‌های پستی
• شعر یا ترانه (که هر مصراع باید تو خط جدا نمایش داده بشه)
• امضای رسمی زیر یک نامه

<p>
  بنی آدم اعضای یک پیکرند<br>
  که در آفرینش ز یک گوهرند
</p>

اشتباه رایج: استفاده از br به‌جای فاصله‌گذاری بین پاراگراف‌ها

یه اشتباه خیلی رایج اینه که برنامه‌نویس‌های تازه‌کار، از چند تا br پشت‌سرهم استفاده می‌کنن تا فاصله‌ی بین دو پاراگراف رو زیاد کنن:

<!-- توصیه‌نشده -->
<p>پاراگراف اول.</p>
<br><br>
<p>پاراگراف دوم.</p>

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

تگ hr: جداکننده‌ی موضوعی

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

<hr>

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

تگ hr مخفف Horizontal Rule هست و به‌صورت پیش‌فرض یه خط افقی روی صفحه رسم می‌کنه. اما نکته‌ی مهم اینه که hr فقط یه خط تزئینی نیست؛ از نظر معنایی نشون‌دهنده‌ی یه تغییر موضوعی یا جدایی محتوایی بین دو بخشه، مثل تغییر فصل تو یه داستان یا جدا کردن دو تاپیک کاملاً متفاوت.

hr هم یه تگ خالیه

<hr>

درست مثل br، تگ hr هم نیازی به تگ بسته‌شونده نداره.

تفاوت مفهومی br و hr

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

یه مثال کامل ترکیبی

<h1>تماس با ما</h1>

<p>
  آدرس دفتر مرکزی:<br>
  تهران، خیابان ولیعصر<br>
  پلاک ۱۵، طبقه‌ی سوم
</p>

<hr>

<p>
  ساعات کاری: شنبه تا چهارشنبه، ۹ صبح تا ۵ عصر
</p>

تو این مثال، از br برای شکستن خط‌های آدرس (که همه بخشی از یه واحد معنایی واحدن) استفاده کردیم، و از hr برای جدا کردن بخش آدرس از بخش ساعات کاری (که دو موضوع کاملاً جدا هستن) استفاده کردیم.

چند اشتباه رایج

• استفاده از چند br پشت‌سرهم برای شبیه‌سازی فاصله‌ی بین پاراگراف‌ها، به‌جای اعتماد به فاصله‌ی پیش‌فرض p یا استفاده از CSS.
• استفاده از hr صرفاً برای زیبایی بصری، بدون اینکه واقعاً یه تغییر موضوعی بین دو بخش وجود داشته باشه.
• استفاده از br برای شکستن خط تو جاهایی که در واقع باید از پاراگراف‌های جدا استفاده می‌شد (مثلاً برای جدا کردن دو ایده‌ی کاملاً متفاوت).

بهترین روش‌ها

• br رو فقط جایی استفاده کن که شکست خط واقعاً بخشی از معنای محتواست (آدرس، شعر، امضا).
• hr رو فقط برای نشون‌دادن تغییر موضوعی واقعی بین دو بخش محتوا استفاده کن، نه صرفاً برای رسم یه خط تزئینی.
• برای فاصله‌گذاری بصری بین بخش‌ها، همیشه از CSS استفاده کن، نه از br یا hr.

نکته‌ی سئو

استفاده‌ی درست و معنایی از hr و br تأثیر مستقیمی روی سئو ندارد، اما ساختار معنایی درست محتوا (که این دو تگ بخشی از آن هستند) به موتورهای جستجو کمک می‌کند محتوا را بهتر و دقیق‌تر تفسیر کنند.

نکته‌ی دسترسی‌پذیری

صفحه‌خوان‌ها معمولاً هنگام رسیدن به تگ hr، آن را به‌عنوان یک نشانه‌ی تغییر موضوع اعلام می‌کنند؛ استفاده‌ی نادرست یا بیش‌ازحد از این تگ می‌تواند تجربه‌ی شنیداری کاربران کم‌بینا را مختل کند.

جمع‌بندی

تگ br برای شکستن خط داخل یک بلوک متنی واحد استفاده می‌شود، مثل آدرس یا شعر، و نباید جایگزین فاصله‌گذاری بین پاراگراف‌ها شود. تگ hr برای نشان‌دادن یک جداکننده‌ی موضوعی معنادار بین دو بخش از محتوا به کار می‌رود و هر دو، از نوع تگ‌های خالی (بدون تگ بسته‌شونده) هستند.