خط افقی (hr)
تگ «خط افقی (Horizontal Rule) یا hr» وقتی موضوع عوض می شود، یک خط می کشد. این خط بین بخش ها فاصله می اندازد و تغییر موضوع را نشان می دهد؛ مثل خط کش بین دو سوال امتحان.
تعریف و کاربرد «hr»
طبق منبع، «hr» یک شکست موضوعی می سازد. معمولاً به صورت یک خط افقی دیده می شود و محتوای صفحه را از هم جدا می کند.
نمونه: جداکردن چند پاراگراف
<h1>The Main Languages of the Web</h1>
<p>HTML is the standard markup language...</p>
<hr>
<p>CSS describes how HTML elements are displayed...</p>
<hr>
<p>JavaScript is the programming language of the Web...</p>
تنظیم ظاهر با CSS
تراز چپ با عرض نصف
<hr style="width: 50%;">
بدون سایه ی پیش فرض
<hr style="height: 2px; border-width: 0; color: gray; background-color: gray;">
تعیین ارتفاع خط
<hr style="height: 30px;">
تراز سمت چپ
<hr style="width: 50%; text-align: left; margin-left: 0;">
مقدارهای پیش فرض CSS
مرورگرها معمولاً «hr» را بلوکی با حاشیه و ضخامت کم نشان می دهند.
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
نکات سریع استفاده
نکته: «hr» محتوا نیست؛ فقط جداکننده موضوعی است. بنابراین زیاده روی نکن.
نکته: برای فاصله گذاری از CSS هم می توانی کمک بگیری.
پیوندهای مرتبط
المان های عنوان را در سرفصل ها (h1–h6) ببین. سربرگ صفحه هم در سربرگ (header) توضیح داده شده است.
تمرین گام به گام
- سه پاراگراف بساز. سپس بینشان «hr» قرار بده.
- عرض «hr» را 60٪ کن. سپس تراز را چپ بگذار.
- رنگ پس زمینه «hr» را خاکستری کن. سپس نتیجه را ببین.
جمع بندی سریع
- «hr» تغییر موضوع را نشان می دهد.
- ظاهرش با CSS قابل تنظیم است.
- نمایشش بلوکی و ساده است.
- زیاد استفاده نکن؛ خوانایی مهم است.