در حال بارگذاری...

head در HTML

جلسهٔ قبل روی یکی از فرزندان head سند تمرکز کرد: title. حالا به خود عنصر head زوم کنید — جعبه‌ای که فرادادهٔ صفحه را برای مرورگرها، ابزارهای جستجو و منابع پیوندی نگه می‌دارد. بازدیدکننده head را مثل داستان نمای اصلی نمی‌خواند. اثرش را از برچسب زبانه، نویسه‌های درست، مقیاس موبایل، و stylesheetهایی که قبل از رنگ‌شدن بدنه بار می‌شوند حس می‌کند.

head برای چیست؟

<head>...</head> داخل <html> می‌نشیند، معمولاً درست بعد از تگ باز html و قبل از <body>. اتاق کنترل سند برای فراداده و پیوند منابع است. بنر قابل‌دید نیست. بنر قابل‌دیدی که بعداً با <header> می‌سازید تگ دیگری با کار دیگر است.

پاسخ مستقیم

فراداده را در <head>...</head> بگذارید: یک title، معمولاً <meta charset="UTF-8">، اغلب یک metaی viewport برای چیدمان موبایل، و وقتی CSS بیرونی دارید <link rel="stylesheet" href="...">. عنوان‌های قابل‌دید، پاراگراف، تصویر و UI تعاملی را در <body> بگذارید. title یکی از فرزندان مهم head است — جایگزین head نمی‌شود.

فرزندان رایج در یک نگاه

📊 فرزندان رایج head

عنصر نقش
title برچسب زبانه / سند
meta charset کدگذاری نویسه (UTF-8)
meta viewport عرض و مقیاس موبایل
link stylesheet فایل CSS بیرونی
style CSS داخلی اختیاری
script اسکریپت اختیاری (عادت قرارگیری فرق دارد؛ بسیاری مبتدیان آخر body بار می‌کنند)

یک head شروع عملی

روز اول به هر meta ممکن نیاز ندارید. یک head قابل‌اعتماد مبتدی encoding، viewport موبایل، عنوان سند، و پیوند stylesheet را وقتی CSS جداست پوشش می‌دهد.

یک head شروع عملی

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<p>Visible content lives in the body.</p>
</body>
</html>

خواندن نمونه

  • meta charset="UTF-8" به مرورگر می‌گوید نویسه‌ها را چگونه رمزگشایی کند — از جمله ایموجی و متن غیرلاتین جلسات قبل
  • viewport کمک می‌کند مرورگر موبایل از عرض دستگاه استفاده کند نه از دسکتاپ کوچک‌شده
  • title زبانه را برچسب می‌زند، همان‌طور که در جلسهٔ page-title تمرین کردید
  • link rel="stylesheet" فایل styles.css را وصل می‌کند بدون گذاشتن قوانین CSS داخل هر HTML
  • هرچه بازدیدکننده روی صفحه می‌خواند زیر body است

charset اول، زود در head

metaی charset را نزدیک بالای head بگذارید تا مرورگر قبل از تفسیر بقیهٔ متن سند encoding را بداند. UTF-8 پیش‌فرض مدرن است مگر محدودیت نادر قدیمی خلاف بگوید. charset گم یا دیر، علت کلاسیک نویسه‌های خراب شبیه «فساد تصادفی» است.

viewport و مرورگرهای موبایل

بدون metaی viewport بسیاری گوشی‌ها بوم عریض دسکتاپ فرض می‌کنند و صفحه را کوچک می‌کنند. شروع رایج width=device-width, initial-scale=1.0 می‌گوید عرض دستگاه را بگیر و از زوم عادی شروع کن. طراحی واکنش‌گرا را بعداً با CSS ظریف می‌کنید؛ viewport دست‌دادن سمت HTML است که آن چیدمان‌ها روی گوشی قابل‌استفاده شوند.

پیوند CSS از head

stylesheet بیرونی نمایش را از ساختار جدا نگه می‌دارد. عنصر link در head با rel="stylesheet" و مسیر href راه دوستانهٔ مبتدی برای اتصال CSS است. مسیرها همان ایده‌های file-path قبلی را دنبال می‌کنند. اگر فایل CSS نباشد HTML هنوز کار می‌کند — فقط بدون استایل به نظر می‌رسد.

head در برابر body در برابر header

  • head — فراداده و پیوند منابع؛ مقالهٔ اصلی خواندنی نیست
  • body — محتوای قابل‌دیدی که بازدیدکننده می‌خواند و با آن کار می‌کند
  • header — عنصر بخش‌بندی قابل‌دید برای بنر یا بلوک مقدمه داخل body (در جلسات چیدمان بعدی)
    head را به header عوض نکنید به امید این‌که نام مستعار باشند. عنصرهای متفاوت‌اند. قاطی‌کردنشان به نشانه‌گذاری نامعتبر یا بی‌اثر می‌انجامد.

اسکریپت و head (یادداشت مبتدی)

اسکریپت می‌تواند در head یا body بیاید. بسیاری صفحات آموزشی اسکریپت ساده را آخر body بار می‌کنند تا ساختار HTML اول وجود داشته باشد. راهبردهای پیشرفتهٔ بارگذاری بعداً می‌آید. برای این جلسه بدانید script به‌عنوان فرزند head مجاز است، اما محتوای قابل‌دید هنوز متعلق به head نیست.

تمرین در ویرایشگر

  1. از اسکلت پایهٔ HTML با html، head و body شروع کنید.
  2. داخل head، charset UTF-8، metaی viewport، و title واضح اضافه کنید.
  3. اگر styles.css دارید link بزنید (یا فایل خالی بسازید تا مسیر واقعی باشد).
  4. همهٔ متن و عنوان قابل‌دید را فقط در body نگه دارید.
  5. با View Source یا DevTools Elements تأیید کنید بخش head با قصدتان یکی است.
  6. موقتاً viewport را بردارید، در پنجرهٔ باریک یا شبیه‌ساز گوشی دوباره بار کنید اگر می‌توانید، تفاوت مقیاس را ببینید — بعد برگردانید.

اشتباهات رایج

  • گذاشتن پاراگراف، تصویر یا عنوان اصلی فقط داخل head انگار بوم صفحه است
  • فراموش charset تا نویسه‌های ویژه و ایموجی خراب شوند
  • رد کردن viewport و تعجب از زوم عجیب موبایل
  • قاطی کردن head (فراداده) با header (بخش قابل‌دید بعدی دوره)
  • فرض این‌که فقط title کافی است و charset را در صفحات چندزبانه نگذارید
  • پیوند stylesheet با مسیر غلط و مقصر دانستن HTML وقتی CSS بار نمی‌شود

خلاصه

  • head فراداده و پیوند منابع را نگه می‌دارد؛ body محتوای قابل‌دید را
  • قطعات شروع: charset، viewport، title، و اغلب linkی CSS
  • title یکی از فرزندان head است، نه جایگزین head
  • head همان عنصر header قابل‌دید نیست
  • charset را زود بگذارید تا مرورگر سند را درست رمزگشایی کند

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
6
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 1 از 1
Html آموزش