قسمت ۳ – ساختار صفحه HTML؛ doctype، head، body و راست‌چین کردن

ساختار html یعنی اسکلت ثابتی که هر صفحه وب باید داشته باشد: یک اعلان <!DOCTYPE html> در ابتدای فایل، یک المان ریشه <html> و دو بخش اصلی داخل آن؛ <head> برای اطلاعات صفحه و <body> برای محتوایی که کاربر می‌بیند. برای صفحه فارسی هم lang="fa" و dir="rtl" روی تگ html قرار می‌گیرد.

نویسنده: تیم siloow (سیلو سولوشن) — آخرین به‌روزرسانی: آبان ۱۴۰۵

در این قسمت تک‌تک خطوط قالبی را که در قسمت قبل با Emmet ساختید باز می‌کنیم: چرا doctype لازم است، چه چیزی در head می‌آید، meta charset utf-8 چه مشکلی را حل می‌کند و راست‌چین کردن صفحه دقیقاً چطور انجام می‌شود. در پایان یک قالب استاندارد فارسی دارید که در تمام دوره از آن استفاده می‌کنیم.

ساختار HTML چیست و از چه بخش‌هایی تشکیل می‌شود؟

ساختار HTML از چهار جزء ثابت تشکیل می‌شود: doctype، المان html، المان head و المان body. همه محتوای صفحه داخل این چهار لایه قرار می‌گیرد و مرورگر از روی همین اسکلت، درخت صفحه را می‌سازد.

به نمونه کامل زیر نگاه کنید؛ این یک صفحه فارسی استاندارد طبق HTML Living Standard (نسخه زنده و همیشه به‌روز 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>
    <h1>منوی امروز کافه نارنج</h1>
    <p>قهوه دمی، کیک هویج و چای ماسالا آماده سفارش است.</p>
  </body>
</html>

اگر فایل index.html قسمت نصب VS Code و ساخت اولین صفحه HTML را باز کنید، همین ساختار را می‌بینید. حالا هر بخش را جداگانه بررسی می‌کنیم.

درخت سند (DOM) چیست؟

مرورگر کد شما را می‌خواند و از آن یک درخت به نام DOM می‌سازد. در این درخت، html ریشه است، head و body فرزندان آن هستند و بقیه المان‌ها شاخه‌های کوچک‌تر. به همین دلیل به المانی که داخل المان دیگر است «فرزند» و به المان بیرونی «والد» می‌گوییم:

html
├── head
│   ├── meta (charset)
│   ├── meta (viewport)
│   ├── title
│   └── meta (description)
└── body
    ├── h1
    └── p

تورفتگی (Indentation) در کد، دقیقاً همین رابطه والد و فرزندی را نشان می‌دهد. مرورگر به فاصله‌ها اهمیتی نمی‌دهد، اما خواندن کد برای انسان بدون تورفتگی سخت می‌شود.

doctype در HTML چیست و چرا باید اولین خط باشد؟

<!DOCTYPE html> یک اعلان است، نه تگ؛ به مرورگر می‌گوید صفحه را در «حالت استاندارد» (no-quirks mode) نمایش دهد. اگر آن را ننویسید، مرورگر وارد «حالت عجیب» (quirks mode) می‌شود و برای سازگاری با سایت‌های دهه ۹۰ میلادی، بعضی قواعد CSS را متفاوت اجرا می‌کند.

نکات مهم doctype در html:

• باید اولین چیز فایل باشد؛ فقط فضای خالی یا کامنت قبل از آن مجاز است، ولی بهتر است هیچ چیز قبلش ننویسید.
• به حروف کوچک و بزرگ حساس نیست؛ <!doctype html> هم کاملاً درست است.
• تگ بسته ندارد و هیچ اتریبیوتی نمی‌گیرد.
• doctype‌های طولانی HTML ۴ و XHTML دیگر لازم نیستند؛ HTML امروزی فقط همین شکل کوتاه را دارد.

<!-- درست: حالت استاندارد (no-quirks) -->
<!DOCTYPE html>

<!-- این هم درست است؛ حروف کوچک و بزرگ فرقی ندارند -->
<!doctype html>

<!-- قدیمی؛ در پروژه جدید ننویسید -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

اگر بخواهید ببینید صفحه در کدام حالت است، در کنسول DevTools (کلید F12) عبارت document.compatMode را بنویسید: مقدار CSS1Compat یعنی حالت استاندارد و BackCompat یعنی quirks mode. توضیحات رسمی را در صفحه Quirks Mode در MDN می‌توانید بخوانید.

تگ html و اتریبیوت‌های lang و dir چه کاری انجام می‌دهند؟

تگ <html> المان ریشه است و همه چیز (به جز doctype) داخل آن قرار می‌گیرد. دو اتریبیوت مهم آن lang برای زبان و dir برای جهت نوشتار است.

اتریبیوت lang

مقدار lang یک کد زبان استاندارد (BCP ۴۷) است: fa برای فارسی، en برای انگلیسی و fa-IR اگر بخواهید منطقه را هم مشخص کنید. این اتریبیوت روی ظاهر صفحه اثر مستقیم ندارد، اما برای این‌ها حیاتی است:

• صفحه‌خوان‌ها (نرم‌افزارهای نابینایان) متن را با تلفظ همان زبان می‌خوانند.
• موتورهای جست‌وجو زبان صفحه را راحت‌تر تشخیص می‌دهند.
• مرورگر برای انتخاب فونت، شکستن کلمات، ترجمه خودکار و غلط‌یاب از آن استفاده می‌کند.

dir rtl در HTML؛ راست‌چین کردن درست صفحه

اتریبیوت dir جهت پایه متن را تعیین می‌کند و سه مقدار دارد: ltr (چپ به راست، پیش‌فرض)، rtl (راست به چپ) و auto (مرورگر از روی اولین حرف قوی متن تصمیم می‌گیرد). قرار دادن dir rtl در html روی تگ ریشه کارهای زیر را با هم انجام می‌دهد:

• متن از سمت راست شروع می‌شود و علامت‌های نگارشی (نقطه، علامت سؤال، پرانتز) در جای درست می‌نشینند.
• نوار اسکرول در بعضی مرورگرها به سمت چپ منتقل می‌شود.
• جدول‌ها از راست به چپ چیده می‌شوند و ستون اول در سمت راست قرار می‌گیرد.
• در CSS، مقدارهای منطقی مثل start و margin-inline-start به سمت راست اشاره می‌کنند (این را از قسمت ۳۰ به بعد زیاد استفاده می‌کنیم).

چرا با CSS (مثلاً text-align: right) راست‌چین نکنیم؟ چون جهت متن جزو معنای محتواست، نه ظاهر آن. text-align فقط متن را به راست می‌چسباند ولی ترتیب نمایش علامت‌ها و کلمات انگلیسی وسط جمله فارسی را درست نمی‌کند. مرجع رسمی هم توصیه می‌کند جهت را با اتریبیوت dir در HTML مشخص کنید.

اگر بخشی از صفحه فارسی به زبان دیگری است، فقط همان بخش را با lang و dir خودش علامت بزنید:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Persian and English</title>
</head>
<body>
  <p>این متن فارسی و راست‌چین است.</p>
  <p lang="en" dir="ltr">This paragraph is English and left-to-right.</p>
</body>
</html>

نکته: dir="rtl" را روی <html> بگذارید، نه روی <body>. اگر فقط body راست‌چین باشد، بعضی بخش‌ها مثل نوار اسکرول و مقدارهای منطقی CSS در سطح ریشه هنوز چپ‌چین رفتار می‌کنند.

تگ head در HTML چه چیزهایی را نگه می‌دارد؟

تگ head در html ظرف «فراداده» (metadata) صفحه است؛ یعنی اطلاعاتی درباره صفحه که مستقیم روی صفحه نمایش داده نمی‌شود اما مرورگر، موتور جست‌وجو و شبکه‌های اجتماعی از آن استفاده می‌کنند. تنها المان اجباری داخل head، تگ <title> است.

<head>
  <!-- ۱. انکدینگ: همیشه اولین خط head -->
  <meta charset="UTF-8">
  <!-- ۲. نمایش درست در موبایل -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- ۳. عنوان تب مرورگر و نتیجه گوگل -->
  <title>آموزش ساختار HTML | کدپرس</title>
  <!-- ۴. توضیح صفحه برای نتایج جست‌وجو -->
  <meta name="description" content="ساختار پایه یک صفحه فارسی.">
  <!-- ۵. آیکون تب مرورگر -->
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  <!-- ۶. فایل CSS (از قسمت ۲۳ به بعد) -->
  <link rel="stylesheet" href="style.css">
</head>

meta charset utf-۸ چه کاری انجام می‌دهد؟

<meta charset="UTF-8"> به مرورگر می‌گوید بایت‌های فایل را با کدگذاری UTF-۸ به حروف تبدیل کند؛ کدگذاری‌ای که تمام حروف فارسی، عربی، ایموجی و همه زبان‌های دنیا را پوشش می‌دهد. طبق استاندارد HTML، این تگ باید کامل در ۱۰۲۴ بایت اول فایل قرار بگیرد؛ به همین دلیل همیشه آن را اولین فرزند head بنویسید. نبودن آن معمول‌ترین علت نمایش حروف فارسی به شکل نویسه‌های نامفهوم است.

meta viewport برای موبایل

بدون <meta name="viewport" content="width=device-width, initial-scale=1">، مرورگرهای موبایل فرض می‌کنند صفحه برای دسکتاپ (حدود ۹۸۰ پیکسل) طراحی شده و آن را کوچک‌نمایی می‌کنند تا جا شود؛ نتیجه، متن‌های ریز و ناخوانا است. این تگ پایه هر طراحی سایت ریسپانسیو است و در قسمت ۲۱ درباره همه متاتگ‌ها مفصل‌تر صحبت می‌کنیم.

title و meta description

متن <title> روی تب مرورگر، در بوکمارک‌ها و معمولاً به عنوان تیتر آبی نتیجه گوگل نمایش داده می‌شود. meta description هم پیشنهاد شما برای متن خاکستری زیر آن است. نقش این دو در دیده‌شدن سایت را در مقاله سئو چیست؟ راهنمای کامل سئو سایت توضیح داده‌ایم.

المان داخل head	کاربرد	اجباری؟
<meta charset="UTF-8">	تعیین کدگذاری حروف؛ باید در ۱۰۲۴ بایت اول فایل باشد	عملاً بله
<meta name="viewport">	نمایش درست صفحه در عرض گوشی	برای سایت ریسپانسیو بله
<title>	عنوان تب مرورگر و نتایج جست‌وجو	بله (در اغلب صفحه‌ها)
<meta name="description">	خلاصه صفحه برای نتایج جست‌وجو	خیر، ولی توصیه می‌شود
<link rel="icon">	آیکون کوچک تب مرورگر (favicon)	خیر
<link rel="stylesheet">	اتصال فایل CSS	خیر
<script>	اتصال جاوااسکریپت (معمولاً با defer)	خیر
<style>	نوشتن CSS داخل همان صفحه	خیر

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

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

در مثال زیر، جمله دارای کلمات انگلیسی و عدد داخل یک پاراگراف فارسی است. چون جهت پایه سند rtl است، مرورگر با الگوریتم دوجهته یونیکد (Bidi) کلمات انگلیسی را درست چپ‌به‌راست و کل جمله را راست‌به‌چپ نمایش می‌دهد. پاراگراف کد سفارش، کاملاً انگلیسی است و با dir="ltr" چپ‌چین شده است:

<body>
  <h1>فروشگاه کتاب پارسه</h1>
  <p>
    کتاب «HTML and CSS» نوشته Jon Duckett
    با ۲۰٪ تخفیف موجود است.
  </p>
  <p dir="ltr">Order code: BK-2026-114</p>
  <p dir="auto">این پاراگراف جهتش را از اولین حرف قوی می‌گیرد.</p>
</body>

آیا تگ‌های html، head و body اجباری هستند؟

از نظر فنی خیر؛ استاندارد HTML اجازه می‌دهد تگ‌های شروع و پایان این سه المان حذف شوند و مرورگر خودش آن‌ها را در DOM می‌سازد. صفحه زیر از نظر اعتبارسنج W3C یک سند معتبر است:

<!DOCTYPE html>
<title>صفحه کوتاه</title>
<p>این صفحه بدون html، head و body هم معتبر است!

با این حال در عمل همیشه آن‌ها را بنویسید: بدون تگ <html> جایی برای lang و dir ندارید، کد خواناتر می‌شود و هم‌تیمی‌ها (و خودتان شش ماه بعد) ساختار را سریع‌تر می‌فهمند. در پروژه‌های تیم siloow، از قالب‌های وردپرس تا وب‌اپلیکیشن‌ها، فایل پایه هر صفحه همیشه همین اسکلت کامل است.

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

• نوشتن محتوا داخل head: متن، تیتر یا تصویر داخل head نمایش داده نمی‌شود یا مرورگر آن را به body منتقل می‌کند.
• دو بار نوشتن body یا head: هر سند فقط یکی از هر کدام دارد.
• meta charset بعد از title یا اسکریپت‌ها: آن را اولین خط head بگذارید.
• lang=”en” در صفحه فارسی: قالب پیش‌فرض Emmet انگلیسی است؛ حتماً به fa تغییر دهید.
• راست‌چین کردن با text-align به‌جای dir: علامت‌ها و کلمات انگلیسی جابه‌جا نمایش داده می‌شوند.
• قرار دادن چیزی قبل از doctype: حتی یک کاراکتر BOM یا فاصله ناخواسته در بعضی سیستم‌های قالب‌سازی مشکل‌ساز می‌شود.

تمرین این قسمت

1. یک فایل جدید بسازید و بدون Emmet، ساختار کامل HTML فارسی را از حفظ تایپ کنید.
2. در DevTools دستور document.compatMode را اجرا کنید؛ سپس doctype را حذف کنید و دوباره امتحان کنید.
3. یک پاراگراف انگلیسی داخل صفحه فارسی اضافه کنید و با lang و dir آن را درست علامت بزنید.
4. meta viewport را حذف کنید و صفحه را در حالت موبایل DevTools (کلید Ctrl+Shift+M) ببینید؛ سپس آن را برگردانید.
5. فایل را در اعتبارسنج W3C بررسی کنید و مطمئن شوید هیچ خطایی ندارد.

خلاصه

• ساختار HTML شامل doctype، html، head و body است.
• <!DOCTYPE html> صفحه را در حالت استاندارد نگه می‌دارد.
• lang="fa" زبان و dir="rtl" جهت راست‌به‌چپ را برای کل سند تعیین می‌کند.
• head فراداده است: charset (اول)، viewport، title، description و لینک فایل‌ها.
• body تمام محتوای قابل مشاهده را نگه می‌دارد.

از این به بعد همه مثال‌های دوره با همین قالب فارسی شروع می‌شوند. در قسمت بعد، «قسمت ۴ – تگ، المان و اتریبیوت در HTML»، سراغ اجزای سازنده همین کدها می‌رویم. اگر قسمت اول را نخوانده‌اید، قسمت ۱ – HTML چیست؟ را ببینید و فهرست کامل دوره را در کدپرس دنبال کنید.

منابع

• HTML Living Standard — استاندارد رسمی HTML (WHATWG)
• MDN Web Docs — مرجع عناصر HTML
• web.dev — دوره Learn HTML گوگل

سوالات متداول ساختار HTML