چیدمان صفحه

چیدمان صفحه چیست؟

چیدمان صفحه (Page Layout) نحوه سازماندهی و قرارگیری عناصر در صفحه است. HTML5 تگ‌های معنایی جدیدی معرفی کرد که چیدمان را ساده‌تر می‌کنند.

تگ‌های چیدمان HTML5

HTML5 تگ‌های معنایی خاصی برای چیدمان صفحه معرفی کرد:

• <header> — سربرگ صفحه یا بخش
• <nav> — منوی ناوبری
• <main> — محتوای اصلی صفحه
• <section> — بخش مستقل
• <article> — محتوای مستقل (مقاله، پست)
• <aside> — محتوای جانبی (سایدبار)
• <footer> — پایین صفحه
• <div> — ظرف عمومی (بدون معنای خاص)

ساختار استاندارد صفحه

یک صفحه وب استاندارد معمولاً شامل این بخش‌هاست:

<body>
  <header>
    <!-- لوگو، منو، جستجو -->
  </header>
  
  <nav>
    <!-- منوی اصلی -->
  </nav>
  
  <main>
    <article>
      <!-- محتوای اصلی -->
    </article>
    
    <aside>
      <!-- سایدبار -->
    </aside>
  </main>
  
  <footer>
    <!-- فوتر -->
  </footer>
</body>

چیدمان‌های رایج

چیدمان کلاسیک

هدر، منو، محتوا، سایدبار، فوتر

چیدمان دو ستونه

محتوای اصلی و سایدبار در کنار هم

چیدمان سه ستونه

سایدبار چپ، محتوا، سایدبار راست

چیدمان Full Width

محتوا در تمام عرض صفحه

بهترین شیوه‌ها

• استفاده از تگ‌های معنایی: همیشه از تگ‌های HTML5 استفاده کنید
• یک main در هر صفحه: فقط یک تگ <main> در هر صفحه
• سلسله‌مراتب درست: تگ‌ها را به صورت تو در تو استفاده کنید
• دسترس‌پذیری: از ARIA landmarks استفاده کنید
• سئو: تگ‌های معنایی برای سئو مهم هستند

تفاوت با div

تگ‌های معنایی معنای خاصی دارند اما <div> هیچ معنایی ندارد. همیشه از تگ‌های معنایی استفاده کنید و فقط وقتی تگ مناسبی وجود نداشت از div استفاده کنید.

نکات مهم

• <main> نباید داخل <article>, <aside>, <header>, <footer> باشد
• <nav> برای لینک‌های ناوبری اصلی استفاده می‌شود
• <article> برای محتوای مستقل و قابل توزیع است
• <section> برای گروه‌بندی محتوای مرتبط است
• <aside> برای محتوای جانبی و کم‌اهمیت‌تر است