التعليقات واستخداماتها HTML

التعليقات في HTML واستخداماتها

في الدروس السابقة، تناولنا العناصر البنيوية التي تُعرض للمستخدم، مثل العناوين (<h1>) والفقرات (<p>). اليوم، سنتناول مكوناً مختلفاً تماماً: "التعليقات" (Comments).

التعليقات هي جزء فريد من كود HTML، حيث أنها تُكتب داخل الملف المصدري ولكن المتصفح يتجاهلها تماماً ولا يقوم بعرضها للمستخدم النهائي. قد يبدو هذا غير بديهي للمبتدئ: "لماذا نكتب شيئاً لن يتم عرضه؟".

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

ما هي الصيغة الصحيحة لكتابة تعليق؟

في لغة HTML، صيغة التعليق محددة وثابتة. يجب أن يبدأ التعليق بالصيغة .

لنتفحص هذه الصيغة بدقة:

وسم الفتح: يبدأ بقوس زاوية مفتوح (<)، يليه مباشرة علامة تعجب (!)، ثم شرطتان متتاليتان (--).
المحتوى: أي نص تريده، يمكن أن يكون على سطر واحد أو يمتد لعدة أسطر.
وسم الإغلاق: يتكون من شرطتين متتاليتين (--)، يليهما مباشرة قوس زاوية مغلق (>).

أي شيء يتم وضعه بين  سيتم "تجاهله تماماً" بواسطة محرك عرض المتصفح (Rendering Engine). لن يتم عرضه، ولن يؤثر على تخطيط (Layout) الصفحة.

(تحذير من خطأ شائع):
1. لا تضع مسافات بين علامة التعجب والشرطتين. <! -- (خاطئ).
2. لا تستخدم ثلاث شرطات <--- (خاطئ).
3. لا تنسَ الشرطتين في وسم الإغلاق. --> (صحيح) وليس -> (خاطئ).

الغرض الأول: التوثيق وترك الملاحظات

الغرض الأساسي والأكثر شيوعاً للتعليقات هو "التوثيق" (Documentation).

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

التعليقات تعمل "كملاحظات تذكيرية" للمطورين (سواء لنفسك في المستقبل أو لزملائك في الفريق).

ما الذي يجب توثيقه؟

شرح المنطق المعقد: إذا كان هناك جزء من الكود يقوم بشيء غير بديهي، اترك تعليقاً يشرح "السبب" (The Why). (مثال: ).
تقسيم الصفحة: تُستخدم التعليقات كـ "فواصل" مرئية لتقسيم ملف HTML الطويل إلى أقسام منطقية (مثل: "بداية قسم الترويسة"، "نهاية قسم الترويسة").
ملاحظات "للمهام المستقبلية" (TODO): يمكن للمطورين ترك ملاحظات لأنفسهم. (مثال: ).

مثال (1): استخدام التعليقات لتقسيم الكود

لاحظ كيف نستخدم التعليقات في هذا المثال لتنظيم ملف <body>. هذا لا يغير أي شيء في العرض النهائي، ولكنه يجعل الكود المصدري "نظيفاً" وسهل القراءة والفهم لأي مطور آخر.

مثال (1): تنظيم الكود بالتعليقات


<body>

    <!-- ======================================== -->
    <!--             بداية قسم الترويسة (Header)     -->
    <!-- ======================================== -->
    
    <h1>عنوان الموقع الرئيسي</h1>
    <p>شعار الموقع أو وصفه.</p>
    
    <!-- ======================================== -->
    <!--             نهاية قسم الترويسة (Header)      -->
    <!-- ======================================== -->
    
    
    <!-- ======================================== -->
    <!--             بداية المحتوى الرئيسي (Main)   -->
    <!-- ======================================== -->
    
    <h2>عنوان المقال الأول</h2>
    <p>نص الفقرة الأولى للمقال...</p>
    
    <h2>عنوان المقال الثاني</h2>
    <p>نص الفقرة الثانية للمقال...</p>

    <!-- ======================================== -->
    <!--             نهاية المحتوى الرئيسي (Main)    -->
    <!-- ======================================== -->

</body>

الغرض الثاني: "تعطيل" الكود (Commenting Out)

هذا استخدام شائع جداً أثناء عملية "تنقيح الأخطاء" (Debugging).

أحياناً، قد تظهر مشكلة في الصفحة (مثلاً: عنصر لا يظهر في مكانه الصحيح)، وتشك أن جزءاً معيناً من الكود هو السبب.

بدلاً من "حذف" هذا الكود (مما قد يضيعه منك)، يمكنك ببساطة "تعطيله" مؤقتاً عن طريق وضعه داخل تعليق.

تقوم بوضع <!-- قبل بداية الكود المشكوك فيه.
وتقوم بوضع --> بعد نهايته.

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

مثال (2): تعطيل جزء من الصفحة للتجربة

لنفترض أننا نشك في أن <h2> الثاني والفقرة التي تليه يسببان مشكلة في التنسيق. سنقوم بتعطيلهما مؤقتاً.

مثال (2): "Commenting Out" للكود


<body>
    <h1>عنوان الموقع الرئيسي</h1>
    
    <h2>عنوان المقال الأول</h2>
    <p>نص الفقرة الأولى للمقال...</p>
    
    <!-- 
        تم تعطيل هذا الجزء مؤقتاً لاختبار مشكلة في التنسيق
        
        <h2>عنوان المقال الثاني</h2>
        <p>نص الفقرة الثانية للمقال...</p>
    -->
    
    <h2>عنوان المقال الثالث</h2>
    <p>نص الفقرة الثالثة للمقال...</p>

