تگ HR در HTML: مرزهای بصری در طراحی وب
تگ <hr> یکی از عناصر ساده اما پرکاربرد در زبان نشانه‌گذاری HTML است که برای ایجاد یک خط افقی یا مرز بصری بین بخش‌های مختلف محتوا استفاده می‌شود. این تگ به‌صورت خودبسته نوشته می‌شود و نیازی به تگ پایانی ندارد.
تگ HR مخفف عبارت Horizontal Rule است که به معنی "خط افقی" می‌باشد. این تگ از اولین نسخه‌های HTML وجود داشته و هنوز هم در HTML5 پشتیبانی می‌شود.
کاربردهای اصلی تگ HR
- جداسازی بخش‌های مختلف یک مقاله یا صفحه وب
- ایجاد وقفه بصری بین مطالب مرتبط اما مجزا
- تفکیک بخش نظرات از محتوای اصلی
- طراحی عناصر دکوراتیو در صفحه
| ویژگی |
مقدار پیش‌فرض |
توضیح |
| رنگ |
متن صفحه |
معمولاً مشابه رنگ متن اصلی |
| ضخامت |
1px |
قابل تغییر با CSS |
| عرض |
100% |
پر کردن عرض عنصر والد |
استایل‌دهی به تگ HR با CSS
با وجود سادگی ذاتی تگ <hr>، می‌توان با CSS ظاهر آن را به‌طور کامل تغییر داد:
hr {
border: none;
height: 2px;
background: linear-gradient(to right, #3498db, #e74c3c);
margin: 20px 0;
border-radius: 2px;
}
برای اطلاعات بیشتر درباره تگ HR و کاربردهای پیشرفته آن می‌توانید تگ hr در html.
نکات مهم در استفاده از تگ HR
- از استفاده بیش از حد تگ HR خودداری کنید، زیرا ممکن است خوانایی صفحه را کاهش دهد.
- در HTML5، این تگ معنای معنایی (semantic) ندارد و صرفاً یک عنصر نمایشی است.
- برای جداسازی بخش‌های مهم محتوا، استفاده از عناصر معنایی مانند <section> مناسب‌تر است.
- در طراحی‌های ریسپانسیو، حتما رفتار تگ HR را در اندازه‌های مختلف صفحه بررسی کنید.
تگ <hr> نمونه‌ای از سادگی و کارایی در HTML است که با وجود قدمت زیاد، هنوز هم در طراحی وب کاربرد دارد. با استفاده خلاقانه از CSS می‌توانید این عنصر ساده را به یک المان طراحی جذاب تبدیل کنید.
