<hr>
وسم الفاصل الأفقي <hr>
وسم hr يرسم فاصلًا أفقيًّا يعلن انتقالًا في الموضوع — فاصل دلالي لا مجرد خط زخرفي.
خط أفقي ذاتي الإغلاق يقول دلاليًّا: «هنا ينتهي سياق ويبدأ آخر» — بين مشاهد قصة، بين نهاية مقال وتعليقاته. إن كان الخط عندك زخرفة بصرية بحتة (تحت ترويسة مثلًا) فالأنظف border في CSS بلا أي وسم.
شكله الافتراضي متقشف، وتنسيقه الحديث كله عبر CSS: height وbackground وborder:none.
الصياغة
<p>نهاية القسم الأول.</p> <hr> <p>بداية موضوع جديد.</p>
⚡ جرّب بنفسك
عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.
🎨 محرّر HTML/CSS
<p>نهاية شرح الأساسيات.</p> <hr style="border:none; height:2px; background:linear-gradient(90deg, transparent, #7c5cff, transparent)"> <p>ننتقل الآن للمستوى المتقدم.</p>
النتيجة المباشرة:
أهم الخصائص
| الخاصية | الوظيفة |
|---|---|
| — | ذاتي الإغلاق بلا خصائص تذكر — التنسيق عبر CSS |
💡 نصائح عملية
- لخط أنيق: border:none مع height وbackground متدرج
- اسأل قبل استخدامه: هل هذا انتقال موضوع فعلًا أم زخرفة؟ الزخرفة لـ CSS
⚠️ أخطاء شائعة
- تكديسه كزخرفة بين كل عنصرين
- محاولة تنسيقه بخصائص HTML قديمة (width, color) — كلها مهجورة
وسوم ذات صلة
🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.
📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs