head: مغز پشتپردهی هر صفحهی HTML
تو درس قبل با ساختار کلی html آشنا شدیم و گفتیم دو فرزند اصلی داره: head و body. تو این درس میخوایم کامل بریم سراغ head و ببینیم دقیقاً چه چیزهایی توش جا میگیره و چرا اینقدر مهمه، با اینکه هیچکدوم از محتواش مستقیم تو صفحه دیده نمیشه.
head دقیقاً چیه؟
تگ <head> یهجور «اتاق پشتصحنه»ی صفحهست. هر چیزی که داخلش بنویسی، مستقیم روی صفحهای که کاربر میبینه ظاهر نمیشه؛ اما اطلاعاتی رو در اختیار مرورگر، موتورهای جستجو و شبکههای اجتماعی میذاره که برای نمایش درست و شناخت صفحه لازمه.
<head>
<meta charset="UTF-8">
<title>آموزش HTML5</title>
</head>چه چیزهایی میتونه داخل head قرار بگیره؟
head میتونه شامل چند نوع تگ مختلف باشه که هرکدوم یه وظیفهی خاص دارن:
<meta>: اطلاعات فراداده (Metadata) مثل کدگذاری کاراکترها، توضیحات صفحه برای گوگل و تنظیمات نمایش موبایل.<title>: عنوانی که تو تب مرورگر و نتایج جستجو نمایش داده میشه.<link>: اتصال به منابع خارجی، مثل فایل CSS یا آیکون سایت (فاوآیکون).<style>: نوشتن CSS مستقیم داخل خود صفحه.<script>: اضافهکردن کد جاوااسکریپت (که میتونه داخل head یا body باشه، بسته به کاربرد).<base>: تعیین آدرس پایهای که همهی لینکهای نسبی صفحه بر اساسش محاسبه بشن.
یه نمونهی کاملتر از head
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>فروشگاه آنلاین کتاب</title>
<meta name="description" content="خرید آنلاین کتابهای ایرانی و خارجی با ارسال سریع">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">
</head>بیا این کد رو خط به خط بررسی کنیم:
meta charset="UTF-8": کدگذاری کاراکترها رو مشخص میکنه تا حروف فارسی درست نمایش داده بشن.meta name="viewport": به مرورگر موبایل میگه صفحه رو با عرض واقعی دستگاه نمایش بده، نه با یه عرض فرضی بزرگتر. بدون این خط، سایت تو موبایل خیلی کوچیک و فشرده دیده میشه.title: عنوان صفحه که تو تب مرورگر و نتایج گوگل نشون داده میشه.meta name="description": توضیح کوتاهی از محتوای صفحه که معمولاً زیر لینک آبیرنگ تو نتایج گوگل نمایش داده میشه.link rel="stylesheet": فایل CSS خارجی رو به صفحه وصل میکنه تا استایلدهی انجام بشه.link rel="icon": آیکون کوچیکی که کنار عنوان تب مرورگر نمایش داده میشه (فاوآیکون).
چرا ترتیب تگها داخل head هم مهمه؟
اگرچه HTML خیلی سختگیر نیست، اما یه قرارداد رایج و توصیهشده وجود داره: meta charset باید همیشه اولین خط داخل head باشه. دلیلش اینه که مرورگر باید هرچه زودتر بفهمه با چه کدگذاریای داره متن رو میخونه؛ اگه این خط خیلی دیر بیاد (مثلاً بعد از یه عالمه متن دیگه)، ممکنه مرورگر قبل از رسیدن به اون، بخشی از صفحه رو با کدگذاری اشتباه پردازش کرده باشه.
تفاوت head و body در یک نگاه
| ویژگی | head | body |
|---|---|---|
| نمایش در صفحه | خیر | بله |
| نوع محتوا | فراداده و تنظیمات | محتوای قابلمشاهده |
| نمونهی تگها | meta، title، link | h1، p، img، a |
چند اشتباه رایج
- گذاشتن تگهای قابلنمایش مثل
<h1>یا<p>داخل head بهجای body. - فراموشکردن
meta name="viewport"، که باعث میشه سایت تو موبایل بد نمایش داده بشه. - نوشتن meta description خیلی طولانی یا تکراری برای همهی صفحات سایت، که برای سئو ضعیفه.
- گذاشتن meta charset در انتهای head بهجای ابتدای آن.
بهترین روشها
- همیشه meta charset رو اولین خط head قرار بده.
- برای هر صفحه یه title و description منحصربهفرد و مرتبط با محتوای همون صفحه بنویس.
- همیشه meta viewport رو برای پشتیبانی درست از موبایل اضافه کن.
نکتهی سئو
تگهای title و meta description مستقیماً روی نحوهی نمایش صفحه در نتایج گوگل و نرخ کلیک کاربران (CTR) تأثیر میگذارند. یک عنوان و توضیح دقیق و جذاب میتواند باعث افزایش ورودی از جستجو شود، حتی اگر رتبهی صفحه تغییری نکند.
نکتهی دسترسیپذیری
تگ title همچنین توسط صفحهخوانها هنگام باز شدن یک صفحه یا تعویض تب خوانده میشود؛ بنابراین باید گویا و مشخص باشد تا کاربران کمبینا سریع بفهمند وارد چه صفحهای شدهاند.
جمعبندی
عنصر head شامل اطلاعات پشتصحنهی صفحه است که مستقیماً دیده نمیشود، اما نقش حیاتی در کدگذاری صحیح متن، معرفی صفحه به مرورگر و موتورهای جستجو، و اتصال به فایلهای CSS و آیکون دارد. رعایت ترتیب و کاملبودن تگهای داخل head، پایهی یک صفحهی حرفهای و آمادهی انتشار است.