# العنصر hr

> العنصر يُمثِّل فاصلًا موضوعيًا بين الفقرات (مثلًا: تغيّر المشهد في قصة ما، أو تبدّل الموضوع بإنشاء قسم جديد).

- Canonical URL: https://coreiten.com/article/العنصر-hr
- Language: ar
- Section: HTML
- Author: Sami
- Published: 2025-05-10T00:00:00+03:00
- Modified: 2026-01-30T23:50:37+03:00
- Publisher: CoreITen (https://coreiten.com)
- Keywords: العنصر, ما هو العنصر hr في html, شرح العنصر hr, مثال عن العنصر hr, خاصيات العنصر hr, استخدام العنصر hr في html, بطاقة العنصر hr, تعلم html من الصفر, تصميم مواقع, برمجة مواقع, لغة html

---

**العنصر <hr>**

العنصر `<hr>` يُمثِّل فاصلًا موضوعيًا بين الفقرات (مثلًا: تغيّر المشهد في قصة ما، أو تبدّل الموضوع بإنشاء قسم جديد).

كان يُعرَض هذا العنصر في الإصدارات السابقة من HTML على شكل خط أفقي، وصحيحٌ أنَّه ما يزال يعرَض كذلك في المتصفحات، لكن أصبح له معنى هيكلي، بدلًا من كونه عنصرًا شكليًا فقط.

يحتوي هذا المثال على فقرتين (العنصر `<p>`) يفصل بينهما العنصر `<hr>` الذي يُمثَّل بخطٍ أفقي:

```html
<p>الموسوعة التقنية عالم التقنية والابداع بتقديم أهم الشروحات والأخبار التقنية والربح الالكتروني</p>

<hr>

<p>المحتوى مرجعي، أي هو أقرب للقاموس تبحث فيه عمّا تحتاج له عند الحاجة.</p>
```

## بطاقة العنصر

| تصنيفات المحتوى | محتوى تنظيمي. |
| --- | --- |
| المحتوى المسموح | لا يوجد، لأنه عنصر فارغ. |
| الوسم المختصر | يجب أن يملك وسم بداية، ولا يجب أن يملك وسم نهاية. |
| العناصر الأب | أي عنصر يقبل المحتوى التنظيمي. |
| واجهة DOM | HTMLHRElement |

## دعم المتصفحات

| Chrome | Firefox | Edge | Safari | Opera |
| --- | --- | --- | --- | --- |
| مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |

## الخاصيات

يمكن استخدام [الخاصيات العامة](https://coreiten.com/article/%D8%A7%D9%84%D8%AE%D8%A7%D8%B5%D9%8A%D8%A7%D8%AA-%D8%A7%D9%84%D8%B9%D8%A7%D9%85%D8%A9) في هذا العنصر.

هنالك خاصيات كانت تستعمل في الإصدارات السابقة لكنها أصبحت غير مدعومة في HTML5 مثل:

- `align`: ضبط محاذاة الخط الأفقي في الصفحة، والقيمة الافتراضية هي `left`.
- `size`: ضبط ارتفاع الخط الأفقي بالبكسلات.
- `width`: ضبط طول الخط الأفقي بالبكسلات أو كنسبة مئوية.

لا يستحسن أن تستعمل الخاصيات السابقة في الصفحات الحديثة لأنها أصبحت مهملة، وذكرناها هنا لغرض العلم بها.

## تنسيق العنصر

تعرض أغلبية المتصفحات العنصر `<hr>` مع ضبط الخاصية `display` إلى `block`، مع إضافة هوامش (`margin-top` و `margin-bottom` و `margin-left` و `margin-right`)، وإطار (`border-style` و `border-width`):

```css
hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}
```

## مواضيع ذات صلة

- [العنصر](https://coreiten.com/topic/%D8%A7%D9%84%D8%B9%D9%86%D8%B5%D8%B1)
- [تعلم html من الصفر](https://coreiten.com/topic/%D8%AA%D8%B9%D9%84%D9%85-html-%D9%85%D9%86-%D8%A7%D9%84%D8%B5%D9%81%D8%B1)
- [تصميم مواقع](https://coreiten.com/topic/%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%85%D9%88%D8%A7%D9%82%D8%B9)
- [برمجة مواقع](https://coreiten.com/topic/%D8%A8%D8%B1%D9%85%D8%AC%D8%A9-%D9%85%D9%88%D8%A7%D9%82%D8%B9)
- [لغة html](https://coreiten.com/topic/%D9%84%D8%BA%D8%A9-html)