شرح الفقرات في HTML بالعربي — وسم
وتنسيق النصوص
تعرفنا على هيكل الصفحة والعناوين. الآن سننزل خطوة أعمق ونتعلم كيف نعرض النصوص الفعلية في محتوى الصفحة.
أساس هذا كله هو وسم الفقرة <p> — وهو من أكثر الوسوم استخداماً في HTML على الإطلاق.
وسم الفقرة <p>
<p> اختصار لكلمة Paragraph، أي فقرة.
يُستخدم لتحديد كتلة نصية متكاملة — مثل فقرة في كتاب أو مقال.
<p>هذه فقرة نصية أولى. يمكنها أن تحتوي على جمل متعددة.</p>
<p>هذه فقرة ثانية منفصلة عن الأولى.</p>
<p>وهذه الثالثة. كل فقرة تبدأ في سطر جديد تلقائياً.</p>
المتصفح يضيف تلقائياً مسافة فارغة أعلى وأسفل كل فقرة — بدون أن تكتب شيئاً. هذا يجعل النصوص سهلة القراءة بشكل تلقائي.
قاعدة بسيطة: كل فكرة مستقلة أو كتلة نصية = فقرة <p> منفصلة. لا تضع كل النص في فقرة واحدة.
مشكلة المسافات في HTML — قاعدة مهمة جداً
هذه من أكثر النقاط التي تُربك المبتدئين. استمع جيداً: المتصفح يتجاهل تماماً الأسطر الفارغة والمسافات الزائدة التي تكتبها في الكود.
<!-- ما تكتبه في الكود -->
<p>
هذا النص
على عدة أسطر
مع مسافات كثيرة.
</p>
ما يظهر في المتصفح:
هذا النص على عدة أسطر مع مسافات كثيرة.المتصفح يدمج كل المسافات والأسطر في مسافة واحدة فقط. هذا ليس خطأ — هذا سلوك HTML المقصود. ولتجاوزه، تستخدم وسوماً خاصة سنراها الآن.
<p>. استخدم فقرة <p> جديدة لكل كتلة نصية مستقلة.
وسم <br> — كسر السطر
تحتاج أحياناً إلى الانتقال لسطر جديد داخل نفس الفقرة — مثل عند كتابة عنوان بريدي أو قصيدة.
هنا يأتي دور <br> (اختصار Line Break).
<p>
موقع DevArabi<br>
لتعلم البرمجة<br>
بالعربي من الصفر
</p>
النتيجة في المتصفح:
موقع DevArabi
لتعلم البرمجة
بالعربي من الصفر
لاحظ أن <br> عنصر فارغ — لا يحتاج وسم إغلاق ولا يحتوي على محتوى.
هو مجرد تعليمة للمتصفح: "ابدأ سطراً جديداً هنا".
<br> لإضافة مسافات بين الفقرات. إذا أردت فراغاً بين فقرتين، استخدم فقرة <p> منفصلة أو CSS. وسم <br> فقط للانتقال السطري داخل نفس الفقرة.
وسم <hr> — خط فاصل أفقي
<hr> اختصار لـ Horizontal Rule، أي خط أفقي.
يرسم خطاً أفقياً عبر كامل عرض الصفحة لفصل الأقسام بصرياً.
<h2>القسم الأول — مقدمة HTML</h2>
<p>HTML هي لغة بناء صفحات الويب...</p>
<hr>
<h2>القسم الثاني — أساسيات CSS</h2>
<p>CSS تُستخدم لتنسيق صفحات الويب...</p>
مثل <br>، هو أيضاً عنصر فارغ — لا يحتاج وسم إغلاق.
يمكن تغيير شكله لاحقاً بـ CSS (لونه، سماكته، نمطه).
وسم <pre> — النص المحافظ على تنسيقه
<pre> اختصار لـ Preformatted text.
يُستخدم عندما تريد أن يُعرض النص بالضبط كما كتبته — محافظاً على المسافات والأسطر.
<pre>
هذا النص
سيظهر
مع مسافاته الأصلية
بالضبط كما كتبته هنا!
</pre>
المتصفح يعرض محتوى <pre> بخط طراز ثابت (Monospace) ويحترم كل مساحة وسطر.
يُستخدم كثيراً لعرض أكواد البرمجة داخل صفحات الويب.
مقارنة بين الوسوم الأربعة
| الوسم | وظيفته | متى تستخدمه؟ |
|---|---|---|
<p> |
فقرة نصية كاملة | لكل كتلة نصية مستقلة — الاستخدام الرئيسي |
<br> |
كسر السطر داخل الفقرة | عناوين بريدية، قصائد، أي نص يحتاج أسطراً داخل فقرة |
<hr> |
خط أفقي فاصل | فصل موضوع عن آخر بصرياً |
<pre> |
نص بتنسيقه الأصلي | أكواد برمجية، نصوص تحتاج مسافات دقيقة |
مثال عملي كامل
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>صفحة نصية تجريبية</title>
</head>
<body>
<h1>وصفة: كيك الشوكولاتة</h1>
<p>وصفة سهلة وسريعة يمكن إعدادها في أقل من ساعة. مناسبة للمبتدئين في الطبخ.</p>
<hr>
<h2>المكونات</h2>
<p>
2 كوب دقيق<br>
1 كوب سكر<br>
3/4 كوب كاكاو<br>
2 بيضة<br>
1 كوب حليب
</p>
<hr>
<h2>طريقة التحضير</h2>
<p>اخلط المكونات الجافة أولاً، ثم أضف البيض والحليب تدريجياً. اخبز في الفرن على درجة 180 مئوية لمدة 30 دقيقة.</p>
</body>
</html>
الأسئلة الشائعة — FAQ
هل يمكن تداخل فقرات <p> داخل بعضها؟
لا. لا يمكن وضع فقرة داخل فقرة أخرى. الكود <p><p>نص</p></p> خاطئ والمتصفح سيتصرف بشكل غير متوقع. كل فقرة تكون دائماً مستقلة.
كم عدد المرات يمكنني استخدام <br> في الصفحة؟
لا يوجد حد. لكن الإفراط في استخدام <br> بدل الفقرات المنفصلة هو ممارسة سيئة. إذا وجدت نفسك تستخدم 3 أو أكثر متتالية — على الأرجح يجب أن تستخدم <p> أو CSS بدلاً منه.
ما الفرق بين مسافة الفقرة ومسافة كسر السطر؟
<p> يضيف فراغاً أكبر أعلى وأسفل النص — تبدو كفقرة مستقلة في كتاب.
<br> فقط ينتقل لسطر جديد بدون فراغ إضافي — مثل Enter في Word.
هل <hr> يمكن تنسيقه بـ CSS؟
نعم. يمكنك تغيير لونه، سماكته، وعرضه بسهولة بـ CSS. مثلاً:
hr { border: 2px solid blue; width: 50%; }
<strong> و<em> و<mark> التي تُحسّن مظهر نصوصك وتُبرز أجزاء مهمة منها.