ساختار یک سند HTML

پیش از بررسی جزئیات، بیایید کل سند را یک‌جا ببینیم. این همان ساختاری است که تقریباً هر صفحه HTML واقعی با آن شروع می‌شود:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>فروشگاه کتاب آنلاین</title>
</head>
<body>
  <h1>به فروشگاه کتاب خوش آمدید</h1>
  <p>جدیدترین کتاب‌ها را اینجا پیدا کنید.</p>
</body>
</html>

حالا هر بخش این سند را جداگانه بررسی می‌کنیم.

این خط اولین چیزی است که در هر فایل HTML می‌آید. به مرورگر می‌گوید این سند با آخرین استاندارد HTML (که به آن HTML5 هم گفته می‌شود) نوشته شده است. بدون این خط، برخی مرورگرها ممکن است صفحه را در حالتی به نام «Quirks Mode» رندر کنند که رفتار CSS در آن قابل پیش‌بینی نیست. این خط تگ بسته‌شونده ندارد و همیشه دقیقاً همین شکل نوشته می‌شود.

عنصر <html> عنصر ریشه (root) کل سند است؛ یعنی همه‌چیز — head و body — داخل آن قرار می‌گیرد. دو attribute در اینجا اهمیت زیادی دارند:

• lang="fa" — به مرورگر و صفحه‌خوان‌ها می‌گوید محتوای این صفحه فارسی است. این برای تلفظ درست توسط صفحه‌خوان‌ها و همچنین برای سئو مهم است.
• dir="rtl" — جهت متن را راست‌به‌چپ تنظیم می‌کند. بدون این attribute، مرورگر به‌صورت پیش‌فرض متن را چپ‌به‌راست می‌چیند که برای فارسی نادرست است.

عنصر <head> شامل اطلاعاتی درباره صفحه است، نه محتوایی که مستقیماً روی صفحه دیده می‌شود. چیزهایی مثل عنوان تب مرورگر، تنظیمات کاراکتر، لینک به فایل‌های CSS و متادیتای سئو همگی داخل head قرار می‌گیرند.

meta charset="UTF-8"

این خط مشخص می‌کند سند با کدگذاری UTF-8 نوشته شده است — کدگذاری‌ای که تقریباً تمام زبان‌ها از جمله فارسی را پشتیبانی می‌کند. بدون این خط، حروف فارسی ممکن است به‌صورت کاراکترهای نامفهوم نمایش داده شوند.

viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0"> به مرورگرهای موبایل می‌گوید عرض صفحه را برابر عرض واقعی دستگاه در نظر بگیرند، نه اینکه صفحه را مثل یک نسخه کوچک‌شده از دسکتاپ نمایش دهند. بدون این خط، سایت در موبایل معمولاً بسیار کوچک و غیرقابل‌استفاده به نظر می‌رسد.

<title>

متنی که داخل <title> می‌نویسید، در تب مرورگر، در نتایج موتورهای جست‌وجو و هنگام اشتراک‌گذاری لینک نمایش داده می‌شود. هر صفحه باید یک title منحصربه‌فرد و توصیفی داشته باشد.

هر چیزی که کاربر واقعاً روی صفحه می‌بیند — متن، تصویر، دکمه، فرم — داخل <body> قرار می‌گیرد. یک سند HTML فقط یک <body> دارد که بعد از <head> می‌آید.

مرورگر سند را از بالا به پایین می‌خواند. اگر meta charset خیلی دیر بیاید، ممکن است مرورگر پیش از رسیدن به آن، بخشی از متن را با کدگذاری اشتباه پردازش کرده باشد. به همین دلیل معمولاً توصیه می‌شود meta charset اولین یا از اولین خط‌های داخل <head> باشد.

فراموش کردن lang یا dir. بدون dir="rtl"، چیدمان متن فارسی به‌طور پیش‌فرض اشتباه می‌شود.

گذاشتن محتوای قابل‌مشاهده داخل <head>. هر متن یا تصویری که باید توسط کاربر دیده شود، باید داخل <body> باشد.

جا انداختن <!DOCTYPE html>. این باعث رفتار غیرقابل‌پیش‌بینی مرورگر در رندر صفحه می‌شود.