شرح وسم Head في لغة أتش تي أم ال :HTML Head Tag (element
وسم Head في لغة أتش تي أم ال :HTML Head Tag (element
مقدمة:
درسنا الحالي يتناول عنصر <head> في لغة الوسوم HTML ودوره الأساسي في تكوين المعلومات الرئيسية لصفحة الويب. يشمل العديد من العناصر التي تلعب دورًا هامًا في
تحديد كيفية عرض وفهم الصفحة، بما في ذلك عنوان الصفحة، ووصفها، وربطها بأنماط الأسلوب والعديد من المعلومات الأخرى التي تؤثر على تجربة المستخدم.
وسم <head> في HTML هو عنصر يستخدم لتوفير معلومات عن الصفحة التي لا تظهر مباشرة على الواجهة، ولكنها تؤثر على كيفية عرض المحتوى أو تقديمه. يُستخدم عادة
يستخدم لتحديد عناصر مثل عنوان الصفحة، وربط الصفحة بأنماط الأسلوب (CSS)، والروابط بالأيقونات، وبيانات الميتا (meta)، والنصوص النصية الأخرى التي تعطي معلومات إضافية حول الصفحة.
لنقم بشرح بعض العناصر الرئيسية التي يمكن أن توجد داخل العنصر <head>:
عنوان الصفحة (Title):
يتم تحديد عنوان الصفحة داخل عنصر <title>، ويظهر هذا العنوان في شريط عناوين المتصفح ويعتبر مهمًا لتحديد محتوى الصفحة.
<title>عنوان الصفحة هنا</title>
وصف الصفحة (Meta Description):
يستخدم عنصر <meta> لتوفير وصف للصفحة يظهر في نتائج محركات البحث. يمكن استخدام الخاصية “name” مع قيمة “description”.
<meta name=”description” content=”وصف الصفحة هنا”>
ربط ملفات الأنماط (CSS):
لربط الصفحة بملف أنماط خارجي، يتم استخدام عنصر <link> مع الخاصية “rel” التي تحدد نوع الرابط و “href” التي تحدد مكان الملف.
<link rel="stylesheet" type="text/css" href="styles.css">
رمز اللغة (Language):
يمكن تحديد لغة الصفحة باستخدام العنصر <meta> مع الخاصية “http-equiv” والقيمة “Content-Language”.
<meta http-equiv="Content-Language" content="ar">
رموز الأيقونات (Favicon):
يمكن تحديد أيقونة الصفحة (favicon) باستخدام العنصر <link> والخاصية “rel” بقيمة “icon”، و “href” التي تحدد مكان الأيقونة.
<link rel="icon" href="favicon.ico" type="image/x-icon">
هذه العناصر الرئيسية تُستخدم داخل عنصر <head> لتحديد وتنظيم المعلومات الهامة حول الصفحة التي لا تظهر مباشرة للمستخدم، ولكنها تلعب دورًا حاسمًا في تحسين تجربة
المستخدم وفهم محتوى الصفحة من قبل محركات البحث.
أهمية :HTML Head Tag (element)
وسم أو عنصر <head> في HTML يعتبر جزءًا أساسيًا من هيكلية أي صفحة ويحمل أهمية كبيرة لعدة أسباب:
تعريف محتوى الصفحة:
عنوان الصفحة (Title): يوفر عنصر <title> في العنصر <head> وسيلة لتحديد عنوان الصفحة، وهذا العنوان يظهر في شريط عناوين المتصفح. يعتبر
العنوان محوريًا لفهم محتوى الصفحة.
تحسين أداء محركات البحث:
وصف الصفحة (Meta Description): عنصر <meta> يستخدم لتوفير وصف موجز للصفحة. يُستخدم هذا الوصف في نتائج محركات البحث، مما يسهم في
تحسين فهم محتوى الصفحة من قبل محركات البحث وزيادة فرص ظهور الصفحة في نتائج البحث.
ربط بأنماط الأسلوب (CSS):
استخدام <link> في العنصر <head> يمكنه ربط الصفحة بملف أنماط CSS خارجي، مما يسمح بتحسين تنسيق وتصميم الصفحة. يساهم ذلك في فصل هيكل الصفحة عن
العرض ويعزز إمكانية إعادة استخدام الأنماط عبر صفحات متعددة.
تعريف لغة الصفحة:
يمكن استخدام <meta> لتعريف لغة الصفحة، مما يساعد في توجيه المحتوى للمستخدمين المناسبين. هذا يعزز تجربة المستخدم ويساعد في تحسين فهم المحتوى.
رموز الأيقونات (Favicon):
عنصر <link> في <head> يُستخدم لتحديد الأيقونة التي تظهر في علامة التبويب (tab) بجوار عنوان الصفحة. هذا يسهم في تمييز الصفحة وتحديدها بشكل فريد.
بشكل عام، يُمثل <head> مكانًا حيث يتم تعريف وتنظيم العناصر التي تؤثر على كيفية تقديم وفهم الصفحة، وتحسين تفاعل المستخدم معها وتحسين أدائها في محركات البحث.
مثال كامل بالكود
إليك مثال كامل على كيفية استخدام عنصر <head> في صفحة HTML، مع تضمين عناصر مختلفة داخله:
<!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="description" content="صفحة توضيحية حول أهمية عنصر الـ head في HTML"> <meta name="keywords" content="HTML, Head, توضيح, أهمية"> <meta name="author" content="اسم المؤلف"> <title>عنصر الـ Head في HTML</title> <link rel="stylesheet" href="styles.css"> <link rel="icon" href="favicon.ico" type="image/x-icon"> </head> <body> <header> <h1>مرحبًا بك في درسنا عن عنصر الـ Head في HTML</h1> </header> <main> <p>هنا يأتي محتوى الصفحة الرئيسي.</p> <!-- المزيد من العناصر والمحتوى يمكن أن يتبع هنا --> </main> <footer> <p>© 2023 حقوق النشر محفوظة.</p> </footer> </body> </html>
في هذا المثال:
تم استخدام العنصر <meta charset=”UTF-8″> لتعيين ترميز الحروف إلى UTF-8.
تم استخدام عنصر <meta> لتحديد وصف الصفحة وكلمات البحث.
تم استخدام <title> لتحديد عنوان الصفحة.
تم استخدام <link> لربط الصفحة بملف أنماط CSS وأيقونة (favicon).
تم استخدام <html lang=”ar”> لتحديد لغة الصفحة.
يرجى ملاحظة أنه يجب استبدال “styles.css” و “favicon.ico” بالملفات الفعلية التي تريد استخدامها في مشروعك.
مثال اخر
إليك مثال آخر يشرح استخدام عنصر <head> في صفحة HTML:
<!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="description" content="موقع ويب توضيحي عن العنصر <head> في HTML"> <meta name="keywords" content="HTML, توضيح, <head>, موقع ويب"> <meta name="author" content="اسم المؤلف"> <title>توضيح عنصر <head> في HTML</title> <link rel="stylesheet" href="styles.css"> <link rel="icon" href="favicon.ico" type="image/x-icon"> </head> <body> <header> <h1>مرحبًا بك في موقعنا التوضيحي!</h1> </header> <nav> <ul> <li><a href="#section1">القسم الأول</a></li> <li><a href="#section2">القسم الثاني</a></li> <li><a href="#section3">القسم الثالث</a></li> </ul> </nav> <main> <section id="section1"> <h2>القسم الأول</h2> <p>هذا محتوى القسم الأول.</p> </section> <section id="section2"> <h2>القسم الثاني</h2> <p>هذا محتوى القسم الثاني.</p> </section> <section id="section3"> <h2>القسم الثالث</h2> <p>هذا محتوى القسم الثالث.</p> </section> </main> <footer> <p>© 2023 حقوق النشر محفوظة.</p> </footer> </body> </html>
في هذا المثال، قمت بتضمين عناصر إضافية مثل <nav> لتمثيل شريط التنقل و<section> لتقسيم المحتوى إلى أقسام. تظهر كيف يتم استخدام <head> لتوفير
معلومات حول الصفحة، بما في ذلك الوصف، والعنوان، وربط ملف أنماط CSS، والأيقونة.
سمات وسم head :Attributes of <head> tag
عنصر <head> في HTML لا يحمل العديد من السمات (Attributes) المتاحة، ولكن هناك سمتين هامتين يمكن استخدامهما لتعيين بعض المعلومات الرئيسية. إليك
السمات الرئيسية لعنصر <head>:
lang:تُستخدم لتحديد لغة الصفحة.
يساعد في توجيه المحتوى للمستخدمين الذين يستخدمون لغات محددة.
مثال:
<head lang="ar">
profile:
تُستخدم لربط الصفحة بملف تعريف (profile) لـ HTML.
هذا السمة غير مستخدمة على نطاق واسع وليس لها تأثير كبير في المواقع الحديثة.
مثال:
<head profile="http://www.example.com/">
يرجى ملاحظة أن السمات قد تختلف بين إصدارات HTML، ولكن في HTML5، تم تحسين استخدام <meta charset=”UTF-8″> لتحديد ترميز الحروف بدلاً من استخدام profile في العمليات الحديثة.
عنصر <head> في HTML بشكل عام يحمل سمات قليلة، ولكن هناك بعض العناصر التي يمكن أن توجد داخل <head> وتلعب دورًا هامًا في تحديد وتنسيق الصفحة. هذه
العناصر تشمل:
<title>:
تُستخدم لتحديد عنوان الصفحة.
يظهر هذا العنوان في شريط عناوين المتصفح.
مثال:
<title>عنوان الصفحة هنا</title>
<meta>:
يُستخدم لتوفير معلومات إضافية حول الصفحة.
الخصائص الشائعة تشمل:
charset: يحدد ترميز الحروف للصفحة.
name=”description“: يحدد وصف الصفحة لمحركات البحث.
name=”keywords“: يحدد كلمات مفتاحية لمحركات البحث.
name=”author“: يحدد مؤلف الصفحة.
http-equiv=”Content-Language“: يحدد لغة الصفحة.
مثال:
<meta charset="UTF-8"> <meta name="description" content="وصف الصفحة هنا"> <meta name="keywords" content="HTML, توضيح, صفحة"> <meta name="author" content="اسم المؤلف"> <meta http-equiv="Content-Language" content="ar">
<link>:
يُستخدم لربط الصفحة بملفات خارجية، مثل ملفات أنماط CSS أو الأيقونات.
الخصائص الشائعة تشمل:
rel: يحدد نوع الرابط.
href: يحدد المسار إلى الملف الخارجي.
مثال:
<link rel="stylesheet" type="text/css" href="styles.css"> <link rel="icon" href="favicon.ico" type="image/x-icon">
<base>:
يُستخدم لتحديد عنوان URL الأساسي لجميع الروابط النسبية داخل الصفحة.
مثال:
<base href="https://www.example.com/">
تلك هي بعض العناصر والسمات الرئيسية التي يمكن أن توجد داخل عنصر <head> في صفحة HTML، وتلعب دورًا في تعريف وتنظيم معلومات الصفحة.
مثال متكامل عن Attributes of <head> tag
في HTML، العنصر <head> نفسه لا يأخذ العديد من السمات (Attributes)، ولكن يمكننا استخدام بعض السمات القليلة المهمة.
إليك مثال متكامل:
<!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="description" content="وصف متكامل للصفحة"> <meta name="keywords" content="HTML, Head, توضيح, أهمية"> <meta name="author" content="اسم المؤلف"> <title>عنصر الـ Head في HTML</title> <link rel="stylesheet" href="styles.css"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <base href="https://www.example.com/"> </head> <body> <header> <h1>مرحبًا بك في درسنا عن عنصر الـ Head في HTML</h1> </header> <main> <p>هنا يأتي محتوى الصفحة الرئيسي.</p> <!-- المزيد من العناصر والمحتوى يمكن أن يتبع هنا --> </main> <footer> <p>© 2023 حقوق النشر محفوظة.</p> </footer> </body> </html>
في هذا المثال:
تم استخدام <meta charset=”UTF-8″> لتحديد ترميز الحروف للصفحة.
تم استخدام عناصر <meta> لتوفير وصف وكلمات مفتاحية ومعلومات حول المؤلف.
تم استخدام <link> لربط الصفحة بملف أنماط CSS وأيقونة.
تم استخدام <base> لتحديد عنوان URL الأساسي.
اللغة تم تحديدها باستخدام lang=”ar” في عنصر <html>.
يرجى ملاحظة أن هذا المثال يشمل بعض السمات الشائعة المستخدمة في <head>، ولكن يمكن أن يحتوي المشروع الفعلي على سمات إضافية حسب الحاجة.
اختبار عن هذا الدرس
إليك بعض الأسئلة لاختبار فهم الدرس حول عنصر <head> في HTML:
1-ما هو الدور الرئيسي لعنصر <head> في HTML؟
أ) تحديد اللون الرئيسي للصفحة.
ب) تحديد عنوان الصفحة ومعلومات أخرى ذات أهمية.
ج) تحديد نوع الخط المستخدم في الصفحة.
2-لماذا يعد عنصر <title> مهمًا في عنصر <head>؟
أ) لتحديد ألوان النص على الصفحة.
ب) لتحديد عنوان الصفحة الذي يظهر في شريط عناوين المتصفح.
ج) لتحديد الصورة الرئيسية المعروضة في الصفحة.
3-ما هي وظيفة عنصر <meta name=”description”>؟
أ) تحديد ترميز الحروف للصفحة.
ب) توفير وصف موجز للصفحة يظهر في نتائج محركات البحث.
ج) ربط الصفحة بملف أنماط CSS.
4-لماذا يمكن استخدام عنصر <link> داخل <head>؟
أ) لتحديد الخلفية الرئيسية للصفحة.
ب) لربط الصفحة بملف أنماط CSS أو الصور الخارجية.
ج) لتعيين لغة الصفحة.
ما هي فائدة سمة lang في عنصر <html>؟
أ) تحديد اللغة الرئيسية للمستخدم.
ب) تحديد نوع الصفحة (نص أو صورة).
ج) تحديد اللغة التي يجب استخدامها لتحديد الألوان.
أجوبة:
ب) تحديد عنوان الصفحة ومعلومات أخرى ذات أهمية.
ب) لتحديد عنوان الصفحة الذي يظهر في شريط عناوين المتصفح.
ب) توفير وصف موجز للصفحة يظهر في نتائج محركات البحث.
ب) لربط الصفحة بملف أنماط CSS أو الصور الخارجية.
أ) تحديد اللغة الرئيسية للمستخدم.
**********
1-لماذا يمكن استخدام عنصر <meta charset=”UTF-8″> في <head>؟
أ) لتحديد عنوان الصفحة.
ب) لتحديد ترميز الحروف للصفحة.
ج) لربط الصفحة بملف أنماط CSS.
2-ما هو الهدف من استخدام <meta name=”keywords”>؟
أ) تحديد لغة الصفحة.
ب) تحديد كلمات المفتاح التي تصف محتوى الصفحة لمحركات البحث.
ج) تحديد عنوان الصفحة.
3-كيف يمكن تحسين أداء موقع الويب من خلال استخدام عناصر <head> بشكل صحيح؟
أ) بتحديد لغة الصفحة فقط.
ب) بتوفير عنوان صفحة وصف دقيق.
ج) بتجاهل استخدام أي عناصر في <head>.
4-لماذا يمكن أن يكون <link rel=”canonical”> مهمًا؟
أ) لتحديد لغة الصفحة.
ب) لتحديد الصفحة الرئيسية أو النسخة الأصلية عند وجود نسخ متعددة.
ج) لتحديد أسلوب الكتابة في الصفحة.
5-ما الفرق بين <meta name=”description”> و <meta name=”keywords”>؟
أ) <meta name=”description”> تحدد وصف الصفحة، أما <meta name=”keywords”> تحدد الكلمات المفتاحية.
ب) <meta name=”description”> تحدد لغة الصفحة، أما <meta name=”keywords”> تحدد عنوان الصفحة.
ج) <meta name=”description”> تحدد عنوان الصفحة، أما <meta name=”keywords”> تحدد وصف الصفحة.
أجوبة:
- ب) لتحديد ترميز الحروف للصفحة.
ب) تحديد كلمات المفتاح التي تصف محتوى الصفحة لمحركات البحث.
ب) بتوفير عنوان صفحة وصف دقيق.
ب) لتحديد الصفحة الرئيسية أو النسخة الأصلية عند وجود نسخ متعددة.
أ) <meta name=”description”> تحدد وصف الصفحة، أما <meta name=”keywords”> تحدد الكلمات المفتاحية.
المراجع:
https://developer.mozilla.org/en/docs/Web/HTML/Element/head
W3Schools – HTML <head> Tag:
https://www.w3schools.com/tags/tag_head.asp
HTML Living Standard – The Document Head:
https://html.spec.whatwg.org/multipage/semantics.html#the-document-head
Google Search Engine Optimization (SEO) Starter Guide:
https://support.google.com/webmasters/answer/7451184?hl=en
Search Engine Land – SEO Guide:
https://searchengineland.com/guide/how-to-seo