بستن

جلسه سی و هفتم: آموزش کامل تگ main در HTML

تگ main

به دوره حرفه‌ای آموزشHTML در آوای وب خوش اومدی! اینجا قراره تگ main رو مثل یه حرفه‌ای یاد بگیری! تو این مقاله، از صفر تا صد تگ main رو با مثالای باحال، نکات خفن، و ترفندهای سئو یاد می‌گیری! آماده‌ای؟ بزن بریم!

🏷️ تگ main چیه و چرا مهمه؟

تگ main یه تگ معنایی (Semantic) تو HTMLه که برای مشخص کردن محتوای اصلی و یکتای صفحه‌ات طراحی شده! این تگ قلب صفحه‌ته جایی که موضوع اصلی رو نشون می‌دی! مثلاً متن یه مقاله، محتوای یه صفحه محصول، یا هر چیزی که کاربر برای دیدنش اومده! این تگ به گوگل و صفحه‌خوان‌ها می‌گه “اینجا مهم‌ترین بخشه”! نه‌تنها تجربه کاربری (UX) رو بهتر می‌کنه، بلکه برای سئو و دسترسی‌پذیری (Accessibility) هم معجزه می‌کنه! چون محتوای اصلی رو واضح و مرتب نگه می‌داره!

🧱 ساختار کلی تگ <main>

تگ main یه تگ جفتیه! یعنی باید باز و بسته بشه! کافیه محتوای اصلی‌ات رو داخلش بذاری! نگاه کن:

<main>
  <h1>سلام دنیا</h1>
  <p>این محتوای اصلیه</p>
</main>

✏️ محتوای داخل <main> باید منحصر‌به‌فرد برای همون صفحه باشه، نه چیزایی مثل منو، فوتر، یا سایدبار که تو همه‌ی صفحات تکراری‌ان.

🆚 تفاوت تگ <main> با تگ‌های مشابه

تگکاربردتفاوت با <main>
<section>بخش‌های مختلف از یک محتوامی‌تونه داخل <main> باشه
<article>یه واحد مستقل از محتوامعمولاً داخل <main> استفاده می‌شه
<div>صرفاً برای تقسیم‌بندی بدون معنامعنایی نداره، برعکس <main>
<body>تمام محتوای قابل مشاهده صفحهشامل <main>, <header>, <footer> و… هست

📝 نکته مهم: نباید چند تا <main> تو یه صفحه داشته باشی. فقط یکی مجازه!

🎯 مثال‌های عملی: تگ main رو تو عمل ببین!

بیا چند نمونه باحال ببینیم!

✅ مثال برای صفحه اصلی:

<body>
  <header>
      <h1>آوای وب</h1>
    </header>
    <main>
      <h2>خوش اومدی</h2>
      <p>اینجا محتوای اصلیه</p>
    </main>
    <footer>
      <p>کپی‌رایت</p>
    </footer>
</body>

✅ مثال برای مقاله:

<body>
  <header>
    <h1>وبلاگ</h1>
  </header>
  <main>
    <article>
      <h2>آموزش HTML</h2>
      <p>متن مقاله...</p>
    </article>
  </main>
  <footer>
    <p>نویسنده: علی</p>
  </footer>
</body>

✅ مثال برای صفحه محصول:

<main>
  <h1>گوشی سامسونگ</h1>
  <img src="phone.jpg" alt="گوشی">
  <p>قیمت: 500</p>
</main>

🚫 اشتباهات رایج

اشتباهچرا اشتباهه؟
استفاده از چند <main>طبق استاندارد HTML فقط یکی مجازه
قرار دادن نوار کناری داخل <main>سایدبار معمولاً محتوای فرعی حساب می‌شه
استفاده نکردن از <main>باعث کاهش معنابخشی صفحه و ضعف در سئو می‌شه

🚀 نکات سئو مرتبط با تگ main

  • در هر صفحه فقط یک بار از این تگ استفاده کن.
  • محتوای تگ مربوط بهه محتوای اصلی صفحه باشه.
  • از محتوای اضافی یا غیرضروری تو این تگ پرهیز کن!

❓ پرسش‌های متداول (FAQ)

آیا می‌تونم چندتا <main> تو یه صفحه داشته باشم؟

❌ نه. فقط یک بار مجازه.

فرق <main> با <section> چیه؟

✅ <main> محدوده‌ی محتوای اصلیه؛ <section> بخش‌بندی داخل اون محتواست.

اگه <main> رو نذارم چی می‌شه؟

👎 چیزی خراب نمی‌شه ولی سئو، ساختار معنایی، و دسترسی‌پذیری ضربه می‌خوره.

📝 پروژه عملی: با تگ <main> محتوای اصلی سایتت رو بساز!

حالا نوبت توئه که از تگ <main> برای ساختن بخش اصلی سایتت استفاده کنی. کاری که باید انجام بدی اینه:

  • از تگ <main> استفاده کن تا محتوای اصلی صفحه‌ت رو از بقیه بخش‌ها جدا کنی.
  • داخل <main>، دو تا بخش جداگانه با تگ <section> بساز.
  • توی هر سکشن، یه عنوان با <h2> و یه پاراگراف توضیح بنویس (مثلاً درباره “آخرین مقالات” یا “دوره‌های آموزشی”).
  • مطمئن شو که محتوای داخل <main> فقط مربوط به همون صفحه‌ست (نه منو، نه سایدبار!).

این تمرین کمک می‌کنه ساختار معنایی سایتت رو حرفه‌ای‌تر کنی و برای موتورهای جستجو بهینه‌تر بشی!

در ضمن، یادت نره اگه مبتدی هستی، کدات رو تو W3C Validator چک کنی و مطمئن شی درست نوشتی.

🏁 جمع‌بندی

حالا تگ main رو مثل یه حرفه‌ای بلدی! وقتشه دست به کار شی! با main می‌تونی محتوای اصلی صفحه‌ات رو تو وب تمیز، مرتب، و معنادار نشون بدی، کاربرات رو راضی کنی، و گوگل رو عاشق سایتت کنی! این مقاله همه‌چیز رو بهت داد! ساختار، ویژگی‌ها، مثال‌ها، نکات پیشرفته، و ترفندهای سئو رو یاد گرفتی تا بهترین محتوای دنیا رو خلق کنی! پس معطل نکن! یه main بنویس و نشون بده چقدر خفنی! ما تا آخر خط باهاتیم!

💬 ایده‌هات رو فریاد بزن!

نظرت راجب تگ <main> چیه؟ دلت می‌خواد چه چیزی به این آموزش اضافه کنیم؟ سوالی تو ذهنت مونده؟ تو نظرات برامون بگو! تیم حرفه‌ای پشتیبانی با جون و دل جوابت رو می‌ده!

شهرام نجفی

شهرام نجفی

شهرام نجفی — بیش از ۱۵ سال طراحی و توسعهٔ وب به‌صورت فریلنس. قالب اختصاصی آوای وب را از صفر نوشته‌ام. مطالب این سایت را بر پایهٔ مستندات رسمی MDN و WHATWG می‌نویسم و قبل از انتشار در مرورگرهای واقعی تست می‌کنم. نمونه‌کارهایم در shahramnajafi.com است.

نظر شما در این مورد چیه؟