head در لغت به معنی سر است. این تگ به عنوان سر یک فایل و سند اچ تی ام ال است. درمورد اهمیت این تگ کافیست بگوییم که تگ head، مغز یک فایل html است و خودتان بهتر می دانید که هیچ موجود هوشمندی بدون مغز نمی تواند کار کند. قبل از معرفی این تگ، شما باید با تعریف متادیتا آشنا شوید:
متادیتا چیست
متادیتا در لغت به معنی ابر داده است اما تعریف کاربردی آن، دیتا درمورد دیتا یا اطلاعاتی درمورد اطلاعات است. یک فایل اچ تی ام ال شامل اطلاعات یا دیتا است و متادیتا اطلاعاتی درمورد این اطلاعات موجود در فایل html است. در هر صفحه html متادیتا شامل موارد زیر است که باید داخل تگ head آورده شوند:
- تگ title
- تگ های meta
- تگ های لینک link
- تگ های script
- تگ style
- تگ base
مقصد نهایی این متادیتا ها موتور های جستجو و مرورگر هاست. متادیتا ها چون اطلاعاتی از صفحه را به مرورگر ها و موتورهای جستجو ارائه می کنند، دارای اهمیت بسیاری هستند.
اگر نیاز به اطلاعات کافی درمورد همه این تگ ها و به صورت یک مقاله جامع دارید، شما را به مطالعه مقاله آموزش HTML [2] دعوت میکنم.
معرفی تگ head
تگ head به تنهایی اگر شامل متادیتا ها نباشد عملا هیچ ارزشی ندارد. اعتبار این تگ به تگ هایی است که در داخل آن استفاده می شود. تنها تگ هایی چون <title>, <meta>, <style>, <link>, <base>و <script> می توانند در این تگ حضور داشته باشند. در واقع این تگ، ظرفی است برای نگهداری تگ های گفته شده. اهمیت متادیتا ها در نزد مرورگر ها، موجب مهم شدن این تگ گردیده است. این تگ درمورد اطلاعات بسیاری با مرورگر ها و جستجوگر ها حرف میزند. مثلا نام نویسنده ای که سند را نوشته، استایل های عناصر فایل، آدرس فایل های css و javascript و…
اهمیت تگ head
موتور های جستجو نظیر گوگل، ربات هایی دارند که در بین صفحات html می خزند و به جستجو و سیر و سیاحت در آنها می پردازند. این ربات ها اولین موردی که پیدا می کنند و به آن اهمیت می دهند متا دیتا های یک صفحه هستند. و چون تگ head در برگیرنده این ابرداده هاست، پس اولین مکان گشت ربات ها به شمار می رود. واضح است که هر صفحه ای که شامل متادیتا های قوی و کامل در این تگ است، می توانند رتبه بهتری در نتایج پیدا کنند. این پروسه را سئو می گویند. به عبارتی طراحی و تدوین یک head کامل و قدرتمند، اولین گام شما در سئو محسوب می شود.
کاربرد تگ head
تگ head و تگ های داخل آن، به غیر از title در نمایشگر مشاهده نمی شوند. به عبارتی نباید در این تگ از عکس یا ویدیو یا تگ پاراگراف و غیره استفاده نمایید. این تگ متعلق به مرورگر و موتور های جستجوست. محل این تگ پس از تگ <html> و درست قبل از تگ <body> است. به عبارتی این تگ سومین تگ شما در یک سند اچ تی ام ال است. (اگر تگ doctype [3] نیز به عنوان تگ شمرده شود) لطفا به مثال زیر توجه بفرمایید :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
<link rel="stylesheet" href="mystyle.css">
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</head>
<body>
The content of the document......
</body>
</html>
در این مثال مکان این تگ و تگ هایی که اجازه حضور در داخل آن را دارند به وضوح نشان داده شده اند.
تفاوت در HTML4 و HTML5
تفاوت آنچنانی در این دو نسخه از لحاظ تگ head وجود ندارد. تنها تفاوت در خاصیت ویژه profile است که در نسخه پنجم html حذف گردیده است. این خصوصیت در html4 مقدارش برابر یک url بود. به علت حذف آن از نسخه جدید، بهتر است درمورد آن بحث نکنیم.
خصوصیت های تگ head
این تگ از تمامی ویژگی های عمومی اچ تی ام ال نظیر class, style, id و غیره پشتیبانی می کند.
رویداد های تگ head
این تگ از تمامی رویکردهای عمومی html نظیر onclick, onmousemove, onmouseup و .. پشتیبانی می کند.
پشتیبانی مرورگر ها از تگ head
| نام مرورگر |  |
 |
 |
 |
 |
| پشتیبانی میکند؟ | بله | بله | بله | بله | بله |
همانگونه که از جدول پیداست، تمامی مرورگر ها از این تگ حیاتی پشتیبانی می کنند.
منابع:
https://www.w3schools.com/html/html_head.asp [5]
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML [6]