</body>

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

سيتم عرض "عنوان المقال الأول" و "عنوان المقال الثالث". أما "عنوان المقال الثاني" والفقرة التابعة له، فسيتم تجاهلهما تماماً كما لو كانا غير موجودين.

نقطة هامة: لا يمكن تداخل التعليقات. لا يمكنك وضع تعليق  داخل تعليق آخر.

التعليقات أحادية السطر ومتعددة الأسطر

بعض لغات البرمجة (مثل JavaScript) لديها صيغ مختلفة للتعليقات، مثل (//) للسطر الواحد و (/* ... */) للأسطر المتعددة.

الأمر أبسط في HTML. لا يوجد سوى صيغة واحدة: .

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

مثال (3): استخدام كتلة تعليق متعدد الأسطر

يستخدم المطورون أحياناً كتل تعليقات كبيرة في بداية الملف لوضع "بيانات وصفية" (Metadata) حول الملف، مثل اسم المؤلف، تاريخ الإنشاء، ووصف موجز للملف.

مثال (3): كتلة تعليق متعددة الأسطر


<!DOCTYPE html>
<html>
<head>
    <!--
      ملف: index.html
      المؤلف: (اسمك)
      تاريخ الإنشاء: 05-11-2025
      
      الوصف: هذا هو الملف الرئيسي (الصفحة الرئيسية) للموقع.
             يحتوي على الترويسة والمحتوى الرئيسي.
    -->
    
    <title>الصفحة الرئيسية</title>

</head>
<body>
    <!-- المحتوى يبدأ هنا -->
</body>
</html>

تحذير أمني: ماذا لا يجب أن تضع في التعليقات؟

هذا هو التحذير الأهم في الدرس بأكمله.

لقد أكدنا أن التعليقات "لا تُعرض" في الصفحة. ولكن هذا لا يعني أنها "غير موجودة".

التعليقات هي جزء لا يتجزأ من الملف المصدري (Source Code). أي مستخدم، مهما كان مبتدئاً، يمكنه النقر بزر الماوس الأيمن على أي صفحة ويب واختيار "عرض مصدر الصفحة" (View Page Source).

عندما يفعل ذلك، سيتم فتح ملف HTML بالكامل أمامه، وسيتمكن من قراءة جميع التعليقات التي كتبتها.

لذلك، ممنوع منعاً باتاً وضع أي معلومات حساسة في التعليقات، مثل:

كلمات المرور (Passwords).
مفاتيح الواجهات البرمجية (API Keys).
بيانات الاتصال بقواعد البيانات.
أسماء مستخدمين.
ملاحظات داخلية محرجة أو انتقادات للعملاء أو الزملاء.
أجزاء من الكود القديم الذي قد يحتوي على ثغرات أمنية.

القاعدة: افترض دائماً أن "العالم كله" سيقرأ تعليقاتك.

الخلاصة: الفرق بين التعليق والمحتوى

من الضروري التمييز بوضوح بين الكود الذي يتم تجاهله والكود الذي يتم عرضه.

مثال (4): تعليق مقابل محتوى مرئي


<body>

    <h1>العناوين المرئية</h1>
    
    <!-- هذا تعليق. لن يراه المستخدم أبداً في الصفحة. -->
    
    <p>هذه فقرة مرئية. سيراها المستخدم.</p>
    
    <!-- 
      <p>هذه الفقرة لن تظهر لأنها داخل تعليق.</p>
    -->

</body>

(ملخص الدرس):
1. صيغة التعليق الثابتة هي:  وينتهي هنا.
2. الغرض الأساسي هو "التوثيق" و "شرح الكود" للمطورين.
3. الغرض الثاني هو "تعطيل الكود" (Commenting Out) أثناء اختبار الصفحة.
4. التعليقات "خفية" في العرض، ولكنها "مرئية" في الكود المصدري (View Source).
5. لا تضع "أبداً" أي معلومات حساسة (كلمات مرور، مفاتيح) داخل التعليقات.

قراءة المزيد

الفقرات والنصوص 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> آخر.

قراءة المزيد

شرح العناوين H | تعلم HTML

وسوم العناوين (H1 إلى H6)

في الدرس اللي فات، إحنا شرحنا "الهيكل العظمي" الكامل للصفحة: بدأنا بـ <!DOCTYPE>، وعرفنا الفرق بين الـ <head> (المخ الخفي) والـ <body> (الجسم المرئي).

قاعدة ذهبية: كل الوسوم اللي هنشرحها في الدرس ده (من <h1> لـ <h6>) مكانها "حصرياً" و "دائمًا" جوه الوسم <body>. أوعى تحطهم في الـ <head>.

إيه هي وسوم العناوين (Headings)؟

وسوم العناوين، أو الـ "Headings"، هي وسوم مزدوجة (ليها فتحة وقافلة) بنستخدمها عشان ندي "عناوين" للمحتوى بتاعنا.

تخيل إنك بتكتب مقالة في جرنان، أو بتألف كتاب. إنت مش بتكتب كل الكلام "سايح" على بعضه. إنت بتستخدم:

عنوان رئيسي ضخم للجرنان كله (ده الـ <h1>).
عناوين أصغر شوية للمقالات المختلفة (دي الـ <h2>).
عناوين فرعية جوه كل مقالة عشان تقسمها لنقط (دي الـ <h3>).

الوسوم دي هي اللي بتعمل كده بالظبط في صفحة الويب. هي بتعرف المتصفح (والزائر) "إيه هو الهيكل" بتاع الصفحة دي.

نقطة مهمة: كل وسوم العناوين هي وسوم "Block-level". يعني إيه؟ يعني الوسم بياخد "سطر لوحده". لما بتكتب <h1>، هو بينزل سطر جديد، وبعد ما بيخلص، أي حاجة بعده بتيجي في سطر جديد. (هنشرح الفرق بين Block و Inline بالتفصيل في المستقبل، بس خلي المعلومة دي في دماغك).

الأهمية الحقيقية: "الهرمية" مش "الشكل"

ده أهم مفهوم في الدرس كله، ولازم تفهمه 100%.

لما المبتدئ بيشوف الوسوم دي، بيلاحظ إن <h1> بيخلي الخط "كبير وتخين (Bold)"، وإن <h6> بيخلي الخط "صغير". فبيفتكر إن الوسوم دي وظيفتها "التصميم" أو "الاستايل". وده **غلط كارثي**.

وظيفة وسوم العناوين "ليست" تغيير شكل الخط. وظيفتها "الوصف" أو "المعنى".

لما بتكتب <h1>، إنت مش بتقول للمتصفح "خلي الخط ده كبير". إنت بتقوله "السطر ده هو أهم عنوان في الصفحة دي كلها".

لما بتكتب <h2>، إنت بتقوله "ده عنوان فرعي من العنوان الرئيسي اللي فات".

لما بتكتب <h6>، إنت بتقوله "ده عنوان تفصيلي صغير جدًا، أهميته هي أقل أهمية في الصفحة".

تشبيه هيكل الشركة

تخيل الصفحة بتاعتك شركة:

<h1>: هو "المدير العام" أو "رئيس مجلس الإدارة". (مفيش غير واحد بس).
<h2>: هما "نواب المدير" أو "مديرين الإدارات" (إدارة التسويق، إدارة الحسابات). (ممكن يكون فيه كذا واحد).
<h3>: هما "رؤساء الأقسام" جوه كل إدارة (رئيس قسم الدعاية جوه إدارة التسويق).
<h4>: هما "مديرين الفرق" جوه كل قسم.
وهكذا...

إنت بتستخدم الوسوم دي عشان تبني "الهيكل الإداري" للمحتوى بتاعك. أما "شكلهم" (حجم الخط ولونه) ده شغلانة الـ CSS اللي هنتعلمها بعدين، وهنغير كل الأشكال دي براحتنا.

القاعدة الأساسية: الـ 6 مستويات (H1 إلى H6)

لغة HTML بتقدملك 6 مستويات من العناوين عشان تبني بيهم الهيكل ده.

<h1>...</h1> (الأعلى أهمية)
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6> (الأقل أهمية)

"افتراضيًا" (Default)، المتصفح بيعرضهم بأحجام مختلفة عشان يوريك الفرق في الأهمية ده: <h1> بيكون الأكبر، و <h6> بيكون الأصغر (لدرجة إنه أحيانًا بيكون أصغر من الخط العادي!).

تعالَى نشوفهم كلهم تحت بعض في مثال:

مثال (1): عرض الـ 6 مستويات


<!DOCTYPE html>
<html>
<head>
    <title>درس العناوين</title>
</head>
<body>

    <h1>ده العنوان مستوى 1 (الأهم)</h1>
    <p>ده نص عادي للمقارنة.</p>

    <h2>ده العنوان مستوى 2</h2>
    <p>ده نص عادي للمقارنة.</p>

    <h3>ده العنوان مستوى 3</h3>
    <p>ده نص عادي للمقارنة.</p>

    <h4>ده العنوان مستوى 4</h4>
    <p>ده نص عادي للمقارنة.</p>

    <h5>ده العنوان مستوى 5</h5>
    <p>ده نص عادي للمقارنة.</p>

    <h6>ده العنوان مستوى 6 (الأقل أهمية)</h6>
    <p>ده نص عادي للمقارنة.</p>

</body>
</html>

لو جربت الكود ده، هتلاحظ إن <h1> ضخم، وكل اللي بعده بيصغر تدريجيًا.

الوسم `<h1>`: المدير العام (العنوان الأوحد)

الوسم <h1> هو أهم وسم في الصفحة. هو "العنوان الرئيسي" اللي بيقول للزائر "الصفحة دي كلها بتتكلم عن إيه".

قاعدة شبه رسمية: الصفحة الواحدة المفروض يكون فيها <h1> واحد بس.

ليه؟ نرجع لتشبيه الشركة. مينفعش شركة يكون فيها 5 مديرين عامين. هو مدير واحد بس اللي بيقول الكلمة العليا. نفس الكلام، مينفعش الصفحة يكون ليها 5 عناوين رئيسية. هو عنوان واحد بس اللي بيعرفنا الصفحة دي عن إيه.

العنوان اللي بتحطه في <h1> (جوه الـ <body>) المفروض يكون قريب جدًا في المعنى (أو مطابق) للعنوان اللي حطيته في <title> (جوه الـ <head>).

<title>: بيظهر في التاب فوق.
<h1>: بيظهر كأول وأكبر عنوان جوه الصفحة نفسها.

مثال (2): الاستخدام الصحيح لـ H1


<!DOCTYPE html>
<html>
<head>
    <title>وصفة عمل الكيكة الإسفنجية</title>
</head>
<body>

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

    <!-- (هنا هييجي باقي المحتوى زي H2 للمقادير و H2 للطريقة) -->

</body>
</html>

الوسم `<h2>`: نواب المدير (العناوين الرئيسية)

بما إننا استخدمنا <h1> خلاص، إزاي نقسم المقالة بتاعتنا؟ هنا بييجي دور الـ <h2>.

الـ <h2> بنستخدمه عشان نقسم الموضوع الرئيسي (بتاع <h1>) إلى "أقسام رئيسية".

في المثال بتاع الكيكة اللي فات:

<h1>: طريقة عمل الكيكة الإسفنجية...
<h2>: المقادير.
<h2>: طريقة التحضير.
<h2>: نصائح لنجاح الكيكة.

لاحظ إن "المقادير" و "طريقة التحضير" و "نصائح" كلها أقسام "متساوية في الأهمية" وكلها بتخدم على الموضوع الرئيسي <h1>. عشان كده كلهم بياخدوا <h2>.

إنت ممكن تستخدم <h2> أكتر من مرة عادي جدًا.

مثال (3): استخدام H1 مع H2


<body>

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

</body>

الوسوم `<h3>` إلى `<h6>`: باقي الفريق (التفاصيل)

طيب، إيه لازمة باقي المستويات؟

بنستخدمهم لما نحتاج نقسم "قسم فرعي" (زي <h2>) إلى "أقسام أصغر" جواه.

نرجع لمثال الكيكة: جوه قسم <h2> بتاع "طريقة التحضير"، ممكن أكون عايز أقسمه لنقطتين: "تحضير العجينة" و "التسوية في الفرن". في الحالة دي، النقطتين دول ياخدوا <h3>.

<h1>: طريقة عمل الكيكة...
- <h2>: المقادير
- <h2>: طريقة التحضير
  - <h3>: تحضير العجينة
  - <h3>: التسوية والخبز
- <h2>: نصائح...

القاعدة: "أوعى تنط". مينفعش تستخدم <h3> غير لو فيه <h2> فوقه. ومينفعش تستخدم <h4> غير لو فيه <h3> فوقه. لازم تمشي بالترتيب الهرمي.

بصراحة، في 90% من المواقع العادية، إنت نادرًا ما هتحتاج تنزل عن <h3> أو <h4>. المستويات <h5> و <h6> موجودة للمستندات المعقدة جدًا (زي الأبحاث العلمية أو الأوراق القانونية).

مثال متكامل: هيكل مقالة كاملة

ده مثال بيجمع كل حاجة، وبيوريك إزاي الهيكل الهرمي ده بيخلي المقالة منظمة وسهلة القراية.

مثال (4): هيكل هرمي كامل (H1-H4)


<body>

    <h1>دليل تعلم تطوير الويب للمبتدئين</h1>
    <p>هذا الدليل هو خطوتك الأولى...</p>
    
    <h2>الخطوة الأولى: تعلم الأساسيات (Frontend)</h2>
    <p>لتصميم شكل الموقع، يجب أن تبدأ بـ...</p>
    
        <h3>1. لغة HTML (الهيكل)</h3>
        <p>هي اللغة المسؤولة عن بناء هيكل الصفحة...</p>
        
        <h3>2. لغة CSS (التصميم)</h3>
        <p>هي المسؤولة عن الألوان والخطوط...</p>
        
        <h3>3. لغة JavaScript (التفاعل)</h3>
        <p>هي المسؤولة عن جعل الموقع تفاعلي...</p>
            
            <h4>أمثلة على التفاعل</h4>
            <p>- القوائم المنسدلة.</p>
            <p>- النوافذ المنبثقة.</p>

    <h2>الخطوة الثانية: تعلم (Backend)</h2>
    <p>بعد أن أتقنت الواجهة الأمامية...</p>
    
        <h3>1. لغات الخادم</h3>
        <p>مثل Python أو PHP...</p>
        
        <h3>2. قواعد البيانات</h3>
        <p>مثل MySQL أو MongoDB...</p>

</body>

شوف في المثال ده إزاي <h4> جت "جوه" الـ <h3> (بتاع الجافاسكريبت)، وإزاي كل الـ <h3> جت جوه الـ <h2>. ده اسمه "التداخل السليم" (Proper Nesting) للعناوين.

الخطأ الأكبر: استخدام العناوين لتكبير الخط

هنرجع نأكد على النقطة دي تاني لأنها أهم غلطة بيقع فيها المبتدئين.

سيناريو خاطئ:
المبرمج بيكتب مقالة، وبعدين بيحتاج يكتب "ملحوظة" بخط كبير وتخين شوية عشان يلفت النظر. فبيبص على العناوين، ويلاقي إن حجم <h3> مناسب للي هو عايزه. فيروح كاتب الملحوظة دي جوه <h3>.

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

إيه الصح؟

لو عايز تلفت النظر لنص معين، أو تكبر خطه، أو تخليه تخين (Bold):

اكتبه جوه الوسم العادي بتاعه (في الغالب <p> للفقرة).
بعدين، لما نتعلم CSS، هنروح لملف الـ CSS ونقوله "خلي الفقرة دي بالذات" (هنديها "كلاس" أو "أي دي") شكلها كبير وتخين.

القاعدة: HTML للهيكل والمعنى. CSS للشكل والجمال. أوعى تخلطهم ببعض. استخدم <h1> لـ <h6> "فقط" لما تكون بتكتب "عنوان" حقيقي.

ملحوظة عن محركات البحث (SEO)

إنت غالبًا هتسمع كتير إن وسوم العناوين (خصوصًا <h1> و <h2>) "مهمة جدًا لمحركات البحث" زي جوجل (أو ما يُعرف بالـ SEO).

الكلام ده صح 100%.

جوجل بيبص على العناوين دي (خصوصًا <h1>) عشان يفهم بسرعة الصفحة دي بتتكلم عن إيه. لما إنت بتستخدم الهيكل الهرمي (H1, H2, H3) بشكل مظبوط، إنت كأنك بتقدم لجوجل "ملخص" للمقالة بتاعتك، وده بيساعده إنه يظهر موقعك للناس الصح.

لكن، إحنا مش هنشرح بالتفصيل إزاي ده بيحصل أو إزاي نكتبها عشان الـ SEO بالظبط. دي قصة لوحدها وهندخل فيها في دروس متقدمة جدًا في المستقبل.

كل اللي محتاجك تعرفه "دلوقتي" هو: لو استخدمت العناوين صح عشان "تنظم المحتوى" بتاعك للزائر، إنت كده "تلقائيًا" بتساعد جوجل. ركز بس إنك تبني هيكل منطقي، والـ SEO هييجي لوحده في المرحلة دي.

(خلاصة الدرس):
1. العناوين من <h1> لـ <h6> مكانها "دايمًا" جوه الـ <body>.
2. وظيفتها "الهيكلة" و "تحديد الأهمية"، مش "التصميم".
3. استخدم <h1> "مرة واحدة بس" في الصفحة للعنوان الرئيسي.
4. استخدم <h2> و <h3> عشان تقسم الموضوع لأقسام فرعية.
5. "أوعى تنط" (لازم تلتزم بالترتيب 1 ثم 2 ثم 3).
6. "أوعى تستخدمهم" عشان بس تكبر خط أو تخليه تخين.

قراءة المزيد

فهم الهيكل الأساسي للصفحة | HTML

فهم الهيكل الأساسي لصفحة HTML

النهاردة، إحنا هنرجع لـ "القالب الأساسي" اللي شفناه في أول درس خالص. القالب ده اللي كان فيه أوامر غريبة زي <!DOCTYPE> و <head> و <body>. جه الوقت إننا نفهم كل واحد من دول وظيفته إيه بالظبط، وليه هو موجود في مكانه ده تحديداً. الدرس ده هو تشريح للهيكل الأساسي اللي "لازم" يكون موجود في أي صفحة HTML هتعملها في حياتك.

ما هو السطر الأول: `<!DOCTYPE html>`؟

أول سطر بنشوفه دايمًا في أي صفحة HTML هو السطر الغريب ده: <!DOCTYPE html>.

السطر ده مهم جدًا جدًا، رغم إنه مش "وسم" (Tag) زي باقي الحاجات اللي اتعلمناها.

خلينا نحلله واحدة واحدة:

علامة <!: دي علامة مميزة (لاحظ علامة التعجب !) بتقول للمتصفح "انتبه! ده مش وسم عادي، ده "إعلان" (Declaration) أو "بيان" مهم".
DOCTYPE: دي اختصار لـ "Document Type" يعني "نوع المستند".
html: دي الكلمة اللي بتقول للمتصفح إن نوع المستند ده هو "HTML".

فالسطر ده كله على بعضه عبارة عن رسالة بسيطة ومباشرة للمتصفح، زي ما تكون بتبدأ كلامك معاه وبتقوله: "يا متصفح، الملف اللي إنت هتقراه ده مكتوب بأحدث إصدار من لغة HTML (اللي هو حالياً HTML5)".

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

(قاعدة صارمة):
السطر <!DOCTYPE html> لازم "دايمًا" يكون أول سطر في الملف.

لماذا هذا السطر "إعلان" وليس "وسم"؟ (مهم)

دي نقطة مهمة جدًا عشان نفهم الفرق. إحنا اتفقنا في الدرس اللي فات إن "الوسوم" (Tags) هي "الأوامر" اللي بتبني الصفحة.

واتفقنا إن الوسوم نوعين:

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

الـ DOCTYPE بقى حاجة تالتة خالص. هو "إعلان" (Declaration).

الفرق إيه؟

الوسم (Tag): هو جزء من "هيكل" الصفحة. هو اللي بيبني الصفحة نفسها. زي الوسم <p> اللي بيبني "فقرة" نصية بتظهر للزائر.
الإعلان (Declaration): هو "معلومة" للمتصفح "قبل" ما يبدأ يبني الصفحة أصلاً. هو مش جزء من الهيكل، هو مجرد "إرشاد" أو "تعليمات" لكيفية قراءة الهيكل اللي جاي بعده.

خصائص الإعلان (DOCTYPE)

عشان هو "إعلان" مش "وسم"، فهو:

مالوش وسم إغلاق: لأنه مش بيحتوي على حاجة. هو مجرد معلومة وخلاص. مينفعش تكتب </DOCTYPE> دي خالص.
مش حساس لحالة الأحرف: يعني لو كتبته <!doctype html> (بحرف d صغير) هيشتغل عادي. لكن العرف العالمي بين كل المبرمجين إننا بنكتب DOCTYPE بحروف كبيرة (Uppercase) عشان نميزه ويبقى شكله واضح إنه الإعلان اللي بنبدأ بيه.

مثال (1): ملف بدون DOCTYPE (وماذا يحدث)

طيب، إيه اللي يحصل لو إنت كسلت تكتب السطر ده؟ هل الدنيا هتبوظ والصفحة مش هتشتغل؟

الإجابة: الصفحة هتشتغل، بس "غلط" أو "بشكل مش مضمون".

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

في الماضي، كان فيه إصدارات كتيرة من HTML (زي HTML 4.01, XHTML 1.0)، وكل إصدار كان ليه قواعده. لو إنت مكتبتش السطر ده، المتصفح بيدخل في "وضع التخمين" أو (وضع الفوضى - Quirks Mode).

ما هو "وضع الفوضى" (Quirks Mode)؟

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

ده بيسبب كوارث في التصميم، خصوصاً مع الـ CSS. هتلاقي نفسك بتقول للـ CSS "خلي الصندوق ده عرضه 100 بيكسل"، فتلاقي المتصفح مخلي عرضه 120 بيكسل، وتفضل تلف حوالين نفسك مش عارف الغلط فين، ويكون السبب كله إنك نسيت سطر الـ DOCTYPE.

لما إنت بتحط السطر <!DOCTYPE html>، إنت بتريحه وبتقوله: "متخمنش حاجة، اشتغل بـ (وضع المعايير القياسية - Standards Mode)"، يعني اتبع أحدث القواعد المظبوطة زي ما الكتاب بيقول.

(نصيحة):
اعتبر السطر ده زي "بسم الله الرحمن الرحيم" قبل ما تبدأ تكتب الكود. لازم تبدأ بيه عشان المتصفح يفهمك صح.

الوسم الجذري (الأم): `<html>`

خلاص، كتبنا السطر الأول <!DOCTYPE html> والمتصفح عرف إنه هيتعامل مع ملف HTML5.

دلوقتي بيبدأ يدور على "الهيكل" نفسه.

أول وسم حقيقي بيقابله، والوسم اللي "بيحتوي كل حاجة تانية"، هو الوسم <html>.

الوسم ده بنسميه "العنصر الجذري" (Root Element). بالبلدي كده، ده "الوسم الأُم" اللي بيلم كل وسوم الصفحة جواه.

تشبيه: الصندوق الكبير (الكونتينر)

تخيل إن صفحة الويب بتاعتك عبارة عن شحنة كبيرة جدًا. الـ <html> هو "الكونتينر" (Container) أو الصندوق الضخم اللي بنحط جواه كل حاجة.

كل الوسوم التانية (اللي هنشرحها كمان شوية) لازم تكون "متداخلة" (Nested) جوه الوسم ده.

هو وسم مزدوج (حاوي) طبعًا، لأنه بيحتوي كل الصفحة:

بيبدأ بـ <html> (دايمًا بعد سطر الـ DOCTYPE).
وبينتهي بـ </html> (دايمًا في آخر سطر في الملف).

مينفعش تكتب أي وسم "بره" الصندوق ده (باستثناء الـ DOCTYPE طبعًا).

مثال (تدريب): هيكل ملف فارغ

ده شكل ملف HTML "صحيح" ولكنه "فارغ" تماماً:

مثال (تدريب): هيكل ملف فارغ


<!DOCTYPE html>
<html>
    
    <!-- كل الأكواد هتتكتب هنا -->
    
</html>

(ملاحظة: السطر  ده اسمه "تعليق" (Comment)، المتصفح بيتجاهله، وإحنا بنستخدمه عشان نكتب ملاحظات لنفسنا. هنشرحه بالتفصيل في المستقبل).

الوسم `<head>`: مخ الصفحة (المعلومات الخفية)

دلوقتي إحنا فتحنا الصندوق الكبير <html>.

جوه الصندوق ده، الصفحة بتتقسم "قسمين" اتنين بس مفيش غيرهم. زي جسم الإنسان بالظبط:

الـ <head> (الرأس أو المخ)
الـ <body> (الجسم)

خلينا نتكلم عن القسم الأول: <head>.

الـ <head> هو "المخ" بتاع الصفحة، أو "الكواليس" بتاعتها. ده المكان اللي بنحط فيه كل "المعلومات الوصفية" (Metadata) عن الصفحة.

نقطة مهمة جدًا جدًا: كل حاجة بتتحط جوه الـ <head> (ما عدا استثناء واحد هنقوله كمان شوية) لا تظهر للزائر في الجزء الأبيض من الصفحة.

طيب بنحط فيه إيه طالما مش بيظهر؟

بنحط فيه معلومات "للمتصفح" و "لمحركات البحث" عشان تفهم صفحتنا صح. زي:

عنوان الصفحة (<title>): ده الاستثناء الوحيد اللي بيظهر (هنشرحه لوحده).
ترميز الحروف (<meta charset="UTF-8">): ده أمر مهم جدًا عشان المتصفح يقرأ الكلام العربي (أو أي لغة تانية) بشكل مظبوط وميطلعش "رموز غريبة" أو "علامات استفهام". هنشرحه بالتفصيل بعدين.
ملفات الـ CSS: الأوامر اللي بتدي الصفحة "الألوان" و "الخطوط" و "التصميم". (هنعرف إزاي نستدعيها في المستقبل).
ملفات الـ JavaScript: الأوامر اللي بتعمل "الحركة" و "التفاعلات" في الصفحة. (برضه هنعرف إزاي نستدعيها في المستقبل).
معلومات لمحرك البحث: زي "وصف" الصفحة اللي بيظهر تحت العنوان في جوجل.

الوسم `<title>`: عنوان الصفحة (في التاب)

ده بقى هو "الاستثناء" اللي قلنا عليه فوق.

الـ <title> (العنوان) هو وسم مزدوج (ليه فتحة وقافلة) بيتحط "جوه" الـ <head>، وهو ده الحاجة الوحيدة اللي جوه الـ <head> اللي الزائر بيشوفها.

بيشوفها فين بالظبط؟

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

مثال (تدريب): إضافة عنوان لملف

تعالَى نطور الهيكل بتاعنا ونحطله عنوان. لاحظ التداخل (Nesting) عامل إزاي: الـ <title> "ابن" للـ <head>، والـ <head> "ابن" للـ <html>.

مثال (تدريب): إضافة عنوان لملف


<!DOCTYPE html>
<html>
    <head>
        <title>دي صفحتي الأولى</title>
    </head>
</html>

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

(خطأ شائع):
أوعى تحط وسم الـ <title> جوه الـ <body>. مكانه "دايمًا" وأبدًا جوه الـ <head>. هو وسم إجباري في كل صفحة مينفعش تستغنى عنه.

مثال (2): أهمية `<title>` لمحركات البحث (SEO)

زي ما قلنا، العنوان ده هو اللي بيظهر في جوجل. عشان كده، الوسم ده هو واحد من أهم عوامل الـ "SEO" (تهيئة محركات البحث).

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

تدريب: عنوان جيد مقابل عنوان سيء

تخيل عندنا 3 صفحات، شوف الفرق بين العناوين:

عنوان سيء جدًا: <title>صفحة جديدة 1</title>
(ده عنوان ملوش أي معنى، لا الزائر هيفهمه ولا جوجل هيفهمه. لو الزائر حفظ الصفحة دي في المفضلة، عمره ما هيعرف يلاقيها تاني).
عنوان سيء: <title>الرئيسية</title>
(رئيسية إيه؟ رئيسية موقع أخبار ولا موقع طبخ؟ ده عنوان عام جدًا ومش بيوصف حاجة).
عنوان جيد: <title>أفضل وصفات الكيك بالشوكولاتة - موقع مطبخي</title>
(واضح، مباشر، بيحتوي على الكلمة المفتاحية اللي الناس بتبحث عنها، وفي الآخر اسم الموقع).

دايمًا اهتم بكتابة <title> وصفي ودقيق. ده أول خطوة في الاحتراف.

الوسم `<body>`: جسم الصفحة (كل المحتوى المرئي)

دلوقتي إحنا خلصنا القسم الأول (الكواليس <head>).

القسم التاني والأخير اللي جوه الـ <html> هو الـ <body> (الجسم).

الوسم ده بييجي "بعد" قفلة الـ </head>، ولازم يتقفل </body> "قبل" قفلة الـ </html>.

الـ <body> هو "المسرح".

ده أهم وسم بالنسبة للمحتوى. أي حاجة إنت عايز الزائر "يشوفها" بعينه في الصفحة البيضا، لازم تتحط جوه الـ <body>.

إيه هي الحاجات دي؟

العناوين (زي <h1>, <h2>)
الفقرات النصية (<p>)
الصور (<img>)
الروابط (<a>)
الجداول (<table>)
القوائم (<ul>, <ol>)
... كل شيء مرئي للزائر.

مثال (3): الفرق بين Head و Body (تشبيه المسرح)

عشان المعلومة تثبت، خلينا ناخد التشبيه ده ونكرره.

تخيل إن صفحة الويب بتاعتك عبارة عن "مسرحية":

الـ <head> هو "الكواليس":
الجمهور (الزائر) مش شايف إيه اللي بيحصل في الكواليس. لكن الكواليس دي هي اللي فيها "المخرج" اللي بيدي التعليمات، وفيها "مهندس الإضاءة" (ملفات الـ CSS)، وفيها "مهندس المؤثرات الخاصة" (ملفات الـ JavaScript)، وفيها "اسم المسرحية" (الـ <title>) اللي مكتوب على التذكرة وبره المسرح. لو الكواليس دي مش موجودة، المسرحية هتبوظ.

الـ <body> هو "خشبة المسرح":
ده المكان اللي الجمهور شايفه بعينه. ده اللي بيظهر عليه "الممثلين" (الـ <h1> والنصوص <p>) و "الديكور" (الـ <img>).

تدريب: ماذا لو وضعنا ممثل في الكواليس؟

إيه اللي يحصل لو غلطت وحطيت وسم <h1> (عنوان مرئي) جوه الـ <head> (الكواليس)؟

مثال (تدريب): كود خاطئ (وضع وسم مرئي في الـ head)


<!-- كود خاطئ جداً -->
<head>
    <title>صفحة غلط</title>
    <h1>ده عنوان المفروض يظهر</h1>
</head>

النتيجة: المتصفحات الحديثة "ذكية". هي هتشوف الـ <h1> وهتقول "ده مش مكانه هنا"، وفي الغالب هتتصرف من نفسها "وتنقل" الوسم ده وتحطه في الـ <body> بالنيابة عنك عشان تصلح غلطتك.

بس أوعى تعتمد على ده! ده سلوك غير قياسي وممكن يخلي الصفحة "تضرب" في متصفحات تانية أو يخلي ملفات الـ CSS والـ JavaScript تشتغل غلط.

القاعدة: المحتوى المرئي مكانه الـ <body>. المعلومات الخفية مكانها الـ <head>.

تجميع الهيكل بالكامل (مع المسافات البادئة)

تعالَى بقى نجمع كل اللي قلناه ده في شكل الكود الكامل، ونشوف التداخل (Nesting) الصح عامل إزاي.

لاحظ إننا بنستخدم "مسافات بادئة" (Indentation) عشان نخلي الكود مقروء. يعني الحاجة اللي "جوه" حاجة، بندخلها شوية بالمسطرة أو بالتاب. ده مش إجباري عشان الكود يشتغل، لكنه "إجباري" عشان تكون مبرمج شاطر ونضيف والكود بتاعك يتفهم.

الهيكل الأساسي الثابت (index.html)


<!DOCTYPE html>

<html> <!-- الأب الكبير أو الجذر -->

    <head> <!-- الابن الأول: الكواليس (المخ) -->
        
        <!-- المعلومات الخفية للمتصفح -->
        <title>عنوان صفحتي اللي بيظهر في التاب</title>
        
    </head>

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

</html> <!-- قفلة الأب الكبير -->

تحليل الهيكل ده (علاقة الأب والابن)

فهم علاقات التداخل دي (مين جوه مين) هو أهم حاجة في الـ HTML:

الـ <html> هو "الأب" (Parent) لكل حاجة.
الـ <head> والـ <body> هما "أبناء" (Children) للـ <html>. وهما "إخوات" (Siblings) في نفس المستوى (ده بييجي الأول وده بييجي التاني).
الـ <title> هو "ابن" للـ <head>.
الـ <h1> والـ <p> هما "أبناء" للـ <body>.

مينفعش الـ <title> (الحفيد) ييجي مباشرة جوه الـ <html> (الجد). لازم ييجي جوه أبوه الـ <head>.

(خلاصة الدرس):
1. <!DOCTYPE>: إعلان بيقول للمتصفح "إحنا HTML5". بييجي أول سطر.
2. <html>: الصندوق الكبير اللي بيلم كل الوسوم.
3. <head>: الكواليس. فيها المعلومات الخفية (زي الـ CSS) والعنوان (<title>).
4. <body>: المسرح. فيه كل المحتوى المرئي (العناوين، الصور، النصوص).
5. الترتيب: لازم الـ <head> ييجي الأول (ويتقفل)، وبعدين الـ <body> ييجي بعده (ويتقفل).

قراءة المزيد

قضايا قانونية

قضايا جنائية

قضايا الشركات

قضايا مدنية

قضايا أحوال شخصية

قضايا جرائم الإنترنت

قضايا الرأي العام

قضايا النصب والاحتيال

قضايا دستورية

استشارات قانونية بارزة

المواد التعليمية

تاريخ الصف الثالث الثانوي

دراسات الصف الثالث الإعدادي

علم نفس الصف الثاني الثانوي

فلسفة ومنطق الصف الأول الثانوي

موصى به لك

التعليقات واستخداماتها HTML

التعليقات في HTML واستخداماتها

ما هي الصيغة الصحيحة لكتابة تعليق؟

الغرض الأول: التوثيق وترك الملاحظات

مثال (1): استخدام التعليقات لتقسيم الكود

الغرض الثاني: "تعطيل" الكود (Commenting Out)

مثال (2): تعطيل جزء من الصفحة للتجربة

التعليقات أحادية السطر ومتعددة الأسطر

مثال (3): استخدام كتلة تعليق متعدد الأسطر

تحذير أمني: ماذا لا يجب أن تضع في التعليقات؟

الخلاصة: الفرق بين التعليق والمحتوى

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

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

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

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

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

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

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

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

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

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

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

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

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

شرح العناوين H | تعلم HTML

وسوم العناوين (H1 إلى H6)

إيه هي وسوم العناوين (Headings)؟

الأهمية الحقيقية: "الهرمية" مش "الشكل"

تشبيه هيكل الشركة

القاعدة الأساسية: الـ 6 مستويات (H1 إلى H6)

الوسم <h1>: المدير العام (العنوان الأوحد)

الوسم <h2>: نواب المدير (العناوين الرئيسية)

الوسوم <h3> إلى <h6>: باقي الفريق (التفاصيل)

مثال متكامل: هيكل مقالة كاملة

الخطأ الأكبر: استخدام العناوين لتكبير الخط

إيه الصح؟

ملحوظة عن محركات البحث (SEO)

فهم الهيكل الأساسي للصفحة | HTML

فهم الهيكل الأساسي لصفحة HTML

ما هو السطر الأول: <!DOCTYPE html>؟

لماذا هذا السطر "إعلان" وليس "وسم"؟ (مهم)

خصائص الإعلان (DOCTYPE)

مثال (1): ملف بدون DOCTYPE (وماذا يحدث)

ما هو "وضع الفوضى" (Quirks Mode)؟

الوسم الجذري (الأم): <html>

تشبيه: الصندوق الكبير (الكونتينر)

مثال (تدريب): هيكل ملف فارغ

الوسم <head>: مخ الصفحة (المعلومات الخفية)

طيب بنحط فيه إيه طالما مش بيظهر؟

الوسم <title>: عنوان الصفحة (في التاب)

مثال (تدريب): إضافة عنوان لملف

مثال (2): أهمية <title> لمحركات البحث (SEO)

تدريب: عنوان جيد مقابل عنوان سيء

الوسم <body>: جسم الصفحة (كل المحتوى المرئي)

مثال (3): الفرق بين Head و Body (تشبيه المسرح)

تدريب: ماذا لو وضعنا ممثل في الكواليس؟

تجميع الهيكل بالكامل (مع المسافات البادئة)

تحليل الهيكل ده (علاقة الأب والابن)

Pages

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

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

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

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

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

الوسم `<h1>`: المدير العام (العنوان الأوحد)

الوسم `<h2>`: نواب المدير (العناوين الرئيسية)

الوسوم `<h3>` إلى `<h6>`: باقي الفريق (التفاصيل)

ما هو السطر الأول: `<!DOCTYPE html>`؟

الوسم الجذري (الأم): `<html>`

الوسم `<head>`: مخ الصفحة (المعلومات الخفية)

الوسم `<title>`: عنوان الصفحة (في التاب)

مثال (2): أهمية `<title>` لمحركات البحث (SEO)

الوسم `<body>`: جسم الصفحة (كل المحتوى المرئي)