| الوسم | النوع | الوظيفة | ملاحظات |
|---|---|---|---|
| <br> | عنصر مفرد (Void) | سطر جديد داخل نفس الفقرة أو العنصر | لا يُضيف مسافة — فقط ينتقل للسطر التالي |
| <hr> | عنصر مفرد (Void) | خط أفقي فاصل بين أقسام المحتوى | دلالة HTML5: تحول موضوعي |
| <!-- --> | تعليق (Comment) | نص للمطورين — لا يظهر في الصفحة | مرئي في view-source — لا تضع بيانات حساسة |
| <br> (خاطئ) | — | استخدامه المتكرر كبديل لفقرات جديدة | استخدم <p> بدلاً منه للفقرات المستقلة |
| <hr> في CSS | — | تخصيص اللون والسماكة والنمط | border: none; border-top: 2px solid #ccc; |
بعد تعلم العناوين والفقرات، ثمة ثلاثة عناصر بسيطة لكنها شديدة الاستخدام: عنصر السطر الجديد br، والخط الأفقي الفاصل hr، والتعليقات. هذه العناصر تُتيح لك التحكم الدقيق في عرض النص وتنظيم الكود.
عنصر br (Line Break): يُنشئ سطراً جديداً داخل نفس الفقرة أو العنصر. على عكس الفقرة الجديدة <p> التي تُضيف مسافة كبيرة، فإن <br> ينتقل فقط للسطر التالي بدون أي مسافة إضافية. هذا العنصر مفيد جداً في حالات محددة مثل: كتابة العناوين البريدية، أبيات الشعر والقصائد، النصوص التي تحتاج أسطراً متعددة داخل وحدة واحدة.
متى تستخدم br ومتى تستخدم p؟ إذا كانت فقرتان فكرتان مستقلتان استخدم <p>. إذا كان الأمر سطراً جديداً داخل نفس الفكرة أو القطعة استخدم <br>. لا تستخدم <br><br> كبديل لـ <p> — هذا أسلوب قديم وغير صحيح دلالياً.
عنصر hr (Horizontal Rule): يرسم خطاً أفقياً يمتد عبر عرض الصفحة (أو الحاوية التي يقع فيها). يُستخدم بصرياً لفصل أقسام المحتوى عن بعضها. رغم أنه عنصر بصري في الظاهر، إلا أن له دلالة دلالية في HTML5: يُمثّل تحولاً موضوعياً أو فصلاً بين موضوعين مختلفين.
التعليقات في HTML: التعليق (Comment) هو نص يكتبه المطور في الكود لكن المتصفح لا يعرضه للمستخدم ولا يُفسّره كـ HTML. يبدأ بـ <!-- وينتهي بـ -->. يمكن أن يكون في سطر واحد أو يمتد على عدة أسطر.
لماذا تكتب تعليقات؟ التعليقات ليست للمتصفح بل للمطورين — لك وللفريق معك. تُستخدم لـ: شرح غرض قسم من الكود، التنبيه على تعديلات مهمة، تعطيل جزء من الكود مؤقتاً أثناء الاختبار (Commenting Out)، وتقسيم الملف الكبير إلى أقسام منظمة.
تحذير أمني: لا تضع معلومات حساسة (كلمات مرور، مفاتيح API، معلومات شخصية) في تعليقات HTML — لأن التعليقات مرئية لأي شخص يضغط "عرض المصدر" في المتصفح.
| 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 بشكل صحيح — قصيدة وعنوان بريدي
| 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> |