بنية المستند وقسم head — أساسيات HTML

بنية المستند وقسم head

قسم <head> لا يظهر في محتوى الصفحة، لكنه يتحكم في أشياء حاسمة: هل تظهر الحروف العربية صحيحة؟ هل الصفحة مناسبة للجوال؟ ماذا يظهر في نتائج البحث وعند المشاركة؟

القالب الذي تبدأ به كل صفحة

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>دورات البرمجة | Kodax</title>
    <meta name="description" content="تعلم البرمجة بالعربية مع دروس تفاعلية وتحديات.">
    <link rel="icon" href="favicon.svg" type="image/svg+xml">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/app.js" defer></script>
</head>
<body>
    <h1>مرحباً</h1>
</body>
</html>

سطراً بسطر

`<!DOCTYPE html>`

بدونه يدخل المتصفح "وضع التوافق" (quirks mode) ويقلّد أخطاء متصفحات التسعينات، فيتغير حساب الأحجام في CSS.

`lang="ar"` و `dir="rtl"`

- lang: لغة المحتوى. قارئ الشاشة يختار النطق العربي، والمتصفح يعرض الترجمة بشكل صحيح، ومحركات البحث تفهم لغة الصفحة.

- dir="rtl": الاتجاه من اليمين لليسار. بدونه تظهر الصفحة العربية محاذاة لليسار وعلامات الترقيم في أماكن خاطئة.

- لجزء بلغة أخرى داخل الصفحة: <span lang="en" dir="ltr">Hello</span>.

`<meta charset="UTF-8">`

ترميز الحروف. بدونه قد تظهر العربية رموزاً غريبة مثل العربية. يجب أن يكون أول عنصر في head، واحفظ الملف نفسه بترميز UTF-8 في المحرر.

`viewport`

بدونه يعرض الجوال الصفحة كأنها على شاشة حاسوب عرضها ~980px ثم يصغّرها، فيصبح النص مجهرياً. هذا السطر شرط لأي تصميم متجاوب.

`<title>`

يظهر في تبويب المتصفح، وفي المفضلة، وهو العنوان الأزرق في نتائج جوجل. اجعله فريداً لكل صفحة ووصفياً: "دورات البرمجة | Kodax" أفضل من "الرئيسية".

`meta description`

الوصف الذي يظهر غالباً تحت العنوان في نتائج البحث (~150 حرفاً). لا يرفع الترتيب مباشرة لكنه يقنع الناس بالنقر.

الأيقونة والملفات

- <link rel="icon">: أيقونة التبويب (favicon).

- <link rel="stylesheet">: ربط ملف CSS — في head ليُطبَّق التنسيق قبل ظهور المحتوى.

- <script defer>: defer يحمّل السكربت دون إيقاف عرض الصفحة وينفّذه بعد قراءة HTML كاملاً. بدونه، سكربت في head يوقف العرض ولا يجد عناصر الصفحة بعد.

المشاركة على وسائل التواصل

عند مشاركة رابطك تقرأ المنصات وسوم Open Graph:

<meta property="og:title" content="دورات البرمجة | Kodax">
<meta property="og:description" content="تعلم البرمجة بالعربية">
<meta property="og:image" content="https://example.com/cover.png">

ترتيب مقترح داخل head

1. meta charset (أولاً دائماً)

2. viewport

3. title و description

4. الأيقونة و CSS

5. السكربتات بـ defer

أخطاء شائعة

- نسيان viewport ثم التساؤل لماذا لا يعمل التصميم المتجاوب.

- dir="ltr" في صفحة عربية (نسخ قالب إنجليزي).

- وضع محتوى مرئي داخل head.

- عنوان واحد مكرر لكل صفحات الموقع.

تمرين

أنشئ ملف template.html بالقالب الكامل أعلاه (بدون السكربت إن لم يوجد ملف)، واحفظه لتبدأ منه كل صفحة. جرّب حذف meta charset وحفظ الملف بترميز مختلف، ثم حذف viewport وافتح الصفحة بوضع الجوال في أدوات المطور (Ctrl+Shift+M) — لاحظ الفرق.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>دورات البرمجة | Kodax</title>
    <meta name="description" content="تعلم البرمجة بالعربية مع دروس تفاعلية وتحديات يومية.">

    <!-- المشاركة على وسائل التواصل -->
    <meta property="og:title" content="دورات البرمجة | Kodax">
    <meta property="og:description" content="تعلم البرمجة بالعربية">

    <link rel="icon" href="favicon.svg" type="image/svg+xml">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/app.js" defer></script>
</head>
<body>
    <h1>تعلّم البرمجة بالعربية</h1>
    <p>هذه الفقرة عربية، وهذه كلمة إنجليزية: <span lang="en" dir="ltr">Hello World</span>.</p>
</body>
</html>