شاشة تعرض شيفرة برمجية لبنية صفحة ويب
تطوير المواقع

بنية صفحة HTML: شرح doctype وhead وbody ووسوم meta

افهم بنية مستند HTML من البداية، ودور doctype وhtml وhead وbody ووسوم meta، مع مثال عربي صحيح وأخطاء يجب تجنبها.

لماذا تحتاج الصفحة إلى بنية واضحة؟

مستند HTML ليس مجموعة وسوم عشوائية؛ له هيكل يساعد المتصفح على تفسير المحتوى، ويساعد محركات البحث وتقنيات المساعدة على فهمه. يبدأ المستند بإعلان نوعه، ثم عنصر html الذي يحتوي قسم المعلومات head وقسم المحتوى body.

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

<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="دليل مبسط لتعلم HTML باللغة العربية.">
  <title>تعلم HTML بالعربية</title>
</head>
<body>
  <header>
    <h1>تعلم HTML</h1>
  </header>
  <main>
    <p>هنا يبدأ محتوى الصفحة.</p>
  </main>
</body>
</html>

شرح أجزاء المستند

إعلان doctype

يكتب <!doctype html> في بداية الملف. وهو إعلان يطلب من المتصفح عرض الصفحة وفق وضع المعايير الحديث، وليس وسمًا يحتاج إلى إغلاق.

عنصر html واللغة والاتجاه

العنصر html هو الجذر الذي يحتوي بقية المستند. استخدم lang="ar" عندما تكون اللغة الأساسية عربية، وdir="rtl" لضبط اتجاه النص. لا تعتمد على CSS وحده لتحديد اتجاه المحتوى الدلالي.

عنصر head

يضم بيانات المستند: الترميز، وعنوان التبويب، والوصف التعريفي، وروابط ملفات CSS وأحيانًا بيانات منظمة. معظم هذه المعلومات لا تظهر كجزء من متن الصفحة.

عنصر body

يضم المحتوى الذي يتفاعل معه الزائر، مثل العناوين والنصوص والصور والروابط والنماذج. ينبغي أن يكون المحتوى الأساسي واضحًا حتى لو تعطل JavaScript.

وسوم meta المهمة

  • charset="UTF-8": يحدد ترميزًا يدعم العربية ومجموعة واسعة من الحروف.
  • name="viewport": يساعد الصفحة على استخدام عرض الجهاز بصورة مناسبة.
  • name="description": يقدم وصفًا موجزًا قد تستخدمه محركات البحث في مقتطف النتيجة؛ لا يضمن ظهوره حرفيًا.
  • title: يحدد عنوان المستند الذي يظهر غالبًا في تبويب المتصفح ونتائج البحث.

أخطاء شائعة

  • وضع عنوان الصفحة المرئي داخل head بدل body.
  • تكرار وسوم العنوان أو الوصف بلا حاجة.
  • نسيان UTF-8، مما قد يؤدي إلى ظهور أحرف عربية مشوهة في بعض الحالات.
  • اعتبار وصف meta عامل ترتيب مضمون؛ وظيفته الأساسية وصف الصفحة والمساعدة في عرضها.

تمرين

أنشئ ملفًا يتضمن عنوانًا ووصفًا تعريفيًا باللغة العربية، ثم افتحه في المتصفح وتحقق من عنوان التبويب. جرّب تغيير قيمة lang ولاحظ كيف تصف اللغة المعلنة للمستند.

مصادر موثوقة

قائمة مراجعة لبنية المستند

  • استخدم <!doctype html> لتفعيل وضع العرض القياسي.
  • حدد لغة المستند عبر lang="ar" واتجاهه عبر dir="rtl" عندما تكون الصفحة عربية.
  • ضع الترميز ووسم viewport والعنوان والوصف داخل head.
  • اجعل المحتوى المرئي داخل body ولا تكرر المعرفات الفريدة.
<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>عنوان واضح للصفحة</title>
</head>
<body>
  <main><h1>عنوان المحتوى</h1></main>
</body>
</html>

تحقق من الصفحة عبر أداة فحص HTML، ثم اختبرها على شاشة ضيقة. البنية الصحيحة تقلل أخطاء العرض لكنها لا تضمن وحدها جودة المحتوى أو ترتيبه في نتائج البحث.

قالب بداية مناسب لصفحة عربية

من المفيد البدء بقالب صغير ثابت ثم إضافة ما تحتاج إليه فعلًا. خاصية lang تعرّف لغة المستند، وdir تحدد اتجاه الكتابة الافتراضي، أما الترميز فيجب التصريح به مبكرًا حتى تُعرض الأحرف العربية بصورة صحيحة.

<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>عنوان يصف الصفحة</title>
  <meta name="description" content="ملخص دقيق لمحتوى الصفحة.">
</head>
<body>
  <main>
    <h1>العنوان الرئيسي</h1>
    <p>محتوى الصفحة هنا.</p>
  </main>
</body>
</html>

ضع المعلومات التي تصف الصفحة والموارد المطلوبة داخل head، بينما يوضع المحتوى الذي يراه المستخدم داخل body. لا تكرر id داخل المستند، ولا تضف وسومًا وصفية لمجرد ملء الرأس؛ استخدم البيانات التي تعكس المحتوى الحقيقي.

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

  • تأكد من وجود عنوان صفحة فريد ومفيد.
  • اختبر الصفحة مع تكبير النص وعلى شاشة صغيرة.
  • راجع ترتيب العناوين وبنية العناصر باستخدام أدوات المطور.
  • مرّر المستند عبر مدقق W3C لمعرفة أخطاء الترميز.

قائمة تدقيق بنية مستند HTML

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

الجزءماذا يوضع فيه؟خطأ شائع
doctypeتعريف المستند وفق HTML الحديثةحذفه أو استخدام تعريف قديم دون داعٍ
htmlالجذر مع تحديد لغة المحتوى مثل lang="ar"نسيان اللغة أو تعيين لغة لا تطابق النص
headالعنوان ووسوم metadata وروابط المواردوضع عناصر مرئية عشوائيًا داخل head
bodyالمحتوى المرئي والدلالي للصفحةإهمال التسلسل المنطقي للعناوين

لماذا lang وcharset مهمان؟

يساعد lang="ar" التقنيات المساعدة على اختيار نطق مناسب، بينما يحدد meta charset="utf-8" ترميز النص. في المواقع متعددة اللغات، اجعل لغة كل صفحة مطابقة لمحتواها الأساسي، ولا تضع لغة واحدة ثابتة على صفحات مختلفة اللغة دون مراجعة.

العنوان والوصف ليسا بديلين عن محتوى الصفحة

يجب أن يصف عنصر title الصفحة بوضوح وأن يكون مميزًا قدر الإمكان بين الصفحات. ويمكن أن يقدم meta name="description" ملخصًا مفيدًا قد تستخدمه محركات البحث في مقتطف النتيجة، لكن Google قد تختار مقتطفًا مختلفًا حسب الاستعلام. تجنب تكرار الكلمات المفتاحية في العنوان أو كتابة وصف لا يطابق المحتوى الفعلي.

اختبار المستند بعد الكتابة

  1. افحص وجود عنوان واضح وتسلسل منطقي للعناوين.
  2. تحقق من صحة العناصر المتداخلة وإغلاق العناصر التي تتطلب ذلك.
  3. اختبر الصفحة على الهاتف ومع تكبير النص.
  4. شغّل أداة تحقق HTML، ثم أصلح الأخطاء التي تؤثر في المعنى أو السلوك أولًا.

استخدم مدقق W3C للتحقق من البنية، وراجع مرجع عنصر head في MDN. اجعل التصحيحات صغيرة وقابلة للاختبار كي يسهل اكتشاف أثر كل تغيير.

أخطاء بنية HTML التي تظهر في المشاريع الحقيقية

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

التأكد من هوية العناصر

إذا استخدمت id لربط label بحقل أو لإشارة داخلية، فتأكد من تفرده في المستند. أما class فيمكن تكرارها على عناصر كثيرة. استخدم أسماء واضحة لا ترتبط بموضع العنصر فقط، حتى لا تتعطل الروابط أو الأنماط عند نقل قسم إلى مكان آخر.

اللغة واتجاه النص

في الصفحة العربية، يساعد تحديد lang على النطق الصحيح لقارئات الشاشة، ويمكن استخدام dir عند الحاجة لتحديد اتجاه النص. عندما تحتوي الفقرة على عنوان أو كود إنجليزي، لا تغيّر اتجاه المستند كله؛ عالج المقطع المحدد بصورة مناسبة واختبر علامات الترقيم والأرقام في العرض النهائي.

صيانة head

احتفظ بالعناصر الوصفية التي تحتاجها الصفحة فعلًا، وتجنب تكرار title أو canonical أو وسوم وصفية متعارضة. راجع أن العنوان يطابق الصفحة وأن الروابط إلى CSS والخطوط تعمل من مسار النشر. إذا كان الموقع متعدد اللغات، فتأكد من أن كل صفحة تقدم اللغة الصحيحة وأن metadata لا تُنسخ من نسخة أخرى دون مراجعة.

بعد أي تعديل، شغّل مدقق HTML وافحص الصفحة المنشورة، ثم راجع تجربة لوحة المفاتيح والهاتف. يمكن الرجوع إلى مرجع lang ومدقق W3C.

مراجعة بنية مستند HTML قبل إضافة المحتوى

البنية الصحيحة ليست مجرد وجود وسوم في ترتيب معين؛ بل هي إطار يوضح اللغة والترميز والعنوان الرئيسي ومناطق الصفحة. اجعل المستند يبدأ بتعريف نوع HTML، وحدد اللغة الفعلية للمحتوى في عنصر html، واضبط ترميز UTF-8 مبكرًا داخل head حتى تُعرض العربية وعلامات الترقيم بصورة صحيحة. أما اتجاه الكتابة، فحدده بحسب لغة الصفحة أو المقطع بدل افتراض اتجاه واحد لكل مشروع متعدد اللغات.

ميّز بين head وbody

ضع المعلومات الوصفية والروابط إلى الموارد وعنوان الصفحة في head، واجعل المحتوى الذي يراه الزائر في body. يجب أن يكون عنوان الصفحة فريدًا وواضحًا، بينما ينبغي أن يصف meta description الصفحة بإيجاز من دون حشو كلمات مفتاحية. لا تضع عناصر عرض عادية داخل head ولا تكرر عناصر تعريفية بلا حاجة؛ فقد يؤدي ذلك إلى نتائج غير متوقعة أو يجعل صيانة الصفحة أصعب.

استخدم مناطق الصفحة الدلالية

عندما تناسب المحتوى، استخدم header وnav وmain وfooter وarticle وsection وفق معناها. ينبغي أن تكون منطقة main الأساسية واضحة، وأن تكون عناوين الأقسام معبرة عن محتواها. لا تستخدم section لمجرد الحصول على مساحة CSS؛ إذا لم يكن للمحتوى موضوع مستقل أو عنوان مناسب، فقد يكون عنصر عام أكثر ملاءمة.

تحقق من المستند بأدوات فعلية

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

يمكنك استخدام مدقق W3C HTML ومرجع MDN لـHTML. عالج الأخطاء ذات الأثر على التفسير والوصولية أولًا، ولا تخلط بين التحذير الشكلي ومشكلة تغير سلوك الصفحة.

تحقق من اللغة واتجاه النص

في الصفحات العربية، اضبط لغة المستند واتجاهه بما يتفق مع المحتوى الفعلي، ثم اختبر المقاطع التي تحتوي أسماء منتجات أو عناوين URL أو أرقامًا. لا تستخدم مسافات يدوية أو علامات اتجاه عشوائية لإصلاح عرض واحد؛ استخدم السمات والعناصر المناسبة حتى تبقى النتيجة مستقرة عند تغيير النص أو عرضه على جهاز آخر.

الخلاصة

الخلاصة: ابدأ بمستند HTML صحيح اللغة والترميز والبنية، ثم راجع العناوين وmetadata والمسارات بأداة تحقق. صحة البنية تقلل الأخطاء لكنها لا تستبدل اختبار الوصول وتجربة المستخدم.

الكاتب: عماد الدين لمراني