تنسيق النصوص (br, hr, التعليقات)

html br taghtml hr taghtml commentsتعليقات htmlالسطر الجديد htmlbr vs p html

جدول مرجعي سريع

الوسم	النوع	الوظيفة	ملاحظات
<br>	عنصر مفرد (Void)	سطر جديد داخل نفس الفقرة أو العنصر	لا يُضيف مسافة — فقط ينتقل للسطر التالي
<hr>	عنصر مفرد (Void)	خط أفقي فاصل بين أقسام المحتوى	دلالة HTML5: تحول موضوعي
<!-- -->	تعليق (Comment)	نص للمطورين — لا يظهر في الصفحة	مرئي في view-source — لا تضع بيانات حساسة
<br> (خاطئ)	—	استخدامه المتكرر كبديل لفقرات جديدة	استخدم <p> بدلاً منه للفقرات المستقلة
<hr> في CSS	—	تخصيص اللون والسماكة والنمط	border: none; border-top: 2px solid #ccc;

الشرح

بعد تعلم العناوين والفقرات، ثمة ثلاثة عناصر بسيطة لكنها شديدة الاستخدام: عنصر السطر الجديد br، والخط الأفقي الفاصل hr، والتعليقات. هذه العناصر تُتيح لك التحكم الدقيق في عرض النص وتنظيم الكود.

عنصر br (Line Break): يُنشئ سطراً جديداً داخل نفس الفقرة أو العنصر. على عكس الفقرة الجديدة التي تُضيف مسافة كبيرة، فإن ينتقل فقط للسطر التالي بدون أي مسافة إضافية. هذا العنصر مفيد جداً في حالات محددة مثل: كتابة العناوين البريدية، أبيات الشعر والقصائد، النصوص التي تحتاج أسطراً متعددة داخل وحدة واحدة.

متى تستخدم br ومتى تستخدم p؟ إذا كانت فقرتان فكرتان مستقلتان استخدم . إذا كان الأمر سطراً جديداً داخل نفس الفكرة أو القطعة استخدم . لا تستخدم كبديل لـ — هذا أسلوب قديم وغير صحيح دلالياً.

عنصر hr (Horizontal Rule): يرسم خطاً أفقياً يمتد عبر عرض الصفحة (أو الحاوية التي يقع فيها). يُستخدم بصرياً لفصل أقسام المحتوى عن بعضها. رغم أنه عنصر بصري في الظاهر، إلا أن له دلالة دلالية في HTML5: يُمثّل تحولاً موضوعياً أو فصلاً بين موضوعين مختلفين.

التعليقات في HTML: التعليق (Comment) هو نص يكتبه المطور في الكود لكن المتصفح لا يعرضه للمستخدم ولا يُفسّره كـ HTML. يبدأ بـ . يمكن أن يكون في سطر واحد أو يمتد على عدة أسطر.

لماذا تكتب تعليقات؟ التعليقات ليست للمتصفح بل للمطورين — لك وللفريق معك. تُستخدم لـ: شرح غرض قسم من الكود، التنبيه على تعديلات مهمة، تعطيل جزء من الكود مؤقتاً أثناء الاختبار (Commenting Out)، وتقسيم الملف الكبير إلى أقسام منظمة.

تحذير أمني: لا تضع معلومات حساسة (كلمات مرور، مفاتيح API، معلومات شخصية) في تعليقات HTML — لأن التعليقات مرئية لأي شخص يضغط "عرض المصدر" في المتصفح.

الصياغة (Syntax)

syntax

1	<!-- السطر الجديد داخل نفس الفقرة -->
2	<p>السطر الأول<br>السطر الثاني<br>السطر الثالث</p>
3
4	<!-- الخط الفاصل الأفقي -->
5	<hr>
6
7	<!-- التعليق في سطر واحد -->
8	<!-- هذا تعليق لا يظهر للمستخدم -->
9
10	<!-- التعليق متعدد الأسطر -->
11	<!--
12	هذا تعليق
13	يمتد على عدة أسطر
14	لشرح جزء معقد من الكود
15	-->
16
17	<!-- تعطيل كود مؤقتاً -->
18	<!--
19	<p>هذا النص معطّل مؤقتاً ولن يظهر</p>
20	-->

أمثلة عملية

مثال 1: استخدام br بشكل صحيح — قصيدة وعنوان بريدي

استخدام br بشكل صحيح — قصيدة وعنوان بريدي

