بخش head (Head)
بخش head ظرف «فراداده (Metadata)» است. یعنی اطلاعات درباره صفحه. این بخش روی صفحه دیده نمی شود؛ اما مرورگر و موتور جستجو از آن استفاده می کنند.
المان <head> چیست؟
المان <head> بین <html> و <body> می آید. این بخش عنوان، استایل، متا، لینک، اسکریپت و مبنا را نگه می دارد.
المان <title> ضروری است
عنوان صفحه در تب مرورگر نشان داده می شود. همچنین برای سئو مهم است. همیشه کوتاه و دقیق بنویس.
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>
The content of the document...
</body>
</html>
المان <style> برای استایل داخلی
با <style> می توانی CSS همان صفحه را بنویسی. یعنی شکل و رنگ عناصر را تعیین کنی.
<style>
body { background-color: powderblue; }
h1 { color: red; }
p { color: blue; }
</style>
المان <link> برای منابع بیرونی
با <link> معمولاً فایل CSS بیرونی را وصل می کنیم. این کار مدیریت استایل را ساده می کند.
<link rel="stylesheet" href="mystyle.css">
المان <meta> برای فراداده
متاها توضیح، کلیدواژه، نویسنده و کدگذاری کاراکتر را مشخص می کنند. این داده ها نمایش داده نمی شوند؛ اما بسیار کاربردی اند.
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
تنظیم viewport برای موبایل
ویوپورت «ناحیه دید» کاربر است. با این متا، اندازه و زوم اولیه درست می شود.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
المان <script> برای جاوااسکریپت
با <script> کد جاوااسکریپت می آید. مثلاً متن یک المان را تغییر بده.
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
المان <base> برای آدرس پایه
با <base> می توانی آدرس و تارگت پیش فرض لینک ها را تعیین کنی. در هر سند فقط یکی مجاز است.
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
گام های تمرینی
- یک فایل HTML بساز.
- داخل <head> عنوان بگذار.
- متاهای charset و viewport اضافه کن.
- یک فایل mystyle.css لینک کن.
- یک اسکریپت ساده تست کن.
نکته: فقط یک <base> در صفحه بگذار. همچنین <title> همیشه لازم است.
پیوندهای مرتبط در سایت
برای اسکریپت ها صفحه جاوااسکریپت (JavaScript) را ببین. همچنین راهنمای مسیر فایل ها (File Paths) برای لینک ها مفید است. اگر آیکون می خواهی، به فاوآیکون (Favicon) سر بزن.
جمع بندی سریع
- <title> ضروری و سئویی است.
- <meta> برای توضیح و تنظیمات است.
- <link> استایل بیرونی را وصل می کند.
- <script> کد تعاملی را می آورد.
- <base> مسیر پیش فرض می سازد.