اصطلاح main container یک اصطلاح فنی رسمی در HTML نیست، بلکه یک اصطلاح رایج بین طراحان وب است. به‌صورت ساده:

Main Container یعنی عنصری که محتوای اصلی صفحه را در خودش نگه می‌دارد.

مثلاً:

• محتوای متنی
• مقالات
• تصاویر اصلی
• فرم‌ها
• جداول
• و هر چیزی که کاربر باید ببینه

✅ در HTML چطور Main Container رو می‌سازیم؟

معمولاً برای این کار از تگ‌های معنایی (semantic) یا یک div استفاده می‌کنیم.

روش 1 – تگ معنایی <main>

تگ <main> در HTML5 ساخته شده برای اینکه محتوای اصلی صفحه رو مشخص کنه. خیلی هم برای SEO و دسترس‌پذیری مفیده.

مثال:

<main>
  <h1>Welcome to My Website</h1>
  <p>This is the main content of the page.</p>
</main>

مزایا:
✅ معنایی (semantic) هست → به SEO کمک می‌کنه
✅ برای صفحه‌خوان‌ها (Screen Reader) واضحه که محتوای اصلی اینجاست.

روش 2 – div با کلاس container

گاهی برای کنترل بهتر استایل‌دهی (CSS)، داخل <main> یا جداگانه، یک div با کلاس container می‌سازیم:

<main>
  <div class="container">
    <h1>Welcome</h1>
    <p>This is the main content area.</p>
  </div>
</main>

یا بدون <main>:

<div class="container">
  <h1>Welcome</h1>
  <p>This is the main content area.</p>
</div>

✅ چرا Container مهمه؟

چون با container:

• عرض (width) سایت رو محدود می‌کنیم (مثلاً 1200px)
• محتوا رو وسط صفحه میاریم
• فضای سفید (whitespace) رو کنترل می‌کنیم
• ظاهر سایت حرفه‌ای‌تر میشه

✅ مثال CSS برای Container

.container {
  width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

توضیح:

• width: عرض ثابت می‌ده
• margin: 0 auto: وسط‌چین می‌کنه
• padding: فاصله داخلی می‌ده

✅ Container در فریم‌ورک‌ها

تقریباً همه‌ی فریم‌ورک‌ها مثل Bootstrap یا Tailwind یک کلاس container دارند:

Bootstrap:

<div class="container">
  ...
</div>

Tailwind CSS:

<div class="container mx-auto px-4">
  ...
</div>

✅ فرق main با container

تگ/کلاس	وظیفه
<main>	مشخص کردن محتوای اصلی صفحه از نظر معنایی و دسترس‌پذیری
.container	کنترل استایل (عرض، وسط‌چینی، پدینگ)

✨ جمع‌بندی

✅ main container یعنی جایی که محتوای اصلی صفحه داخلش قرار می‌گیره
✅ هم تگ معنایی مثل <main> داریم هم div ساده
✅ container به نظم، زیبایی و دسترس‌پذیری سایت کمک می‌کنه