main: قلب اصلی محتوای صفحه
تو دو درس قبل با header و footer آشنا شدیم که می‌تونستن هم برای کل صفحه، هم برای بخش‌های کوچیک‌تر تکرار بشن. تگ main اما کاملاً برعکسه: قانون خیلی سخت‌گیرانه‌ای داره که فقط یه‌بار در کل صفحه مجازه. بیا ببینیم چرا این تگ اینقدر خاصه.
main چیه؟
<main>
<h1>به فروشگاه ما خوش آمدید</h1>
<p>محصولات ویژه‌ی امروز را مشاهده کنید.</p>
</main>تگ main محتوای اصلی و منحصربه‌فرد صفحه رو مشخص می‌کنه؛ یعنی همون بخشی که واقعاً موضوع اصلی و هدف اون صفحه‌ست، جدا از عناصر تکراری مثل منو، سایدبار یا فوتر که تو خیلی از صفحات دیگه‌ی همون سایت هم عیناً تکرار می‌شن.
قانون سخت‌گیرانه: فقط یک main در هر صفحه
برخلاف header و footer که دیدیم می‌تونن چندبار تکرار بشن، تگ main باید دقیقاً یک‌بار در هر صفحه استفاده بشه، و نباید داخل header، footer، nav یا aside قرار بگیره:
<!-- درست: فقط یک main -->
<body>
<header>...</header>
<main>
<h1>محتوای اصلی صفحه</h1>
</main>
<footer>...</footer>
</body><!-- اشتباه: دو تا main -->
<body>
<main>بخش اول</main>
<main>بخش دوم</main>
</body>دلیل این محدودیت واضحه: main قراره دقیقاً بگه «این، تنها و اصلی‌ترین محتوای این صفحه‌ست»؛ اگه چند تا main داشته باشیم، دیگه این پیام واضح و بدون ابهام نیست.
چرا main اینقدر مهمه؟ فایده‌ی اصلی: پرش مستقیم برای صفحه‌خوان
مهم‌ترین فایده‌ی main اینه که به کاربران صفحه‌خوان اجازه می‌ده مستقیم به محتوای اصلی صفحه بپرن، بدون اینکه مجبور باشن اول کل منو، لوگو و بقیه‌ی عناصر تکراری هدر رو گوش کنن. خیلی از صفحه‌خوان‌ها یه میان‌بر دارن (مثلاً یه کلید ترکیبی خاص) که کاربر رو مستقیم به اولین main صفحه می‌بره؛ این قابلیت برای کاربرانی که هر روز ده‌ها صفحه‌ی وب مختلف رو با صفحه‌خوان باز می‌کنن، صرفه‌جویی زمانی قابل‌توجهی ایجاد می‌کنه.
مقایسه: چرا header/footer چندبار مجازن ولی main نه؟
فرقشون تو ماهیت معناییشونه: header و footer «نسبی» هستن؛ یعنی هر بخش (چه کل صفحه، چه یه article خاص) می‌تونه سربرگ و پابرگ مخصوص خودش رو داشته باشه. اما main یه مفهوم «مطلق» و یکتاست؛ کل صفحه فقط یه محتوای اصلی داره، نه چندتا. به همین خاطر main محدودیت سخت‌گیرانه‌تری داره.
چه چیزی باید داخل main باشه؟
هر چیزی که موضوع اصلی و منحصربه‌فرد اون صفحه‌ی خاصه؛ مثلاً تو یه صفحه‌ی محصول فروشگاهی، main باید شامل نام محصول، تصویر، قیمت و توضیحاتش باشه. اما منو، لوگوی بالای سایت، یا لینک‌های فوتر (که تو همه‌ی صفحات دیگه‌ی سایت هم عیناً تکرار می‌شن)، نباید داخل main باشن؛ چون این‌ها محتوای «مشترک» بین صفحات هستن، نه محتوای منحصربه‌فرد همون صفحه.
یه مثال کامل و واقعی
<body>
<header>
<h1>فروشگاه لوازم ورزشی</h1>
<nav>
<a href="/">خانه</a>
<a href="/products">محصولات</a>
</nav>
</header>
<main>
<h2>کفش ورزشی مدل رانینگ</h2>
<img src="shoe.jpg" alt="کفش ورزشی مشکی مدل رانینگ">
<p>قیمت: ۵۰۰,۰۰۰ تومان</p>
<p>این کفش با کفی طبی و طراحی سبک، مناسب دویدن روزانه است.</p>
</main>
<footer>
<p>تمام حقوق محفوظ است © ۱۴۰۳</p>
</footer>
</body>تو این مثال، header (با منو) و footer که تو تمام صفحات این فروشگاه یکسان و تکراری هستن، بیرون از main قرار گرفتن. main فقط شامل چیزیه که مخصوص همین صفحه‌ی خاصه: اطلاعات این کفش ورزشی خاص.
محدودیت مهم دیگر: main نباید داخل article، aside، header، footer یا nav باشه
<!-- اشتباه -->
<article>
<main>
<p>این استفاده نادرست است</p>
</main>
</article>main باید همیشه یه فرزند مستقیم و سطح‌بالا از body باشه (یا حداکثر داخل یه div بدون معنای خاص)، نه داخل تگ‌های معنایی دیگه‌ای مثل article یا aside که تو درس‌های بعد می‌بینیم؛ چون main نماینده‌ی محتوای اصلی کل صفحه‌ست، نه محتوای اصلی یه بخش کوچیک‌تر.
ویژگی hidden و کاربرد نادر main
یه حالت استثنایی اینه که می‌شه چند main تو کد HTML داشت، اما فقط یکی از اون‌ها در یه لحظه فعال و قابل‌مشاهده باشه (بقیه با ویژگی hidden مخفی باشن)؛ این تکنیک بیشتر تو اپلیکیشن‌های تک‌صفحه‌ای (SPA) با جاوااسکریپت پیشرفته استفاده می‌شه که خارج از محدوده‌ی این دوره‌ی مقدماتیه.
چند اشتباه رایج
- استفاده از چند main در یک صفحه‌ی معمولی و ساده.
- قراردادن main داخل header، footer، article یا aside.
- گذاشتن محتوای تکراری (مثل منو یا فوتر) داخل main، در حالی که main باید فقط محتوای منحصربه‌فرد همون صفحه رو داشته باشه.
- فراموش‌کردن استفاده از main و به‌جاش استفاده از یه div ساده برای محتوای اصلی.
بهترین روش‌ها
- همیشه دقیقاً یک main در هر صفحه‌ی معمولی استفاده کن.
- فقط محتوای منحصربه‌فرد و اصلی همون صفحه رو داخل main بذار، نه عناصر تکراری بین صفحات.
- main رو همیشه در سطح بالای body قرار بده، نه داخل تگ‌های معنایی دیگه.
نکته‌ی سئو
main به گوگل کمک می‌کند محتوای اصلی و منحصربه‌فرد صفحه را از عناصر تکراری (مثل منو یا فوتر که در تمام صفحات سایت یکسان هستند) تفکیک کند؛ این تفکیک می‌تواند به تمرکز بهتر گوگل روی محتوای واقعاً مهم صفحه کمک کند.
نکته‌ی دسترسی‌پذیری
main مهم‌ترین نقطه‌ی عطف (Landmark) برای پرش مستقیم کاربران صفحه‌خوان به محتوای اصلی صفحه است؛ نبود این تگ یا استفاده‌ی نادرست از آن (مثلاً چند main یا main داخل article) این قابلیت حیاتی پرش سریع را از کاربر می‌گیرد.
جمع‌بندی
تگ main محتوای اصلی و منحصربه‌فرد یک صفحه را مشخص می‌کند و برخلاف header و footer، باید دقیقاً یک‌بار در هر صفحه استفاده شود و نباید داخل تگ‌هایی مثل article، aside، header، footer یا nav قرار بگیرد. این تگ مهم‌ترین نقطه‌ی عطف برای دسترسی‌پذیری صفحه محسوب می‌شود.