جاري التحميل...

عنصر head في HTML

ركزت الجلسة السابقة على أحد أبناء رأس المستند: title. الآن وسّع العدسة إلى عنصر head نفسه — الصندوق الذي يحمل بيانات وصفية عن الصفحة للمتصفحات وأدوات البحث والموارد المرتبطة. الزائر لا يقرأ head كما يقرأ قصة في العرض الرئيسي. يشعر بتأثيره عبر تسمية علامة التبويب، والأحرف الصحيحة، ومقياس الجوال، وملفات الأنماط التي تُحمَّل قبل رسم محتوى الجسم.

لماذا يوجد head؟

<head>...</head> يقع داخل <html>، عادة مباشرة بعد وسم html الافتتاحي وقبل <body>. إنه غرفة تحكم المستند للبيانات الوصفية وروابط الموارد. ليس لافتة ظاهرة. اللافتة الظاهرة التي قد تبنيها لاحقًا بعنصر <header> وسم مختلف بمهمة مختلفة.

إجابة مباشرة

ضع البيانات الوصفية في <head>...</head>: title، وعادة <meta charset="UTF-8">، وغالبًا meta للـ viewport لتخطيط الجوال، و<link rel="stylesheet" href="..."> عندما تستخدم CSS خارجيًا. ضع العناوين الظاهرة والفقرات والصور وواجهة التفاعل في <body>. title ابن مهم من أبناء head — ولا يحل محل head.

الأبناء الشائعون بنظرة سريعة

📊 أبناء head الشائعون

العنصر الدور
title تسمية علامة التبويب / المستند
meta charset ترميز الأحرف (UTF-8)
meta viewport تلميح عرض الجوال والمقياس
link stylesheet ملف CSS خارجي
style CSS داخلي اختياري
script سكربتات اختيارية (عادات الموضع تختلف؛ كثير من المبتدئين يحمّلونها في نهاية body)

رأس بداية عملي

لا تحتاج كل وسم meta ممكن في اليوم الأول. رأس مبتدئ موثوق يغطي الترميز، وviewport الجوال، وعنوان المستند، ورابط stylesheet عندما يعيش CSS في ملف منفصل.

رأس بداية عملي

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<p>Visible content lives in the body.</p>
</body>
</html>

قراءة العينة

  • meta charset="UTF-8" يخبر المتصفح كيف يفك ترميز الأحرف — بما في ذلك الإيموجي والنص غير اللاتيني من الجلسات السابقة
  • viewport يساعد متصفحات الجوال على استخدام عرض الجهاز بدل تخطيط سطح مكتب مصغّر
  • title يسمّي علامة التبويب، كما تدربت في جلسة عنوان الصفحة
  • link rel="stylesheet" يربط styles.css دون وضع قواعد CSS داخل كل ملف HTML
  • كل ما يقرأه الزائر على الصفحة يقع تحت body

charset أولًا، مبكرًا في head

ضع meta الخاص بـ charset قرب أعلى head حتى يعرف المتصفح الترميز قبل تفسير بقية نص المستند. UTF-8 هو الافتراضي الحديث الذي ينبغي استخدامه ما لم يفرض قيد تراثي نادر خلاف ذلك. غياب charset أو تأخره سبب كلاسيكي لأحرف مكسورة تبدو كـ«فساد عشوائي».

Viewport ومتصفحات الجوال

بدون meta للـ viewport تفترض كثير من الهواتف لوحة سطح مكتب عريضة وتُصغّر الصفحة. البادئة الشائعة width=device-width, initial-scale=1.0 تطلب مطابقة عرض الجهاز والبدء بتكبير عادي. ستُحسّن التصميم المتجاوب بـ CSS لاحقًا؛ الـ viewport هو مصافحة جانب HTML التي تجعل تلك التخطيطات قابلة للاستخدام على الهواتف.

ربط CSS من head

ملفات الأنماط الخارجية تبقي العرض منفصلًا عن البنية. عنصر link في head مع rel="stylesheet" ومسار href هو الطريق الودود للمبتدئ لربط CSS. المسارات تتبع أفكار مسار الملف التي تعلمتها سابقًا. إذا كان ملف CSS مفقودًا، HTML ما زال يعمل — فقط يبدو بلا تنسيق.

head مقابل body مقابل header

  • head — بيانات وصفية وروابط موارد؛ ليس المقال الرئيسي المقروء
  • body — المحتوى الظاهر الذي يقرأه الزائر ويتفاعل معه
  • header — عنصر تقسيم ظاهر للافتات أو كتل تمهيدية داخل body (ستستخدمه في جلسات التخطيط لاحقًا)
    لا تعيد تسمية head إلى header على أمل أنهما اسمان بديلان. هما عنصران مختلفان. الخلط بينهما يؤدي إلى ترميز غير صالح أو غير فعّال.

السكربتات وhead (ملاحظة للمبتدئ)

يمكن أن تظهر السكربتات في head أو body. كثير من صفحات التعليم تحمّل سكربتات بسيطة في نهاية body حتى يوجد هيكل HTML أولًا. استراتيجيات التحميل المتقدمة تأتي لاحقًا. لهذه الجلسة، اعرف أن script مسموح كابن لـ head، لكن المحتوى الظاهر ما زال لا ينتمي إلى head.

تمرين في محررك

  1. ابدأ من هيكل HTML أساسي فيه html وhead وbody.
  2. داخل head، أضف charset UTF-8 وmeta للـ viewport وtitle واضحًا.
  3. أضف link إلى styles.css بسيط إن وُجد (أو أنشئ ملفًا فارغًا ليكون المسار حقيقيًا).
  4. احتفظ بكل النص والعناوين الظاهرة في body فقط.
  5. استخدم View Source أو DevTools Elements للتأكد أن قسم head يطابق قصدك.
  6. أزل الـ viewport مؤقتًا، وأعد التحميل في نافذة ضيقة أو محاكي هاتف إن أمكن، ولاحظ اختلاف المقياس — ثم أعده.

أخطاء سهلة

  • وضع فقرات أو صور أو عناوين رئيسية فقط داخل head وكأنه لوحة الصفحة
  • نسيان charset فتنكسر الأحرف الخاصة والإيموجي
  • تخطي viewport والتساؤل لماذا يبدو تخطيط الجوال مكبرًا بغرابة
  • الخلط بين head (بيانات وصفية) وheader (قسم ظاهر لاحقًا في الدورة)
  • افتراض أن title وحده يكفي وترك charset في الصفحات متعددة اللغات
  • ربط stylesheet بمسار خاطئ ولوم HTML عندما لا يُحمَّل CSS أبدًا

ملخص

  • head يحمل البيانات الوصفية وروابط الموارد؛ body يحمل المحتوى الظاهر
  • قطع البداية: charset وviewport وtitle وغالبًا link لـ CSS
  • title ابن واحد من أبناء head، وليس بديلًا عن head
  • head ليس نفس عنصر header الظاهر
  • ضع charset مبكرًا حتى يفك المتصفح ترميز المستند بشكل صحيح

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
6
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 1 من 1
Html درس تعليمي