تگ HR در HTML
تگ hr که مخفف کلمه ی Horizontal Rule می باشد ، تگی است که با استفاده از آن میتوان یک خط افقی صاف ( که البته میتونه صاف هم نباشه ) را در یک صفحه وب ایجاد نمود.
ما معمولا از این تگ برای جداسازی مطالب یا مثلا جداسازی بخش های یک وبسایت استفاده مینماییم، یا بهتر بگیم با استفاده از این تگ میتوان موضوعات را از همدیگر برای خوانایی بهتر ( و بیشتر ) جدا کرد، کلا کاربردش همینه.
مثال از تگ hr در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از تگ HR در حالت عادی بدون استایل
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<body dir=“rtl”>
<h2>HTML</h2>
<p>زبان مادر برای طراحی صفحات وب می باشد.</p>
<hr>
<h2>CSS</h2>
<p>یک زبان جذاب برای استایل دهی و آرایش صفحات وب می باشد.</p>
<hr>
<h2>JavaScript</h2>
<p>یک زبان برای تغییر و یا ایجاد تگ های درون صفحه</p>
</body>
|
مثال شماره ۲ : استایل دادن به تگ HR با استفاده از CSS ( در طرح های مختلف )
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<body>
<hr class=“hr-1”>
<hr class=“hr-2”>
<hr class=“hr-3”>
<hr class=“hr-4”>
<hr class=“hr-5”>
<hr class=“hr-6”>
<hr class=“hr-7”>
<hr class=“hr-8”>
<hr class=“hr-9”>
</body>
|
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ hr در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
پشتیبانی از صفات و رویدادهای عمومی
تگ hr از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
نکات و توضیحات
- تگ hr در HTML یک تگ تنهاست ( یعنی تگ پایانی برای بستن ندارد )
دستورات CSS پیش فرض
معمولا مرورگرها تگ hr را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1
2
3
4
5
6
7
8
9
|
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
|