1	<!DOCTYPE html>
2	<html lang="ar" dir="rtl">
3	<head><meta charset="UTF-8"><title>br - السطر الجديد</title></head>
4	<body>
5
6	<!-- ✅ استخدام صحيح: أبيات شعر -->
7	<p>
8	يا بلادي يا بلادي<br>
9	لكِ حبي وفؤادي<br>
10	أنتِ عزي ومرادي<br>
11	يا بلادي يا بلادي
12	</p>
13
14	<hr>
15
16	<!-- ✅ استخدام صحيح: عنوان بريدي -->
17	<address>
18	شركة نوفيل للتكنولوجيا<br>
19	شارع التحرير، المعادي<br>
20	القاهرة، مصر 11431<br>
21	هاتف: 01234567890
22	</address>
23
24	<hr>
25
26	<!-- ❌ استخدام خاطئ: لا تستخدم br كبديل لـ p -->
27	<!-- الطريقة الخاطئة القديمة: -->
28	<!--
29	الفكرة الأولى<br><br>
30	الفكرة الثانية<br><br>
31	-->
32
33	<!-- الطريقة الصحيحة: -->
34	<p>الفكرة الأولى — فقرة مستقلة.</p>
35	<p>الفكرة الثانية — فقرة مستقلة.</p>
36
37	</body>
38	</html>

مثال 2: التعليقات لتنظيم الكود

التعليقات لتنظيم الكود

1	<!DOCTYPE html>
2	<html lang="ar" dir="rtl">
3	<head><meta charset="UTF-8"><title>تنظيم الكود بالتعليقات</title></head>
4	<body>
5
6	<!-- ============================================
7	قسم: رأس الصفحة (Header)
8	============================================ -->
9	<header>
10	<h1>اسم الموقع</h1>
11	<nav>
12	<!-- روابط القائمة الرئيسية -->
13	<a href="/">الرئيسية</a>
14	<a href="/about">من نحن</a>
15	<a href="/contact">تواصل معنا</a>
16	</nav>
17	</header>
18
19	<!-- ============================================
20	قسم: المحتوى الرئيسي (Main Content)
21	آخر تعديل: 2025-01-15
22	============================================ -->
23	<main>
24	<h2>أحدث المقالات</h2>
25	<!-- TODO: استبدل هذا المحتوى الثابت ببيانات ديناميكية من API -->
26	<p>مقالة تجريبية — ستُستبدل قريباً</p>
27	</main>
28
29	<!-- ============================================
30	قسم: التذييل (Footer)
31	============================================ -->
32	<footer>
33	<p>جميع الحقوق محفوظة © 2025</p>
34	<!-- TODO: أضف روابط السياسة والخصوصية هنا -->
35	</footer>
36
37	<!-- [تعطيل مؤقت] هذا القسم معطّل للاختبار
38	<section class="ads">
39	<p>إعلان</p>
40	</section>
41	-->
42
43	</body>
44	</html>

نصائح احترافية

—استخدم فقط عندما يكون السطر الجديد جزءاً من المحتوى (مثل الشعر والعناوين البريدية) — لا تستخدمه لإضافة مسافات تنسيقية، لأن ذلك عمل CSS.
—لا تكتب كبديل للمسافة بين الفقرات — هذا أسلوب قديم وخاطئ دلالياً، استخدم أو CSS.
—استخدم <hr> عندما يكون هناك تحول موضوعي حقيقي — مثل الفصل بين أقسام مقالة أو نهاية نموذج وبداية قسم آخر.
—يمكن تخصيص مظهر <hr> بالكامل عبر CSS (اللون والسماكة والأسلوب) — لا تقلق من مظهره الافتراضي البسيط.
—اكتب تعليقات مفيدة تشرح لماذا وليس ماذا — الكود يُظهر ماذا تفعل، لكن التعليق يشرح لماذا اتخذت هذا القرار.
—تذكر دائماً: التعليقات مرئية لكل من يفتح "عرض المصدر" — لا تضع فيها كلمات مرور أو روابط حساسة أو انتقادات لزملاء العمل!

الدرس السابق

العناوين والفقرات (h1–h6, p)

الدرس التالي

عناصر إبراز النصوص (b, strong, i, em)

الوسم

النوع

الوظيفة

ملاحظات

عنصر مفرد (Void)

سطر جديد داخل نفس الفقرة أو العنصر

لا يُضيف مسافة — فقط ينتقل للسطر التالي

<hr>

عنصر مفرد (Void)

خط أفقي فاصل بين أقسام المحتوى

دلالة HTML5: تحول موضوعي

تعليق (Comment)

نص للمطورين — لا يظهر في الصفحة

مرئي في view-source — لا تضع بيانات حساسة

(خاطئ)

—

استخدامه المتكرر كبديل لفقرات جديدة

استخدم بدلاً منه للفقرات المستقلة

<hr> في CSS

—

تخصيص اللون والسماكة والنمط

border: none; border-top: 2px solid #ccc;