إعلان
تعلم الآن

HTML الوسم <head>

تعريفه

يعتبر الوسم <head> من الأقسام الرئيسية في الصفحة لأنه يستخدم لإعلام المتصفح بكيفية عرض محتوى الصفحة بالإضافة إلى إمكانية تضمين ملفات التصميم, سكربتات الصفحة, أيقونة الموقع و غيرها من الأشياء المهمة فيه.

بشكل عام, كل ما يوضع بداخل هذا الوسم الهدف منه ليس أن يظهر بشكل مباشر في الصفحة بل أن يحسّن طريقة ظهور محتوى الصفحة الموضوع في الوسم <body>.

دعم المتصفحات

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
1 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا بإضافة وسم <style> في الوسم <head> و بداخله قمنا بوضع كود CSS بهدف تحديد طريقة ظهور عناصر الصفحة.

المثال الأول

<head>
	<style>
        h1 {
            color: red;
        }
        p {
			color: blue;
        }
	</style>
</head>
<body>
	<h1>This is a red heading</h1>
	<p>This is a blue paragraph.</p>
</body>
		

جرب الكود



في المثال التالي قمنا بإضافة وسم <script> في الوسم <head> و فيه وضعنا كود بلغة جافا سكربت يقوم بعرض رسالة ترحيب حين يتم تنفيذه. و بالمبدأ سيتم تنفيذ هذا الكود حين يتم النقر على الزر الموضوع في الصفحة.

المثال الثاني

<head>
	<script>
		function displayMessage()
		{
			alert('Hello User!');
		}
	</script>
</head>
<body>
	<button onclick="displayMessage()">Click Me!</button>
</body>
		

جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

head {
	display: none;
}
	

نصائح و ملاحظات

الصفحة يجب أن تحتوي على <head> واحد فقط مع الإشارة إلى أنه يمكن إضافة الوسوم التالية بداخله:

  • <title>
  • <style>
  • <base>
  • <link>
  • <meta>
  • <script>
  • <noscript>

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة