حلول مصر

سيتم مراجعة بياناتك من قبل فريق العمل، وفي حال قبولك سيتم تفعيل حسابك وإبلاغك بذلك عبر البريد الإلكتروني المسجل.

الفقرات والنصوص HTML

العنصر الأهم للنصوص - الفقرات

هذا الوسم هو اختصار لكلمة "Paragraph" (فقرة). وظيفته الدلالية (Semantic) هي تحديد "فقرة نصية" كوحدة مستقلة من المحتوى. هذا الدرس مخصص بالكامل لشرح هذا الوسم، وسلوكه، وقواعد استخدامه الصحيحة. وكما هو الحال مع العناوين، فإن جميع الأمثلة التالية مكانها "حصرياً" داخل الوسم <body>.

ما هو الوسم <p>؟

الوسم <p> هو "وسم مزدوج" (Container Tag)، مما يعني أنه يتطلب وسم فتح <p> ووسم إغلاق </p>.

وظيفته الأساسية هي "تغليف" كتلة من النص المتصل (مجموعة من الجمل) كوحدة واحدة. عندما يقرأ المتصفح الوسم <p>، فإنه يفهم دلالياً (semantically) أن هذا المحتوى هو "فقرة" مستقلة، ويقوم بعرضها بناءً على ذلك.

افتراضيًا، تقوم المتصفحات بإضافة "هوامش" (margins) بسيطة أعلى وأسفل كل فقرة، لفصلها بصريًا عن العناصر التي تسبقها وتليها.

لماذا نستخدم <p>؟ (مقارنة بالكتابة الحرة)

قد يتساءل المبتدئ: "لماذا أحتاج إلى وسم <p>؟ ألا يمكنني كتابة النص مباشرة داخل <body>؟"

الإجابة هي: نعم، يمكنك ذلك تقنيًا، ولكن هذا يُعتبر ممارسة "سيئة للغاية" وتفتقر إلى "المعنى الدلالي".

  • بدون <p> (نص حر): المتصفح لا يفهم ما هو هذا النص. هل هو عنوان؟ هل هو فقرة؟ هل هو ملحوظة؟ إنه مجرد "نص عائم" (floating text). هذا يجعل من المستحيل تنسيقه بشكل صحيح باستخدام CSS أو قراءته بواسطة تقنيات قراءة الشاشة (Accessibility).
  • باستخدام <p>: أنت تخبر المتصفح "هذه كتلة نصية واحدة". هذا يمنحك القدرة على:
    • تطبيق تنسيقات CSS عليها (مثل تغيير لون كل الفقرات، أو تحديد هوامش معينة).
    • إعطاء معنى هيكلي للصفحة، وهو أمر حيوي لمحركات البحث.

مثال (1): نص "حر" مقابل نص منظم بالفقرات

لاحظ الفرق في الكود التالي بين النص المكتوب مباشرة في <body> والنص المنظم داخل وسوم <p>.

مثال (1): نص حر مقابل فقرات منظمة 

<body>

    <h1>مقال عن أهمية الهيكلة</h1>
    
    <!-- (طريقة خاطئة: نص حر) -->
    هذا نص مكتوب مباشرة في الجسم.
    إنه يفتقر إلى البنية الدلالية.
    من الصعب تنسيقه.

    <!-- (طريقة صحيحة: استخدام الفقرات) -->
    <p>هذه هي الفقرة الأولى. إنها تحتوي على مجموعة من الجمل المترابطة.</p>
    <p>وهذه هي الفقرة الثانية. لاحظ كيف يفصلها المتصفح تلقائيًا عن الفقرة الأولى.</p>

</body>

في المثال أعلاه، النص الحر قد يظهر "ملتصقًا" ببعضه (حسب المتصفح)، بينما الفقرات المنظمة <p> ستظهر مفصولة بوضوح مع هوامش.

الخاصية الأهم: <p> هو عنصر كُتَلي (Block)

هذه هي المعلومة التقنية الأهم في هذا الدرس. في HTML، تنقسم العناصر (في الغالب) إلى نوعين: "Block" (كُتَلي) و "Inline" (سطري).

وسم الفقرة <p> هو "عنصر كُتَلي" (Block-level element).

ماذا يعني ذلك؟ يعني أنه يتبع هذه القواعد:

  • يبدأ على سطر جديد: الفقرة "دائمًا" تبدأ من بداية سطر جديد، حتى لو كان هناك فراغ بجانب العنصر الذي يسبقها.
  • يشغل كامل العرض: افتراضيًا، الفقرة تمتد لتشغل 100% من عرض الحاوية (Container) الموجودة بداخلها (في حالتنا، <body>).
  • يُنهي السطر بعده: أي عنصر يأتي "بعد" وسم <p> يُجبر على البدء في سطر جديد.

لهذا السبب، عند كتابة فقرتين متتاليتين، فإنهما تظهران "تحت" بعضهما البعض، وليس "بجانب" بعضهما.

مثال (2): إثبات السلوك الكُتَلي للفقرات

حتى لو حاولت وضع وسمي <p> بجانب بعضهما في المحرر، فإن المتصفح سيقوم بعرضهما تحت بعضهما بسبب طبيعتهما الكُتَلية.

مثال (2): السلوك الكُتَلي (Block) 

<body>

    <h2>تجربة السلوك الكُتَلي</h2>

    <!-- حتى لو كُتبت هذه الوسوم على نفس السطر في المحرر -->
    <p>أنا الفقرة الأولى.</p><p>أنا الفقرة الثانية.</p>
    
    <p>أنا الفقرة الثالثة.</p>

</body>

النتيجة المتوقعة في المتصفح:

أنا الفقرة الأولى.

أنا الفقرة الثانية.

أنا الفقرة الثالثة.

سيقوم المتصفح بعرض كل فقرة على سطر مستقل، متجاهلاً تماماً طريقة كتابتها في الكود المصدري.

مفهوم "انهيار المسافات البيضاء" (Whitespace Collapse)

هذا مفهوم حيوي آخر. المتصفحات لديها قاعدة تسمى "انهيار المسافات البيضاء".

هذا يعني أن المتصفح "يتجاهل" أي مسافات بيضاء (Spaces) أو فواصل أسطر (Line Breaks) أو مسافات جدولة (Tabs) زائدة في الكود المصدري.

  • إذا كتبت 10 مسافات متتالية، المتصفح سيراها "مسافة واحدة".
  • إذا ضغطت "Enter" 5 مرات (لإنشاء 5 أسطر جديدة) داخل الكود، المتصفح سيراها "كمسافة واحدة" (أو يتجاهلها تماماً إذا كانت بين الوسوم).

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

مثال (3): إثبات انهيار المسافات (الكود غير المنسق)

لنقم بإنشاء فقرة واحدة <p> ونضع بداخلها مسافات وفواصل أسطر عشوائية.

مثال (3): انهيار المسافات البيضاء 

<body>

    <h2>تجربة انهيار المسافات</h2>
    
    <p>
        أنا
        الفقرة
        الأولى.
        
        لقد قمت     بوضع
        الكثير من      المسافات
        
        وفواصل الأسطر.
    </p>

</body>

النتيجة المتوقعة في المتصفح:

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

سيقوم المتصفح بـ "تنظيف" كل هذه الفوضى وعرضها كجملة واحدة نظيفة، مع تحويل كل المسافات المتعددة إلى مسافة واحدة فقط.

الحل: استخدام الوسم <br>

إذا كان "انهيار المسافات" هو القاعدة، فكيف يمكننا "إجبار" المتصفح على النزول إلى سطر جديد داخل نفس الفقرة (مثل كتابة عنوان بريدي أو بيت شعر)؟

هنا يأتي دور الوسم <br>.

الوسم <br> هو اختصار لـ "Break" (فاصل).

وهو "وسم فارغ" (Empty Tag)، تماماً مثل <img> (الذي سنتناوله لاحقاً). هذا يعني أنه ليس له وسم إغلاق. لا يوجد شيء اسمه </br>.

