وثائق HTML قابلة للتشغيل: الخط الأفقي

Q: كيف أضيف خطًا أفقيًا في HTML؟

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

Q: كيف أغيّر لون hr؟

أزل الحدود الافتراضية وارسم حدًا خاصًا بك: hr { border: none; border-top: 2px solid #2563eb; }. ضبط color وحده يغيّره أيضًا، لكن النمط الغائر الافتراضي يُبقيه مظللًا بلونين.

Q: كيف أجعل hr أسمك؟

اضبط عرض الحد: hr { border: none; border-top: 4px solid #111827; }. السمة size من الدروس القديمة ما زالت تعمل في المتصفحات لكنها مهجورة، لذلك استخدم CSS.

الخط الأفقي في HTML: وسم hr وكيفية تنسيقه

ارسم خطًا أفقيًا في HTML بالوسم <hr>. تعلّم ماذا يعني، وكيف تغيّر لونه وسماكته وعرضه ونمطه بـ CSS، وكيف تبني فاصلًا بنص في منتصفه، وكيف ترسم خطًا عموديًا.

تحتوي هذه الصفحة على محررات قابلة للتشغيل - حرّر، شغّل، وشاهد النتيجة فوراً.

بقلم Kevin Spektor, Co-founder & CTO

نُشر في Sep 24, 2026

كيف تضيف خطًا أفقيًا

ضع <hr> بين كتلتين من المحتوى. ليس له وسم إغلاق:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hr</title>
  <style>
    body { font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <p>The end of the first part of the story.</p>
  <hr>
  <p>Three weeks later, a new part begins.</p>
</body>
</html>

افتراضيًا يمتد الخط على كامل عرض حاويته، مع هامش صغير فوقه وتحته، ويُرسم كحد رمادي رفيع غائر (حافة فاتحة وأخرى داكنة).

<hr> اختصار horizontal rule. في HTML يعني فاصلًا موضوعيًا: انتقالًا في الموضوع أو المشهد داخل قسم. تعلن عنه قارئات الشاشة كفاصل. إن كنت تريد خطًا زخرفيًا فقط (تحت عنوان، حول بطاقة)، فارسمه بحد CSS على ذلك العنصر بدلًا من ذلك.

تنسيق hr بـ CSS

المظهر الافتراضي يأتي من الحدود، لذلك الطريقة الموثوقة لتنسيق <hr> هي إزالتها ورسم حد واحد بنفسك:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hr styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    hr { margin: 20px 0; }
    .blue { border: none; border-top: 2px solid #2563eb; }
    .thick { border: none; border-top: 6px solid #111827; }
    .dashed { border: none; border-top: 2px dashed #f59e0b; }
    .dotted { border: none; border-top: 3px dotted #16a34a; }
    .short { border: none; border-top: 2px solid #9ca3af; width: 40%; margin-inline: auto; }
    .round { border: none; height: 6px; background: #2563eb; border-radius: 3px; }
  </style>
</head>
<body>
  <hr>
  <hr class="blue">
  <hr class="thick">
  <hr class="dashed">
  <hr class="dotted">
  <hr class="short">
  <hr class="round">
</body>
</html>

لتغيير	استخدم
اللون	`border-top: 2px solid #2563eb` (بعد `border: none`)
السماكة	العرض داخل ذلك الحد، مثل `6px`
النمط	`solid` أو `dashed` أو `dotted` أو `double`
الطول	`width: 40%`، مع `margin-inline: auto` لتوسيطه
أطراف مستديرة	`height` مع `background` و`border-radius` بدلًا من الحد
المسافة حوله	`margin`

ضبط color: blue وحده على hr يغيّر الخط في المتصفحات الحالية، لكن النمط الافتراضي inset يظلله ويبقى ارتفاعه 2px. إعادة ضبط الحد تعطيك ما تطلبه بالضبط.

سمات hr القديمة

تستخدم الشيفرة القديمة سمات على الوسم نفسه:

<hr size="4" width="50%" color="red" noshade align="left">

size وwidth وcolor وnoshade وalign مهجورة. ما زالت المتصفحات تطبّقها كي تظهر الصفحات القديمة بشكل صحيح، لكنها HTML غير صالح وأصعب تغييرًا لاحقًا. استبدلها بـ CSS الموضح أعلاه.

فاصل بنص في منتصفه

خط «أو» بين زري تسجيل دخول ليس <hr> (فلا يمكن أن يحتوي hr على نص). هو صف flex يُرسم فيه خط على كل جانب من الكلمة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Divider with text</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 320px; }
    .divider { display: flex; align-items: center; gap: 12px; color: #6b7280; font-size: 14px; }
    .divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid #d1d5db; }
    button { width: 100%; padding: 10px; }
  </style>
</head>
<body>
  <button type="button">Continue with email</button>
  <p class="divider">or</p>
  <button type="button">Continue with a passkey</button>
</body>
</html>

القطعتان ::before و::after تأخذ كل منهما نصف المساحة الفارغة بـ flex: 1 وترسم حدًا علويًا. غيّر or إلى كلمة أطول وستقصر الخطوط لتتسع لها.

الخطوط العمودية

لا توجد نسخة عمودية من <hr>. ارسم خطًا عموديًا بحد على أحد جانبي عنصر، أو بعنصر رفيع داخل صف flex:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical line</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .quote { border-inline-start: 4px solid #2563eb; padding-inline-start: 12px; }
    .row { display: flex; align-items: center; gap: 16px; }
    .vr { width: 1px; align-self: stretch; background: #d1d5db; }
  </style>
</head>
<body>
  <p class="quote">A border on the start side makes a vertical line.</p>
  <div class="row">
    <span>Home</span>
    <span class="vr"></span>
    <span>Docs</span>
    <span class="vr"></span>
    <span>Blog</span>
  </div>
</body>
</html>

border-inline-start تضع الخط في بداية النص، أي على اليسار في الإنجليزية وعلى اليمين في العربية أو العبرية، فيعمل التخطيط في الاتجاهين.

أخطاء شائعة

كتابة </hr>. <hr> عنصر فارغ. <hr> أو <hr /> هو كل ما تحتاجه.
استخدام <hr> للزخرفة. تعلن قارئات الشاشة عن كل واحد منها. الخط البصري فقط مكانه CSS.
التنسيق بـ color وحدها. أعد ضبط الحد بـ border: none واضبط border-top.
استخدام <br> أو الشرطات السفلية لرسم الخطوط. استخدم <hr> أو حدًا. راجع السطر الجديد لمعرفة الغرض من <br>.
استخدام السمات المهجورة. انقل size وwidth وcolor وnoshade إلى CSS.

الأسئلة الشائعة

كيف أضيف خطًا أفقيًا في HTML؟

استخدم الوسم <hr> في سطر مستقل. هو عنصر فارغ بلا وسم إغلاق، ويرسم خطًا بكامل عرض الحاوية التي هو فيها.

كيف أغيّر لون hr؟

أزل الحدود الافتراضية وارسم حدًا خاصًا بك: hr { border: none; border-top: 2px solid #2563eb; }. ضبط color وحده يغيّره أيضًا، لكن النمط الغائر الافتراضي يُبقيه مظللًا بلونين.

كيف أجعل hr أسمك؟

اضبط عرض الحد: hr { border: none; border-top: 4px solid #111827; }. السمة size من الدروس القديمة ما زالت تعمل في المتصفحات لكنها مهجورة، لذلك استخدم CSS.

ماذا يعني hr؟

اختصار horizontal rule أي خط أفقي. في HTML الحالي يعني فاصلًا موضوعيًا: تغيّر الموضوع أو المشهد بين الفقرات. تعلن عنه قارئات الشاشة كفاصل.

كيف أرسم خطًا عموديًا في HTML؟

لا يوجد في HTML وسم لخط عمودي. أضف حدًا إلى أحد جانبي عنصر، مثل border-inline-start: 2px solid #e5e7eb، أو استخدم عنصرًا ضيقًا بلون خلفية داخل صف flex.

مفاهيم ذات صلة