آموزش تگ hr در HTML به زبان ساده (با مثال)

رتبه: 0 ار 0 رای sssss

نویسنده: سریع آسان زمان مطالعه 3 دقیقه آخرین بروزرسانی: ۱۴۰۵/۰۵/۰۷

تگ

یک شکست موضوعی در سطح پاراگراف در سند HTML به وجود می آورد. این تگ هنگامی مورد استفاده قرار می گیرد که بخواهید به طور ناگهانی موضوع را در سند تغییر دهید. این تگ یک خط افقی بین آنها ترسیم می کند. با نام Horizontal Rule نیز در HTML شناخته می شود.

حروف hr مخفف کلمه Horizontal Rule به معنی «خط افقی» است. کار این تگ دقیقاً همین است: یک خط افقی سراسری در صفحه وب شما رسم می‌کند.

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

۳ نکته طلایی درباره تگ `<hr>`:

تگِ تنها (بدون پایان): برخلاف تگ‌هایی مثل پاراگراف (<p>متن</p>) که تگ باز و بسته دارند، تگ <hr> نیازی به بسته شدن (مثل </hr>) ندارد. فقط کافی است هر جا خط خواستید، بنویسید <hr>.
تغییر موضوع: از نظر موتورهای جستجو (مثل گوگل)، وقتی شما از <hr> استفاده می‌کنید، به این معنی است که موضوع بخش بالایی با موضوع بخش پایینی کمی متفاوت است.
ظاهر ساده: این تگ در حالت پیش‌فرض یک خط طوسی و نازک می‌کشد، اما بعداً با یادگیری CSS می‌توانید رنگ، ضخامت و شکل این خط را به دلخواه خود تغییر دهید.

یک مثال بسیار ساده

به کد زیر نگاه کنید:

<h2>بخش اول</h2>

<p>اینجا در مورد موضوع اول صحبت می‌کنیم و توضیحات تمام می‌شود.</p>

<hr>

<h2>بخش دوم</h2>

<p>اینجا موضوع جدیدی را شروع می‌کنیم که با یک خط افقی از بخش بالا جدا شده است.</p>

وقتی کد بالا را در مرورگر باز کنید، متوجه می‌شوید که بین «بخش اول» و «بخش دوم»، یک خط افقی کشیده شده است تا محتوای شما مرتب‌تر و خواناتر به نظر برسد. به همین سادگی!