HTML Layout Elements and Techniques

وقتی می‌خوایم یه صفحه وب طراحی کنیم، خیلی مهمه که بخش‌های مختلف صفحه (مثل هدر، منو، محتوا و فوتر) رو درست بچینیم. به این کار Layout یا «چیدمان صفحه» می‌گن.

📌 عناصر اصلی HTML برای Layout

در HTML5 تگ‌های معنایی (Semantic Elements) معرفی شدن که صفحه رو خواناتر و استانداردتر می‌کنن:

  1. <header> → بخش بالای صفحه (مثل لوگو و منو)

  2. <nav> → بخش ناوبری یا منو

  3. <section> → یک بخش از محتوا

  4. <article> → محتوای مستقل (مثل پست وبلاگ یا خبر)

  5. <aside> → محتوای جانبی (مثل تبلیغات یا سایدبار)

  6. <footer> → بخش پایینی صفحه (مثل کپی‌رایت و لینک‌ها)

  7. <main> → محتوای اصلی صفحه

🔹 نمونه ساختار پایه:

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>Layout Example</title>
  <style>
    header, nav, section, aside, footer {
      padding: 20px;
      margin: 10px;
      border: 1px solid #333;
    }
  </style>
</head>
<body>
  <header>هدر سایت</header>
  <nav>منو ناوبری</nav>
  <main>
    <section>بخش اصلی محتوا</section>
    <aside>سایدبار</aside>
  </main>
  <footer>فوتر سایت</footer>
</body>
</html>

📌 تکنیک‌های Layout در CSS

چند روش پرکاربرد برای چیدمان عناصر:

1. CSS Float (قدیمی)

با استفاده از float المان‌ها رو در کنار هم می‌چینن. (دیگه کمتر استفاده می‌شه)

2. CSS Flexbox (جدیدتر)

خیلی مناسب برای چیدمان یک‌بعدی (افقی یا عمودی).

.container {
  display: flex;
  justify-content: space-between;
}

3. CSS Grid (مدرن‌ترین)

برای چیدمان دوبعدی (سطر و ستون). خیلی انعطاف‌پذیره.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}

4. CSS Positioning

با position (مثل absolute, relative, fixed) می‌تونی دقیقاً جای عناصر رو مشخص کنی.

5. CSS Frameworks

مثل Bootstrap یا TailwindCSS که کار Layout رو خیلی سریع‌تر می‌کنن.

📌 جمع‌بندی

  • برای ساختار صفحه از تگ‌های معنایی HTML5 استفاده کن.

  • برای چیدمان از Flexbox و Grid استفاده کن (بهترین و مدرن‌ترین روش‌ها).

  • Position بیشتر برای موارد خاص استفاده می‌شه، نه کل Layout.