هيكلية المستند الأساسية

كل ملف HTML صحيح يجب أن يتبع هيكلاً محدداً — هذا الهيكل ليس اختيارياً بل هو معيار دولي تفرضه مواصفات HTML5. المتصفحات تتوقع هذا الهيكل وقد تُعطي نتائج غير متوقعة إذا غاب.

السطر الأول دائماً: !DOCTYPE html — هذا الإعلان يخبر المتصفح أن الملف يتبع معيار HTML5 وليس إصداراً قديماً. لاحظ أنه ليس وسماً (Tag) بل إعلان خاص (Declaration). في الإصدارات القديمة كان هذا الإعلان أطول وأعقد، أما HTML5 فبسّطه لحرف واحد قصير.

وسم html: هو الجذر (Root) الذي يحتوي كل شيء آخر. الخاصية lang تحدد لغة الصفحة (ar للعربية، en للإنجليزية) وهي مهمة لمحركات البحث وقارئات الشاشة. الخاصية dir="rtl" تضبط اتجاه النص من اليمين لليسار وهي ضرورية للصفحات العربية.

وسم head: هو "رأس" الوثيقة ويحتوي المعلومات الوصفية (Metadata) التي لا تظهر للمستخدم مباشرةً لكنها مهمة جداً — مثل عنوان الصفحة الذي يظهر في تبويب المتصفح، ترميز النص، وصف الصفحة لمحركات البحث، وروابط ملفات CSS وJavaScript الخارجية.

وسم body: هو "جسم" الوثيقة ويحتوي كل شيء يظهر للمستخدم في نافذة المتصفح — النصوص، الصور، الروابط، الأزرار، وكل المحتوى المرئي. هذا هو المكان الذي تقضي فيه معظم وقتك كمطور.

التداخل (Nesting): عناصر HTML تتداخل داخل بعضها كأوعية — كل عنصر يجب أن يُفتح ويُغلق بالترتيب الصحيح. مثلاً لا يمكن إغلاق الـ body قبل إغلاق كل عناصره الداخلية. هذا التداخل المنظم هو ما يُشكّل شجرة DOM.

خاصية charset="UTF-8": هذه الخاصية في وسم meta تُخبر المتصفح بكيفية قراءة وعرض النصوص. UTF-8 هو الترميز الأشمل الذي يدعم اللغة العربية والصينية واليابانية وجميع رموز العالم. إذا نسيتها ستظهر الحروف العربية مشوّهة ومكسّرة.