وظيفته بسيطة: إخبار المتصفح "قم بإنهاء هذا السطر فوراً وانتقل إلى السطر التالي".

الفرق الجوهري: <p> يُنشئ "فقرة جديدة" (مع هوامش ومسافات). <br> يُنشئ "فاصل سطر" (بدون أي هوامش إضافية، فقط النزول للسطر التالي).

مثال (4): تطبيق <br> لعمل فواصل أسطر

هذا مثال كلاسيكي لكتابة عنوان بريدي داخل فقرة واحدة.

مثال (4): استخدام الوسم <br> 

<body>

    <h2>العنوان البريدي</h2>
    
    <p>
        شركة الويب الحديث<br>
        123 شارع الكورنيش<br>
        الدور الخامس، مكتب 501<br>
        القاهرة، مصر
    </p>

</body>

النتيجة المتوقعة في المتصفح:

شركة الويب الحديث
123 شارع الكورنيش
الدور الخامس، مكتب 501
القاهرة، مصر

كما تلاحظ، ظهرت جميع الأسطر تحت بعضها مباشرة دون المسافات (الهوامش) الكبيرة التي تفصل بين الفقرات.

قواعد التداخل (Nesting) لوسم الفقرة

ما الذي يمكن وضعه "داخل" وسم <p>؟

  • مسموح: النص (Text) والعناصر "السطرية" (Inline elements). (العناصر السطرية هي وسوم لا تبدأ سطراً جديداً، مثل <strong> لتغليظ الخط، أو <em> لإمالته، أو <a> للروابط. سنتناولها لاحقاً).
  • ممنوع: لا يمكنك وضع أي عنصر "كُتَلي" (Block-level) آخر داخل <p>.

قاعدة صارمة: ممنوع منعاً باتاً وضع <p> داخل <p> آخر.

ممنوع أيضاً وضع <h1> (أو أي عنوان) داخل <p>. الفقرة تحتوي على نص، وليس على عناوين.

مثال (5): التداخل الخاطئ (فقرة داخل فقرة)

ماذا يحدث إذا حاولت كسر هذه القاعدة ووضعت فقرة داخل فقرة؟

مثال (5): التداخل الخاطئ (لا تفعل هذا) 

<body>

    <p>
        أنا الفقرة الأولى.
        
        <p>أنا الفقرة الثانية وأحاول أن أكون بداخل الأولى.</p>
        
        بقية الفقرة الأولى.
    </p>

</body>

المتصفح "ذكي" وسيحاول "تصحيح" هذا الخطأ. عندما يقرأ الكود أعلاه، سيقوم بالآتي:

  • يفتح <p> الأولى.
  • يقرأ "أنا الفقرة الأولى.".
  • عندما يرى <p> الثانية، يفهم أنك ارتكبت خطأ (لأن الفقرات لا تتداخل).
  • سيقوم "بإغلاق" الفقرة الأولى تلقائياً </p> (في الذاكرة).
  • ثم يفتح <p> الثانية ويعرضها.
  • ثم يغلقها </p>.
  • ثم يرى نص "بقية الفقرة الأولى."، فيقوم بفتح <p> "ثالثة" جديدة (تلقائياً) ويضع النص بداخلها.

النتيجة ستكون ثلاث فقرات منفصلة، وهو عكس ما كنت تنويه تماماً، وسيؤدي هذا إلى تدمير أي تنسيقات CSS كنت تطبقها.

(ملخص الدرس):
1. استخدم <p>...</p> لتغليف أي "فقرة نصية".
2. <p> هو عنصر "كُتَلي" (Block)، أي أنه يبدأ على سطر جديد ويأخذ العرض كاملاً.
3. المتصفح "يتجاهل" المسافات والأسطر الزائدة داخل الكود (انهيار المسافات).
4. استخدم الوسم الفارغ <br> "فقط" إذا كنت بحاجة لفاصل سطر (سطر جديد) "داخل" نفس الفقرة.
5. ممنوع منعاً باتاً وضع عناصر كُتَلية (مثل <p> أو <h1>) داخل <p> آخر.