🧠 عنصر Head في HTML: العقل المدبر لصفحتك 🧠

اليوم سنتعرف على أحد أهم أجزاء أي صفحة ويب، وهو عنصر <head>. إذا كان جسم المستند <body> هو الوجه المرئي لصفحتك، فإن الرأس <head> هو العقل غير المرئي الذي يديرها من الخلفيات! فهو يحتوي على المعلومات الأساسية عن الصفحة التي لا يراها الزائر مباشرة، لكنها ضرورية جداً لعمل المتصفح ومحركات البحث.

ما هو عنصر Head؟ 🤔

عنصر <head> هو جزء من وثيقة HTML يتم وضعه مباشرة بعد وسم <html> وقبل وسم <body>. مهمته الأساسية هي احتواء المعلومات الوصفية (Metadata) الخاصة بالصفحة. هذه المعلومات توجه المتصفح حول كيفية التعامل مع الصفحة وتوفر بيانات مهمة لمحركات البحث مثل جوجل.

<!DOCTYPE html>
<html lang="ar">
<head>
    <!-- هنا نضع جميع المعلومات الوصفية للصفحة -->
</head>
<body>
    <!-- هنا نضع المحتوى المرئي للصفحة -->
</body>
</html>

المثال أعلاه يوضح مكان عنصر <head> في الهيكل الأساسي لصفحة HTML.

الوسوم الأساسية داخل عنصر Head 🛠️

دعنا نتعرف على أهم الوسوم التي نضعها داخل <head> وكيف نستخدمها خطوة بخطوة.

1. وسم <title>: عنوان الصفحة

هذا هو أهم وسم داخل <head>. النص الذي تضعه داخل هذا الوسم هو الذي يظهر في علامة التبويب (Tab) بالمتصفح. كما أنه العنوان الذي يظهر في نتائج محركات البحث.

<head>
    <title>مطعم النخبة - أفضل وجبات في المدينة</title>
</head>

سيظهر "مطعم النخبة - أفضل وجبات في المدينة" في أعلى نافذة المتصفح.

2. وسم <meta charset="UTF-8">: ترميز المحارف

هذا الوسم ضروري جداً للتأكد من أن المتصفح يعرض اللغة العربية (وجميع اللغات) بشكل صحيح دون ظهور رموز غريبة. يجب أن يكون أول وسم داخل <head> في معظم الأحيان.

<head>
    <meta charset="UTF-8">
    <title>صفحتي</title>
</head>

بدون هذا الوسم، قد تتحول النصوص العربية إلى رموز غير مفهومة.

3. وسم <meta name="viewport">: للهواتف المحمولة

هذا الوسم يجعل صفحتك تتكيف مع أحجام الشاشات المختلفة، خاصة على الهواتف الذكية والأجهزة اللوحية. وهو أساسي لتصميم متجاوب.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحتي المتجاوبة</title>
</head>

الوسم viewport يخبر المتصفح بأن عرض الصفحة يجب أن يساوي عرض شاشة الجهاز.

4. وسم `: وصف الصفحة**

هذا الوصف يظهر تحت عنوان الصفحة في نتائج محركات البحث. يجب أن يكون وصفاً مختصراً وجذاباً لمحتوى الصفحة.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="تعلم HTML بسهولة مع دروس مبسطة من Codex Academy. ابدأ رحلتك في تطوير الويب اليوم.">
    <title>تعلم HTML - Codex Academy</title>
</head>

5. ربط ملفات التنسيق (CSS) باستخدام <link>

نستخدم وسوم <link> داخل <head> لربط ملفات التنسيق الخارجية (CSS) التي تتحكم في الشكل والمظهر المرئي لصفحتك.

<head>
    <meta charset="UTF-8">
    <title>صفحتي الجميلة</title>
    <link rel="stylesheet" href="styles.css"> <!-- ربط ملف CSS -->
</head>

6. ربط ملفات الجافاسكريبت (JavaScript)

يمكننا أيضاً ربط ملفات الجافاسكريبت من خلال وسوم <script>. يُفضل وضعها في نهاية <head> أو في نهاية <body> لأسباب سنتعلمها لاحقاً.

<head>
    <meta charset="UTF-8">
    <title>صفحتي التفاعلية</title>
    <script src="script.js"></script> <!-- ربط ملف JavaScript -->
</head>

مثال عملي متكامل 🧪

لنجمع كل ما تعلمناه في مثال واحد بسيط لصفحة شخصية.

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="الصفحة الشخصية لأحمد، مطور ويب مبتدئ متحمس للتعلم.">
    <title>أحمد - مطور ويب | الصفحة الشخصية</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>مرحباً، أنا أحمد! 👋</h1>
    <p>أتعلم تطوير الويب في Codex Academy.</p>
</body>
</html>