هيكل صفحة HTML: الرأس والجسم والخصائص

في الدرس السابق كتبت أول صفحة HTML ونسختها كما هي. الآن سنفكّ هذه الصفحة قطعة قطعة، لتفهم لماذا يوجد كل سطر فيها. فهم الهيكل جيداً يجعل كل الدروس القادمة أسهل، لأن كل صفحة ستكتبها بعد اليوم ستبدأ بنفس هذا الهيكل.

الصورة الكاملة

تخيّل صفحة HTML مثل رسالة داخل ظرف. على الظرف من الخارج تكتب معلومات عن الرسالة: اسم المرسل والعنوان. أما الرسالة نفسها فبداخله. في HTML:

• <head> هو الظرف: معلومات عن الصفحة لا يقرؤها الزائر داخل الصفحة.
• <body> هو الرسالة: كل ما يراه الزائر فعلاً.

وهذا هو الهيكل الكامل الذي ننصحك ببدء كل صفحة به:

index.html

<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="موقع شخصي لطالب يتعلم البرمجة">
    <title>صفحتي الشخصية</title>
  </head>
  <body>
    <h1>أهلاً بك في صفحتي</h1>
    <p>هنا أشارك ما أتعلمه كل يوم.</p>
  </body>
</html>

السطر الأول: DOCTYPE

<!DOCTYPE html> ليس وسماً عادياً، بل إعلان يخبر المتصفح: «هذه صفحة مكتوبة بـ HTML الحديثة». لو حذفته، قد يعرض المتصفح الصفحة بطريقة قديمة تسمى «وضع التوافق» (Quirks Mode)، فتظهر بعض المسافات والأحجام بشكل غريب. اكتبه دائماً في أول سطر، ولا تضع قبله أي شيء.

العنصر الجذر: html

<html> هو الجذر (Root) الذي يحتوي كل شيء في الصفحة. بداخله مباشرة عنصران فقط: <head> ثم <body>.

لاحظ أن الوسم فيه كلمات إضافية: lang="ar" و dir="rtl". هذه تسمى خصائص (Attributes)، وسنشرحها بعد قليل.

رأس الصفحة: head

داخل <head> تضع معلومات تحتاجها المتصفحات ومحركات البحث. أهمها:

الوسم	وظيفته
<meta charset="UTF-8">	ترميز الحروف، ليظهر العربي سليماً
<meta name="viewport" ...>	يجعل الصفحة تظهر بعرض شاشة الموبايل بدل أن تصغر
<meta name="description" ...>	وصف قصير قد تعرضه Google تحت عنوان صفحتك في نتائج البحث
<title>	العنوان في تبويب المتصفح وفي نتائج البحث

لاحظ أن <meta> من الوسوم الفارغة (Empty Elements): ليس لها محتوى ولا وسم إغلاق، لأن كل معلوماتها موجودة في الخصائص.

معلومة

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

جسم الصفحة: body

كل ما تريد أن يراه الزائر يوضع داخل <body>: العناوين والفقرات والصور والروابط والأزرار. وفي صفحة واحدة يوجد <body> واحد فقط.

الخصائص (Attributes)

الخاصية معلومة إضافية تضعها داخل وسم الفتح لتغيّر سلوك العنصر أو تصفه. شكلها دائماً:

<وسم اسم-الخاصية="القيمة">

مثلاً:

<html lang="ar" dir="rtl">
<p title="هذا نص يظهر عند وضع الفأرة">مرّر الفأرة فوقي</p>

• lang="ar": لغة الصفحة عربية. هذا يساعد قارئات الشاشة للمكفوفين على النطق الصحيح، ويساعد محركات البحث.
• dir="rtl": اتجاه النص من اليمين لليسار.
• title: نص صغير يظهر عند وضع الفأرة فوق العنصر.

شبّه الخصائص بـ البطاقة الملصقة على علبة: العلبة هي العنصر، والبطاقة تخبرك بتفاصيل إضافية عنه. ويمكن أن يحمل الوسم أكثر من خاصية، بينها مسافة.

عادة جيدة

اكتب قيم الخصائص دائماً بين علامتي تنصيص "...". المتصفح قد يقبل بعض القيم بدونها، لكن القيمة التي فيها مسافة ستنكسر.

التعليقات

التعليق (Comment) نص تكتبه لنفسك أو لزملائك، ولا يظهر في الصفحة أبداً:

<!-- هذا تعليق: قسم الترحيب -->
<h1>أهلاً بك</h1>

يبدأ التعليق بـ <!-- وينتهي بـ -->. استخدمه لتوضيح أقسام الصفحة الطويلة، أو لإخفاء جزء من الكود مؤقتاً أثناء التجربة.

التداخل والإزاحة

العناصر توضع داخل بعضها، وهذا يسمى التداخل (Nesting). القاعدة الذهبية: آخر وسم فُتح هو أول وسم يُغلق، تماماً مثل الدمى الروسية المتداخلة.

<!-- صحيح -->
<p>هذا نص <strong>مهم جداً</strong> في الفقرة.</p>

<!-- خطأ: أُغلقت الفقرة قبل strong -->
<p>هذا نص <strong>مهم جداً</p></strong>

أما الإزاحة (Indentation)، أي المسافات في بداية السطر، فلا يهتم بها المتصفح، لكنها تجعل عينك ترى من بداخل مَن بسرعة. اجعل كل عنصر داخلي مُزاحاً بمسافتين أو أربع عن العنصر الذي يحتويه.

جرّب بنفسك

هذه صفحة بالهيكل الكامل. غيّر النصوص، وأضف تعليقاً، وأضف خاصية title لفقرة ثم مرّر الفأرة فوقها في الناتج:

جرّب بنفسكHTML

محرر الكود (HTML)<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>صفحتي الشخصية</title> </head> <body> <!-- قسم الترحيب --> <h1>أهلاً بك في صفحتي</h1> <p title="اسمي مكتوب هنا">اسمي سارة وعمري 14 سنة.</p> <p>أحب <strong>الرسم</strong> و <strong>البرمجة</strong>.</p> </body> </html>

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• وضع محتوى ظاهر داخل head: لو كتبت <h1> داخل <head> فهذا خطأ في الهيكل. المحتوى الظاهر مكانه <body> فقط.
• تداخل خاطئ للوسوم: أغلق الوسوم بعكس ترتيب فتحها دائماً.
• نسيان علامات التنصيص أو المسافة بين الخصائص: مثل lang="ar"dir="rtl". ضع مسافة بين كل خاصية والتي بعدها.

اختبر نفسك

سؤال

أين يجب أن يُكتب الوسم title؟

داخل <body>داخل <head>قبل <!DOCTYPE html>

سؤال

أي سطر مكتوب بتداخل صحيح؟

<em><p>نص</em></p><p><em>نص</p></em><p><em>نص</em></p>

الخلاصة

• <!DOCTYPE html> أول سطر دائماً، ويضمن العرض الحديث للصفحة.
• <head> معلومات عن الصفحة (الترميز و viewport والوصف والعنوان)، و <body> المحتوى الظاهر.
• الخصائص تُكتب داخل وسم الفتح بصيغة name="value".
• التعليقات <!-- --> لا تظهر للزائر.
• أغلق الوسوم بعكس ترتيب فتحها، واستخدم الإزاحة لتسهيل القراءة.