شرح وسم <br> في HTML: كيفية إدراج فاصل سطر بطريقة صحيحة

ما هو وسم <br> في HTML؟

عند كتابة صفحات الويب باستخدام HTML، قد تحتاج أحياناً إلى كسر السطر داخل النص من دون بدء فقرة جديدة. هنا يأتي دور وسم <br>، وهو الوسم المخصص لإدراج فاصل سطر داخل المحتوى النصي.

يُستخدم هذا الوسم كثيراً في الحالات التي يكون فيها ترتيب الأسطر مهماً بصرياً، مثل:

• العناوين البريدية.
• الأبيات الشعرية.
• النصوص التي تتطلب تنسيقاً سطرياً محدداً.

من المهم معرفة أن متصفح الويب يتجاهل عادةً الضغط على مفتاح Enter داخل ملف HTML، لذلك فإن الانتقال إلى سطر جديد من لوحة المفاتيح وحده لا يكفي لإظهار فاصل سطر في الصفحة.

الصيغة الأساسية لاستخدام وسم <br>

يمكنك إدراج فاصل سطر في HTML باستخدام الوسم <br>. وهو يعادل عملياً الانتقال إلى سطر جديد داخل النص.

<br />

قد تلاحظ وجود الشرطة المائلة / في بعض الأمثلة، وذلك كان شائعاً في إصدارات أقدم مثل HTML4. أما في HTML5، فلم يعد وجودها إلزامياً، وبالتالي يمكن كتابة الوسم بهذه الصورة أيضاً:

<br>

الطريقتان تعملان بالشكل نفسه. وإذا كنت تستخدم أداة تنسيق أكواد مثل Prettier، فقد تضيف الشرطة المائلة تلقائياً عند حفظ الملف.

متى تستخدم وسم <br>؟

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

استخدامه في العناوين البريدية

عند كتابة عنوان بريدي، تحتاج غالباً إلى توزيع المحتوى على عدة أسطر حتى يظهر بشكل منظم وسهل القراءة.

هذا مثال على عنوان مكتوب من دون فواصل أسطر:

<p>The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.</p>

ولعرض المثال بشكل أوضح، يمكن استخدام تنسيق CSS التالي:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-size: 3rem;
  max-width: 1000px;
  margin: 0 auto;
}

وهذا هو شكل العنوان في المتصفح عندما لا نستخدم وسم <br>:

أما إذا أردت تنسيق العنوان بصورة صحيحة، فيمكنك استخدام فواصل الأسطر كما يلي:

<p>
  The White House<br />
  1600 Pennsylvania Avenue<br />
  NW Washington, DC<br />
  20500<br />
  USA
</p>

وهكذا سيظهر العنوان في المتصفح بشكل أكثر وضوحاً وتنظيماً:

استخدامه في كتابة الأبيات الشعرية

القصائد والنصوص الأدبية القصيرة تعتمد بصرياً على ترتيب الأسطر، لذلك فإن وسم <br> يساعد على الحفاظ على بنية النص كما أراد الكاتب.

إليك مثالاً على قصيدة مكتوبة من دون فواصل أسطر:

<p>
  I dabbled around a lot when I decided to learn to code I went from A to Z with resources When I decided to make my own things I discovered I've been in the old all while So I remained a novice in coding But then I found freeCodeCamp I got my hands on the platform I went from novice to ninja in coding And now I'm a camper for life
</p>

وسيظهر الشكل في المتصفح على هيئة كتلة نصية متصلة يصعب قراءتها كشعر:

لكن عند إضافة وسم <br> بعد كل سطر، يصبح التنسيق أوضح بكثير:

<p>
  I dabbled around a lot when I decided to learn to code<br />
  I went from A to Z with resources<br />
  When I decided to make my own things<br />
  I discovered I've been in the old all while<br />
  So I remained a novice in coding<br />
  But then I found freeCodeCamp<br />
  I got my hands on the platform<br />
  I went from novice to ninja in coding<br />
  And now I'm a camper for life<br />
</p>

وقد تم تعديل حجم الخط في CSS ليصبح مناسباً أكثر للعرض:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-size: 2.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

والنتيجة النهائية تكون قصيدة أكثر ترتيباً وقابلية للقراءة:

أخطاء شائعة عند استخدام وسم <br>

رغم فائدة هذا الوسم، فإن استخدامه في غير موضعه يُعد من الأخطاء الشائعة في كتابة HTML. ومن المهم التمييز بين كسر السطر داخل النص، وبين إنشاء مسافات بين العناصر.

لا تستخدم <br> لصناعة فراغات بين العناصر

لا يُنصح باستخدام وسم <br> لإجبار المتصفح على ترك مسافة بين العناصر من نوع الكتلة مثل:

• <p>
• <h1>
• <h2>
• <h3>
• <div>

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

هل يمكن تنسيق وسم <br> باستخدام CSS؟

نعم، من الناحية التقنية يمكن استهداف وسم <br> وتطبيق بعض الأنماط عليه، لكن ذلك نادراً ما يكون ذا فائدة عملية. السبب أن وظيفة هذا الوسم بسيطة جداً: إنشاء انتقال إلى سطر جديد داخل النص، وليس بناء عنصر مرئي غني بالخصائص.

أفضل الممارسات لاستخدام وسم <br>

• استخدمه فقط عندما يكون كسر السطر جزءاً من معنى المحتوى.
• اعتمد على CSS عند الحاجة إلى ضبط المسافات والتباعد بين العناصر.
• حافظ على بنية دلالية صحيحة للمحتوى، ولا تستبدل الفقرات أو العناوين بسلسلة من وسوم <br>.
• اختبر النتيجة بصرياً على الجوال وسطح المكتب للتأكد من أن التنسيق يخدم تجربة المستخدم.

الخلاصة التقنية

وسم <br> في HTML أداة بسيطة لكنها مهمة عند الحاجة إلى كسر السطر داخل النصوص مثل العناوين والقصائد والمحتوى الذي يعتمد على ترتيب بصري محدد. الاستخدام الصحيح له يحسن قابلية القراءة ويجعل الصفحة أكثر احترافية، بينما الإفراط فيه أو توظيفه بدلاً من CSS يؤدي إلى بنية ضعيفة وصعبة الصيانة. باختصار: استخدم <br> لكسر السطر، واستخدم margin للتباعد بين العناصر.