<head>

وسم رأس المستند <head>

وسم head حاوية البيانات غير المرئية: العنوان والترميز والوصف وملفات CSS — كل ما يصف الصفحة دون أن يظهر فيها.

الغرفة الخلفية للصفحة: لا شيء بداخلها يُعرض للزائر، لكن كل شيء بداخلها يقرر كيف تُعرض الصفحة وكيف تفهمها محركات البحث. سكانه الدائمون: title لعنوان التبويب، وmeta للترميز والوصف وviewport، وlink لملفات الأنماط والأيقونة، وscript للأكواد.

لا تخلطه بـ header: ذاك ترويسة مرئية داخل body، وهذا قسم بيانات وصفية قبل body.

الصياغة

<head>
  <meta charset="UTF-8">
  <title>عنوان الصفحة</title>
  <link rel="stylesheet" href="styles.css">
</head>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<p style="background:#ede9fe; padding:12px; border-radius:8px">
  انظر إلى تبويب المتصفح الآن — العنوان الظاهر فيه جاء من
  &lt;title&gt; داخل &lt;head&gt; الذي لا تراه في الصفحة.
</p>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
—	لا خصائص مهمة — قيمته في محتواه: title وmeta وlink وscript

💡 نصائح عملية

ترتيب ذهبي: charset أولًا ثم viewport ثم title — قبل أي شيء آخر
ملفات CSS في head دائمًا كي لا «تومض» الصفحة بلا تنسيق

⚠️ أخطاء شائعة

وضع محتوى مرئي داخل head — المتصفح سيطرده إلى body بصمت
الخلط بين head (بيانات وصفية) وheader (ترويسة مرئية)

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs