سر (head)
تگ «سر (head)» محل «فراداده (Metadata)» است؛ یعنی داده درباره صفحه. محتوا نشان داده نمی شود. «تگ head» بین <html> و <body> قرار می گیرد و چیزهایی مثل عنوان، استایل و اسکریپت را نگه می دارد.
تعریف و جایگاه «تگ head»
طبق منبع، «تگ head» ظرف فراداده است. عنوان صفحه، کدنویسی کاراکترها، سبک ها، اسکریپت ها، و اطلاعات دیگر را نگه می دارد. این بخش در صفحه نمایش داده نمی شود.
نمونه ساده: title داخل «تگ head»
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
چه تگ هایی داخل head می آیند؟
بر اساس منبع، این تگ ها در head مجاز هستند: <title>، <style>، <base>، <link>، <meta>، <script>، و <noscript>.
نکته: برای دسترسی سریع، از لینک داخلیِ «تگ head» استفاده کن.
base: تنظیم پیش فرض لینک ها
«تگ base» آدرس و مقصد پیش فرض لینک ها را تعیین می کند. مثل قرار دادن آدرس مدرسه برای همه نامه ها.
<html>
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
</html>
style: استایل درون-سندی
«تگ style» قوانین CSS را داخل head می گذارد. مثل لباس فرم برای متن ها.
<html>
<head>
<style>
h1 { color: red; }
p { color: blue; }
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
link: اتصال استایل بیرونی
«تگ link» فایل CSS بیرونی را وصل می کند. مثل پوشیدن یونیفرم آماده.
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>I am formatted with a linked style sheet</h1>
<p>Me too!</p>
</body>
</html>
نمایش پیش فرض head در مرورگرها
طبق منبع، عنصر head نمایش داده نمی شود. این رفتار پیش فرض مرورگرهاست.
head {
display: none;
}
جمع بندی سریع
- head ظرف فراداده صفحه است.
- head بین html و body می آید.
- title در هر سند ضروری است.
- style و link استایل ها را مدیریت می کنند.
- head نمایش داده نمی شود.