عنصر Head في لغة HTMLHTML Head Element

عنصر <head>: هو الجزء المسؤول عن إعدادات الصفحة وهو غير مرئي للمستخدمين. لا يُعرض head كجزء من محتوى body؛ يظهر title في تبويب المتصفح، ويمكن لعناصر أخرى مثل link للأيقونة أو style وscript أن تؤثر في واجهة المتصفح أو مظهر الصفحة وسلوكها. ويُعتبر عنصر <head> حاوية لمجموعة من العناصر التي تقدم معلومات مهمة لصفحة الويب، مما يساعد المتصفح ومحركات البحث في قراءة الصفحة بشكل صحيح.

عنصر <head> هو من نوع العناصر المتداخلة، له علامة فتح <head> وعلامة إغلاق ⁦</head>⁩.

العناصر التي تُكتب داخل عنصر <head> هي:

• <title>: يُضيف اسمًا لنافذة صفحة الويب في شريط العنوان للمتصفحات.
  
  
• <style>: يُستخدم لإضافة تنسيقات CSS مباشرة داخل ملف HTML.
  
  
• <meta>: يوفر معلومات وصفية هامة لصفحة الويب مثل ترميز الحروف ووصف الصفحة؛ وتحدد لغة النص عادةً بسمة lang على html، وتُستخدم في تحسين محركات البحث.
  
  
• <link>: يربط صفحة HTML بملفات CSS خارجية.
  
  
• <script>: يُستخدم لكتابة أوامر برمجية بلغة JavaScript داخل ملف HTML.
  
  
• <base>: يُحدد المصدر الأساسي للمسارات في الصفحة.
  
  

أين يُكتب عنصر head ؟

يُكتب عنصر <head> دائمًا قبل عنصر <body>، ولكل صفحة HTML عنصر <head> واحد فقط.

يُستخدم عنصر <title> لإضافة عنوان نصي يظهر في تبويب صفحة الويب على المتصفح، مما يساعد المستخدم على معرفة اسم الصفحة عند التنقل بين التبويبات المفتوحة.

عنصر <title> وعلاقته بصفحة HTML:

• يلزم title واحد في مستند HTML المعتاد، مع استثناءات معيارية مثل مستند iframe srcdoc، ويظهر نصه في تبويب المتصفح ليساعد المستخدمين على تمييز الصفحات عند التنقل بين التبويبات المفتوحة.
  
  
• يساعد العنوان الدقيق على فهم الصفحة، وقد يستخدمه محرك البحث عنوانًا للنتيجة؛ لا يضمن ترتيبًا معينًا.
  
  
• يجب أن يعبر نص <title> بوضوح عن محتوى الصفحة.
  
  
• عنصر <title> عنصر متداخل [nested]، له علامة فتح <title> وعلامة إغلاق ⁦</title>⁩.
  
  
• لا يسمح بكتابة أي عناصر HTML أخرى داخل عنصر <title>.
  
  
• لا يوجد حد عام يقول إن محركات البحث تقرأ أول55–60حرفًا فقط؛ قد يقتطع Google العنوان المعروض بحسب مساحة الجهاز، وقد ينشئ عنوانًا مختلفًا من محتوى الصفحة.
  
  
• يجب ألا يكون نص عنصر <title> مكررًا في صفحات أخرى ضمن نفس الموقع.
  
  
• يجب كتابة عنصر <title> دائمًا داخل عنصر <head> ولا يمكن تكراره داخل نفس الصفحة.

يُستخدم عنصر <style> لإضافة تنسيقات بلغة CSS تتحكم في مظهر عناصر صفحة الويب. يمكن استخدام عنصر <style> داخل صفحة HTML مباشرة، كما توجد طرق أخرى لإضافة CSS مثل الروابط الخارجية ستنعرف عليها لاحقاً.

عنصر <style> وعلاقته بصفحة HTML:

• يُستخدم عنصر <style> عادةً لكتابة أوامر وتنسيقات CSS داخل صفحة HTML.
  
  
• يحتوي عنصر <style> على علامة فتح <style> وعلامة إغلاق ⁦</style>⁩.
  
  
• لا يمكن كتابة عناصر HTML أخرى داخل عنصر <style>.
  
  
• يُكتب عنصر <style> داخل عنصر <head>.
  
  
• يمكن تكرار عنصر <style> داخل صفحة الويب عند الحاجة، لكن يُفضل تنظيم الكود باستخدام عنصر واحد أو عبر ملفات CSS خارجية عند زيادة التعقيد.

يُستخدم عنصر <link> لربط ملفات CSS أو ملفات أخرى [مثل أيقونة الموقع] مع صفحة HTML، وغالبًا يُكتب داخل عنصر <head>.

عنصر <link> وعلاقته بصفحة HTML:

• يُستخدم عنصر <link> عادةً لربط صفحة HTML بملفات خارجية، وأشهرها ملفات CSS أو أيقونة الموقع [favicon].
  
  
• عنصر <link> هو عنصر فارغ [empty element]، له علامة فتح <link> فقط ولا يحتوي على عناصر أخرى داخله.
  
  
• توضع روابط الموارد عادةً داخل head؛ يسمح المعيار ببعض أنواع link داخل body، ومنها rel="stylesheet"، مع تفضيل تنظيم موارد الصفحة في head.
  
  
• يمكن تكرار عنصر <link> داخل صفحة الويب عدة مرات حسب الحاجة.
  
  
• يتم تحديد مسار الملف المراد ربطه باستخدام الخاصية [href].
  
  
• يتم تحديد علاقة الملف بصفحة HTML باستخدام الخاصية [rel]، وهي اختصار لكلمة [relationship] بالإنجليزية وتعني [علاقة].
  
  
• يمكن استخدام الخاصية [href] لربط ملف داخلي في نفس الموقع أو ملف خارجي من خادم آخر.

يُستخدم عنصر <script> لكتابة أوامر برمجية بلغة JavaScript داخل صفحة HTML أو لربط الصفحة بملف JavaScript خارجي.

عنصر <script> وعلاقته بصفحة HTML:

• يُستخدم عنصر <script> عادةً لكتابة أوامر JavaScript مباشرة داخل صفحة HTML أو لربطها بملفات JavaScript خارجية.
  
  
• عنصر <script> من نوع العناصر المتداخلة [nested elements] له علامة فتح <script> وعلامة إغلاق ⁦</script>⁩.
  
  
• لا يمكن كتابة عناصر HTML أخرى داخل عنصر <script>، وعادةً يُكتب فيه JavaScript؛ ويمكن أن يمثل بيانات غير تنفيذية بحسب type، مثل application/ld+json. النص فيه لا يُفسر كعناصر HTML داخل الصفحة.
  
  
• يمكن كتابة عنصر <script> داخل عنصر <head> أو عنصر <body>.
  
  
• يمكن تكرار عنصر <script> داخل صفحة الويب أكثر من مرة حسب الحاجة.
  
  
• يتم تحديد مسار ملف JavaScript الخارجي باستخدام الخاصية [src].
  
  
• يمكن أن تشير الخاصية [src] إلى ملف JavaScript داخلي في نفس الموقع أو إلى ملف خارجي على خادم آخر.

يُستخدم عنصر <base> لتحديد الرابط الأساسي [base URL] الذي تُحسب بناءً عليه جميع الروابط والصور النسبية داخل صفحة HTML، ويُكتب دائمًا داخل عنصر <head>.

عنصر <base> وعلاقته بصفحة HTML:

• يُستخدم عنصر <base> لتحديد الرابط الأساسي لجميع الروابط والصور النسبية في الصفحة.
  
  
• عنصر <base> هو عنصر فارغ [empty element] وله علامة فتح <base> فقط.
  
  
• لا يُسمح بكتابة عناصر HTML أخرى داخل عنصر <base>.
  
  
• يجب كتابة عنصر <base> داخل عنصر <head>، ولا يمكن تكراره داخل نفس الصفحة.
  
  
• يتم تحديد الرابط الأساسي باستخدام الخاصية [href].
  
  
• يمكن استخدام الخاصية [target] مع عنصر <base> لتحديد هدف افتراضي للروابط والنماذج التي لا تملك target خاصة بها؛ القيمة _blank تطلب سياقًا جديدًا.
  
  
• يمكن أن يكون الرابط في الخاصية [href] رابطًا داخليًا أو خارجيًا.
  
  
• يعمل عنصر <base> مع جميع الروابط والصور النسبية داخل الصفحة.

يُستخدم عنصر <noscript> لإظهار رسالة أو محتوى بديل لمستخدمي صفحات الويب الذين قاموا بتعطيل جافاسكريبت في متصفحاتهم. حيث تقوم هذه الرسالة بأخبارهم أن الجافا سكريبت لا تعمل.

عنصر <noscript> وعلاقته بصفحة HTML:

• يُستخدم عنصر <noscript> لإظهار رسالة أو محتوى بديل إذا كانت جافاسكريبت معطلة على المتصفح.
  
  
• عنصر <noscript> عنصر متداخل، له علامة فتح <noscript> وعلامة إغلاق ⁦</noscript>⁩.
  
  
• داخل body يمكن كتابة محتوى بديل مناسب دون تداخل noscript. أما داخل head فعند تعطيل البرمجة يقتصر المحتوى على link وstyle وmeta، فلا توضع رسالة نصية مباشرةً فيه.
  
  
• يمكن كتابة عنصر <noscript> داخل عنصر <head> أو داخل عنصر <body>.
  
  
• يمكن تكرار استخدام عنصر <noscript> داخل صفحة الويب إذا دعت الحاجة.
  
  
• يظهر محتوى عنصر <noscript> فقط عند تعطيل جافاسكريبت أو إذا كان المتصفح لا يدعمها.