المان <head> در HTML یکی از دو فرزند مستقیم المان <html> به شمار میرود. محتویات این المان (که بخش head را تشکیل میدهد) برخلاف برادر خود یعنی المان <body> داخل صفحه وب نمایش داده نمیشود. در واقع این المان شامل اطلاعاتی پیرامون سند است. عنوان صفحه، توصیف صفحه (که در نتایج موتورهای جستجو نمایش داده میشود) و انواع متادیتاهای دیگر، استایل های CSS و اسکریپت های JavaScript داخلی و خارجی از جمله مواردی هستند که در این بخش مشخص میشود.
به عنوان یک نمونه ساده سند HTML زیر را در نظر بگیرید:
<!DOCTYPE html> <html> <head> <title>Simple page</title> <meta charset="utf-8"> </head> <body> <p>This is a simple paragraph.</p> </body> </html>
همانطور که میبینید در این سند، المان <head> به صورت زیر است:
<head>
<title>Simple page</title>
<meta charset="utf-8">
</head>در این مثال ساده تنها دو المان داخل المان <head> قرار گرفته است. با این حال معمولا المان های دیگری هم میان تگهای <head> و </head> قرار میگیرند. در ادامه به بررسی تعدادی از مهمترین این المانها میپردازیم.
عنوان صفحه و المان <title> در بخش head
از المان <title> برای تعیین عنوان صفحه استفاده میشود. معمولا این عنوان را میتوانید روی زبانه یا نوار عنوان مرورگر مشاهده کنید. فراموش نکنید این عنوان با عنوان محتواهای موجود در صفحه (یا هدینگ ها) تفاوت دارد.
<title>Simple page</title>
در مثال فوق Simple page عنوان صفحه خواهد بود.
بیشتر بخوانید: آشنایی با جزئیات عنوان سند و تأثیر آن روی سئو
فراداده ها و المان های <meta>
در HTML برای اضافه کردن متادیتا یا فراداده به سند از المان های <meta> در بخش head استفاده میشود. این المان ها از جمله المانهای خالی اچتیامال هستند. به این معنا که تنها شامل تگ شروع هستند و در آنها خبری از تگ پایان یا محتوای داخلی نیست. در مثال قبل نمونهای از این نوع المان را به صورت زیر مشاهده میکنید.
<meta charset="utf-8">
این المان مجموعه کاراکتر یا نویسه (Character set) سند را به UTF-8 تنظیم میکند. این مجموعه از کاراکترهای موجود در بسیاری از زبانهای بشری پشتیبانی میکند و درنتیجه امکان نمایش نوشتههایی به زبانهای مختلف را در صفحه وب فراهم میکند.
بسیاری از المان های <meta> از دو خصوصیت name و content برای تعیین نوع فراداده و محتوای آن استفاده میکنند. اضافه کردن توصیف (یا Description) به صفحه یکی دیگر از کاربردهای رایج تگ ها و المان های متاست که در آن از همین دو خصوصیت استفاده میشود. در مثال زیر نمونهای از این المان <meta> را مشاهده میکنید.
<meta name="description" content="This is a simple test page.">افزودن توصیف مناسب به صفحه یکی از موارد مفید در بهینه سازی موتورهای جستجوست. این توصیف معمولا در صفحه نتایج موتورهای جستجو نیز نمایش داده میشود و توصیه میشود شامل کلمه های کلیدی اصلی و مرتبط با صفحه باشد.
تنوع و کاربردهای المانهای <meta> صرفا به این دو مورد محدود نمیشود. از این نوع المانها برای موارد دیگری مانند تعیین نویسنده، ویوپورت صفحه و … نیز استفاده میشود.
اضافه کردن CSS و JavaScript
در اغلب وبسایتهای امروزی از CSS برای تعیین ظاهر صفحات و از JavaScript برای تعیین رفتار و تعاملی کردن صفحه استفاده میشود. یکی از روشهای رایج برای افزودن یا اعمال این موارد به صفحه، ارجاع دادن به فایل های استایلشیت CSS و کدهای JavaScript است. از آنجایی که این فایلها از فایل HTML مستقل هستند با عنوان CSS و JavaScript خارجی شناخته میشوند.
برای افزودن CSS خارجی از المان <link> مشابه با نمونه زیر در بخش <head> استفاده میشود. در این حالت مقدار خصوصیت href مسیر فایل CSS موردنظر را مشخص میکند و rel=”stylesheet” هم اعلام میکند فایل مقصد مربوط به یک استایلشیت است.
<link rel="stylesheet" href="style.css">برای افزودن JavaScript خارجی نیز از المان <script> مشابه با نمونه زیر استفاده میشود. در این المان خصوصیت src مسیر فایل JavaScript موردنظر را مشخص میکند. این المان را هم میتوانید در بخش <head> یا <body> سند قرار دهید.
<script src="script.js"></script>شما میتوانید به جای ارجاع به استایلشیت خارجی، نحوه نمایش المان ها و ظاهر آنها را مشابه نمونه زیر داخل تگ های <style> و </style> در بخش head مشخص کنید.
<style>
body {
background-color: royalblue;
}
h1 {
color: white;
text-align: center;
}
</style>همچنین میتوانید به جای ارجاع به جاوااسکریپت خارجی، کدهای جاوااسکریپت خود را مشابه نمونه زیر مابین تگ های <script> و </script> قرار دهید.
<script>
document.getElementById("page").innerHTML = "my content";
</script>بیشتر بخوانید: آشنایی با روش های اضافه کردن CSS به HTML
بیشتر بخوانید: آشنایی با روش های اضافه کردن کد JavaScript به صفحات HTML
افزودن فاوآیکن داخل المان head
یکی دیگر از کاربردهای مهم المان <link> در بخش head به افزودن فاوآیکن (Favicon) مربوط میشود. برای این منظور میتوانید از المان <link> مشابه با نمونه زیر استفاده کنید. مقدار خصوصیت href در این حالت مسیر فایل فاوآیکن را مشخص میکند.
<link rel="icon" type="image/x-icon" href="favicon.ico">بیشتر بخوانید: آشنایی با جزئیات درج فاوآیکن در HTML
بازگشت به فهرست مجموعه آموزشی HTML
