ساختار سند HTML و عناصر head و body | درس 4

ساختار سند HTML و تفاوت بخش های head و body در درس 4

درس 4 از دوره 60 قسمتی آموزش HTML و CSS ارومیا دیزاین

هر صفحه HTML یک اسکلت مشخص دارد. بخشی از سند اطلاعات لازم برای مرورگر و موتور جستجو را نگه می دارد و بخش دیگر محتوایی را در بر می گیرد که کاربر داخل صفحه می بیند. در این درس، ساختار کامل یک سند HTML را خط به خط بررسی می کنیم و تفاوت head و body را با یک مثال واقعی می آموزیم.

پیش از شروع باید بتوانید فایل index.html را بسازید و در مرورگر باز کنید. اگر هنوز پوشه پروژه و فایل های آن را آماده نکرده اید، ابتدا درس 3: ساختار پوشه ها و اولین پروژه وب را انجام دهید. زمان پیشنهادی این درس همراه تمرین حدود 45 تا 60 دقیقه است.

در پایان این درس چه چیزی یاد می گیرید؟

اجزای اصلی یک سند HTML را به ترتیب درست می نویسید.
نقش doctype و عنصر ریشه html را توضیح می دهید.
اطلاعات مخصوص head را از محتوای قابل مشاهده body جدا می کنید.
زبان، جهت، رمزگذاری، viewport و عنوان زبانه را تنظیم می کنید.
با ابزار مرورگر بررسی می کنید که title با عنوان داخل صفحه فرق دارد.

ساختار پایه سند HTML چیست؟

سند HTML یک فایل متنی با پسوند .html است. مرورگر این متن را می خواند، عناصر را تشخیص می دهد و صفحه را می سازد. یک قالب پایه مدرن می تواند به شکل زیر باشد:

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>صفحه معرفی استودیو</title>
  <meta name="description" content="معرفی کوتاه خدمات استودیوی طراحی آفتاب">
</head>
<body>
  <main>
    <h1>استودیوی طراحی آفتاب</h1>
    <p>ما برای کسب و کار ها صفحه های ساده و خوانا طراحی می کنیم.</p>
  </main>
</body>
</html>

کد بالا یک سند کامل و مستقل است. عنوان زبانه مرورگر «صفحه معرفی استودیو» خواهد بود، اما داخل خود صفحه عنوان «استودیوی طراحی آفتاب» دیده می شود. این دو متن در دو بخش متفاوت قرار دارند و کاربرد یکسانی ندارند.

خط اول: doctype چه کاری انجام می دهد؟

عبارت <!doctype html> باید در ابتدای سند قرار بگیرد. این خط یک تگ معمولی و یک عنصر داخل درخت صفحه نیست. وظیفه عملی آن در صفحه های مدرن این است که مرورگر سند را در حالت استاندارد پردازش کند و به حالت های قدیمی سازگاری وارد نشود.

برای HTML امروزی همین شکل کوتاه کافی است. لازم نیست doctype های طولانی نسخه های قدیمی را در پروژه تازه کپی کنید. در راهنمای رسمی نحو پایه HTML در MDN نیز همین عبارت کوتاه در ابتدای سند کامل استفاده شده است.

عنصر html: ریشه همه عناصر صفحه

عنصر html همه محتوای سند را در بر می گیرد و به همین دلیل عنصر ریشه نامیده می شود. در نمونه فارسی ما، دو ویژگی مهم روی تگ آغازین قرار گرفته اند:

<html lang="fa" dir="rtl">

lang="fa" زبان اصلی سند را فارسی معرفی می کند. این اطلاعات برای فناوری های کمکی، ترجمه، پردازش متن و ابزارهای جستجو مفید است.
dir="rtl" جهت پایه سند را راست به چپ قرار می دهد. این ویژگی جای تمام تنظیم های چیدمان CSS را نمی گیرد، اما نقطه شروع درستی برای صفحه فارسی است.

در پایان سند باید تگ </html> بسته شود. مرورگر ممکن است بعضی خطاهای ساده را جبران کند، اما هدف ما نوشتن ساختار روشن و قابل بررسی است. شناخت درست ساختار صفحه یکی از معیارهایی است که هنگام ارزیابی کیفیت طراحی سایت وردپرس نیز اهمیت دارد.

head چیست و چه چیزی داخل آن قرار می گیرد؟

head ظرف اطلاعاتی درباره سند است که معمولا به شکل محتوای اصلی داخل صفحه نمایش داده نمی شوند. عنوان زبانه، رمزگذاری متن، اطلاعات viewport، توضیح صفحه و اتصال فایل های CSS از نمونه های رایج هستند. قرار گرفتن یک متن معمولی داخل head به این معنی نیست که آن متن به عنوان محتوای صفحه قابل اتکا خواهد بود.

رمزگذاری UTF-8

خط زیر رمزگذاری سند را UTF-8 معرفی می کند:

<meta charset="utf-8">

UTF-8 حروف فارسی و بسیاری از زبان های دیگر را پوشش می دهد. این اعلان را نزدیک ابتدای head قرار دهید. خود فایل نیز باید با UTF-8 ذخیره شده باشد؛ نوشتن meta به تنهایی داده ای را که با رمزگذاری اشتباه ذخیره شده اصلاح نمی کند.

تنظیم viewport برای نمایشگرهای کوچک

خط viewport به مرورگر موبایل کمک می کند عرض صفحه را با عرض دستگاه هماهنگ کند:

<meta name="viewport" content="width=device-width, initial-scale=1">

وجود این خط به تنهایی یک طرح را واکنش گرا نمی کند. اگر عرض ثابت بزرگ یا تصویر نامناسب داشته باشید، همچنان ممکن است صفحه در موبایل مشکل پیدا کند. طراحی Mobile First و Media Query را در بخش واکنش گرایی دوره تمرین خواهیم کرد.

title با عنوان داخل صفحه فرق دارد

عنصر title عنوان سند را تعیین می کند. مرورگر معمولا آن را در زبانه، تاریخچه و نشانک نمایش می دهد. این عنصر داخل head قرار می گیرد و خودش یک تیتر قابل مشاهده در محتوای body نیست.

برای عنوانی که کاربر داخل صفحه می بیند از عناصر عنوان مانند h1 استفاده می کنیم. در این مقاله H1 بدنه توسط قالب سایت ساخته شده است؛ H1 موجود در نمونه کد فقط بخشی از فایل تمرینی شماست. در پروژه های تجاری، عنوان سند و تیتر صفحه باید دقیق و هماهنگ باشند. راهنمای جامع طراحی سایت تصویر گسترده تری از برنامه ریزی محتوای صفحه ارائه می دهد.

meta description چه نقشی دارد؟

meta description یک خلاصه کوتاه از موضوع صفحه ارائه می دهد. موتور جستجو ممکن است از آن برای توضیح نتیجه استفاده کند، اما نمایش همان متن تضمین شده نیست و موتور جستجو می تواند بر اساس جستجوی کاربر بخش دیگری را انتخاب کند. متن توضیح باید واقعی، مرتبط و مخصوص همان صفحه باشد.

برای مطالعه جزئیات title، meta و زبان سند، راهنمای رسمی فراداده صفحه در MDN مرجع این بخش است. تنظیم درست head پایه فنی خوبی می سازد، اما به تنهایی جای محتوای مفید و تجربه کاربری را نمی گیرد.

نمای مفهومی ارتباط اطلاعات head با محتوای قابل مشاهده body — head اطلاعات سند را نگه می دارد و body محتوای قابل مشاهده صفحه را در بر می گیرد. این تصویر مفهومی است.

body چیست و چه چیزی داخل آن قرار می گیرد؟

body محتوایی را در بر می گیرد که صفحه برای کاربر نمایش می دهد: عنوان ها، پاراگراف ها، لینک ها، تصویرها، فهرست ها، فرم ها و بخش های دیگر. هر سند HTML فقط یک body دارد. در نمونه این درس، main، h1 و p همگی داخل body قرار گرفته اند.

body محل نوشتن title زبانه یا meta charset نیست. برعکس، head نیز محل مقاله، تصویر خدمات یا دکمه تماس نیست. این جداسازی باعث می شود ساختار برای مرورگر، ابزارهای کمکی و توسعه دهنده بعدی روشن بماند.

در سایت واقعی، body می تواند شامل چند بخش و صفحه های متعدد باشد. برای شناخت نیازهای یک پروژه تجاری می توانید چک لیست سفارش طراحی سایت اختصاصی را مرور کنید. در این درس فقط اسکلت یک صفحه را می سازیم.

رابطه والد، فرزند و تو در تو بودن عناصر

عناصر HTML داخل یکدیگر قرار می گیرند. html والد مستقیم head و body است. main داخل body قرار دارد و h1 و p فرزند main هستند. هر عنصری که دیرتر باز می شود باید پیش از والد خود بسته شود.

نمونه درست:

<main>
  <p>این یک <strong>متن مهم</strong> است.</p>
</main>

در این نمونه ابتدا main، سپس p و بعد strong باز می شوند. هنگام بستن، ترتیب برعکس است: strong، سپس p و در پایان main بسته می شود. فاصله گذاری ابتدای خط برای مرورگر الزام مطلق نیست، اما خواندن رابطه عناصر را برای انسان آسان می کند.

پروژه عملی: سند درس قبل را کامل کنید

پوشه lesson-03 را کپی کنید و نسخه جدید را lesson-04 بنامید.
index.html را با کد کامل ابتدای این درس جایگزین کنید.
فایل را با UTF-8 ذخیره کنید.
index.html را در مرورگر باز کنید.
عنوان زبانه و عنوان داخل صفحه را جداگانه بررسی کنید.
صفحه را با View Page Source باز کنید و ترتیب doctype، html، head و body را ببینید.

در نتیجه مورد انتظار، زبانه مرورگر عبارت «صفحه معرفی استودیو» را نشان می دهد. داخل صفحه باید عنوان «استودیوی طراحی آفتاب» و یک پاراگراف دیده شود. meta description به شکل متن داخل صفحه نمایش داده نمی شود. اگر فایل CSS درس قبل را نگه داشته اید، ظاهر صفحه ممکن است با قواعد آن تغییر کند؛ این تفاوت روی ساختار اصلی سند اثر ندارد.

آزمایش ساده برای فهم تفاوت head و body

متن title را به «آزمایش عنوان زبانه» تغییر دهید، ذخیره کنید و صفحه را تازه سازی کنید. فقط متن زبانه باید تغییر کند. سپس متن h1 را به «آزمایش عنوان صفحه» تغییر دهید. این بار عنوان داخل صفحه عوض می شود. اگر هر دو تغییر را در یک محل می بینید، بررسی کنید دقیقا کدام فایل و کدام عنصر را ویرایش کرده اید.

شناخت این تفاوت هنگام ساخت صفحه برای خدمات طراحی سایت در ارومیه هم کاربرد مستقیم دارد: عنوان سند به معرفی صفحه برای مرورگر و جستجو کمک می کند و عنوان داخل body برای کاربر قابل مشاهده است.

اشتباه های رایج در ساختار سند HTML

doctype حذف شده است: آن را به عنوان اولین خط فایل برگردانید.
head و body داخل هم قرار گرفته اند: هر دو باید فرزند جداگانه html باشند.
محتوای صفحه داخل head نوشته شده است: عنوان ها و پاراگراف های قابل مشاهده را به body منتقل کنید.
title با h1 اشتباه شده است: title در زبانه و h1 در صفحه دیده می شود.
تگ ها به ترتیب نادرست بسته شده اند: از تورفتگی منظم برای تشخیص رابطه استفاده کنید.
حروف فارسی خراب دیده می شوند: هم meta charset و هم رمزگذاری واقعی فایل را کنترل کنید.
صفحه در موبایل بسیار عریض است: viewport را بررسی کنید، اما عرض ثابت عناصر را نیز جداگانه پیدا کنید.
چند body یا head ساخته شده است: قالب پایه را با نمونه کامل مقایسه کنید.

تمرین درس 4: اسکلت صفحه تماس

یک فایل تازه با نام contact.html داخل lesson-04 بسازید. زبان و جهت فارسی، UTF-8، viewport، title و meta description را تنظیم کنید. داخل body یک main قرار دهید و درون آن یک H1 با متن «تماس با استودیو آفتاب» و یک پاراگراف کوتاه بنویسید. ابتدا بدون دیدن پاسخ تلاش کنید.

نمایش پاسخ و روش بررسی تمرین

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>تماس با استودیو آفتاب</title>
  <meta name="description" content="راه های تماس با استودیوی طراحی آفتاب">
</head>
<body>
  <main>
    <h1>تماس با استودیو آفتاب</h1>
    <p>برای دریافت اطلاعات بیشتر با ما در ارتباط باشید.</p>
  </main>
</body>
</html>

فایل را ذخیره و در مرورگر باز کنید. عنوان زبانه و H1 هر دو متن مشابه دارند، اما از دو عنصر مستقل می آیند. با تغییر موقت یکی از آنها می توانید این استقلال را بررسی کنید. در View Page Source نیز باید فقط یک head و یک body ببینید.

ارتباط این درس با پروژه نهایی

پروژه نهایی یک سایت شرکتی چند صفحه ای است. هر صفحه آن، از صفحه اصلی تا خدمات و تماس، به همین اسکلت پایه نیاز دارد. زبان و جهت درست، فراداده مناسب و جداسازی head از body باعث می شود توسعه صفحه های بعدی منظم تر باشد.

اگر هنوز نقش HTML در ساخت صفحه برایتان روشن نیست، درس 1 دوره HTML و CSS را مرور کنید. برای تکرار روش ساخت و ذخیره فایل نیز درس 2 آماده سازی ویرایشگر کد در دسترس است.

پرسش های متداول ساختار سند HTML

آیا head در صفحه دیده می شود؟

خود head به عنوان محتوای صفحه نمایش داده نمی شود، اما اطلاعات آن می تواند در بخش های دیگر مرورگر اثر داشته باشد؛ برای مثال title در زبانه دیده می شود و فایل CSS متصل شده ظاهر body را تغییر می دهد.

آیا title و H1 باید دقیقا یکسان باشند؟

الزامی نیست، اما باید درباره همان موضوع باشند و کاربر را گمراه نکنند. title برای سند و محیط مرورگر است؛ H1 عنوان اصلی محتوای قابل مشاهده صفحه است.

آیا meta description روی رتبه گوگل اثر مستقیم دارد؟

نباید آن را تضمین رتبه بدانید. توضیح دقیق می تواند معرفی نتیجه را بهتر کند، اما موتور جستجو ممکن است متن دیگری را نمایش دهد. کیفیت محتوای صفحه و عوامل فنی متعدد نیز اهمیت دارند.

اگر تگ body را ننویسم، مرورگر صفحه را نشان می دهد؟

مرورگر ممکن است ساختار ناقص را اصلاح کند و یک body بسازد، اما تکیه بر اصلاح خودکار روش مناسبی برای یادگیری و نگهداری پروژه نیست. ساختار را کامل و صریح بنویسید.