ساختار معنایی در HTML؛ header، nav، main و footer | درس 15

درس 15 از دوره 60 قسمتی آموزش HTML و CSS ارومیا دیزاین

تا اینجا متن، تصویر، لینک و فرم را ساخته ایم. اکنون باید این اجزا را در یک صفحه منظم کنار هم قرار دهیم. ساختار معنایی در HTML به هر بخش نقش مشخص می دهد: مقدمه صفحه، منوی راهبری، محتوای اصلی و اطلاعات پایانی. در این درس با تگ های header، nav، main و footer آشنا می شویم و یک صفحه شرکتی قابل اجرا می سازیم.

اگر تازه وارد دوره شده اید، فهرست آموزش HTML و CSS را ببینید. پیش نیاز این درس، شناخت ساختار سند و تفاوت head و body در درس 4 است. در درس 14 درباره اعتبارسنجی فرم نیز یاد گرفتیم که انتخاب ویژگی مناسب رفتار هر کنترل را روشن می کند؛ اینجا همین نگاه را در مقیاس کل صفحه به کار می بریم.

HTML معنایی چیست؟

عنصر معنایی درباره نقش محتوای خود اطلاعات می دهد. مثلا nav می گوید این بخش برای راهبری است و main محل محتوای اصلی صفحه را مشخص می کند. در مقابل، div یک ظرف عمومی بدون معنای ویژه است. داشتن ساختار مناسب، خواندن کد و نگهداری پروژه را آسان می کند و به فناوری های کمکی اجازه می دهد بخش های مهم صفحه را بهتر تشخیص دهند.

تگ معنایی به تنهایی ظاهر حرفه ای، ستون بندی یا منوی افقی نمی سازد. چیدمان و رنگ را بعدا با CSS تعیین می کنیم. همچنین استفاده از این تگ ها به تنهایی تضمین رتبه گوگل نیست. هدف این درس ساخت سندی روشن و قابل فهم است. این موضوع ادامه همان انتخاب معنای درست به جای ظاهر صرف در درس 7 درباره قالب بندی معنایی متن است.

header با head چه تفاوتی دارد؟

head اطلاعات سند مانند عنوان زبانه، رمزگذاری متن و اتصال فایل CSS را نگه می دارد. اما header داخل بخش قابل نمایش صفحه قرار می گیرد و معمولا محتوای معرفی، نام برند، عنوان یا ابزارهای آغازین را در بر می گیرد. یک header سراسری می تواند منوی اصلی سایت را هم داشته باشد.

<header>
  <p>ارومیا دیزاین</p>
  <p>طراحی و توسعه وب</p>
</header>

وجود چند header در یک سند لزوما اشتباه نیست؛ یک مقاله مستقل می تواند header مربوط به خودش را داشته باشد. نقش هر header را زمینه آن تعیین می کند. برای مثال header یک مقاله با سربرگ سراسری سایت یکی نیست. از این عنصر صرفا برای هر باکسی که در بالای صفحه قرار گرفته استفاده نکنید.

nav؛ بخش راهبری اصلی

nav برای مجموعه مهمی از لینک های راهبری است، مانند منوی اصلی یا فهرست مطالب. هر لینک داخل متن لازم نیست در nav قرار بگیرد. برای منوی چندگزینه ای می توان از یک فهرست استفاده کرد تا ارتباط گزینه ها روشن باشد. اگر چند منوی راهبری در صفحه دارید، نام های مشخص مانند «منوی اصلی» و «راهبری پایین صفحه» به تشخیص آنها کمک می کنند.

<nav aria-label="منوی اصلی">
  <ul>
    <li><a href="#services">خدمات</a></li>
    <li><a href="#about">درباره ما</a></li>
    <li><a href="#contact">تماس</a></li>
  </ul>
</nav>

در این نمونه، مقصد لینک ها شناسه بخش های همین صفحه است. مقدار پس از # باید با id بخش مقصد برابر باشد. جزئیات را در درس 8 درباره لینک ها و مسیرها یاد گرفتیم. اگر ساختار ul و li را فراموش کرده اید، درس 10 درباره فهرست ها را مرور کنید.

main؛ محتوای اصلی همان صفحه

main محتوای غالب و ویژه صفحه را در بر می گیرد؛ مثلا توضیح خدمات در صفحه خدمات یا متن مقاله در صفحه مقاله. منوی سراسری و اطلاعات ثابت پایین سایت معمولا بیرون main قرار می گیرند. در نمونه های این دوره یک main قابل نمایش برای هر سند می سازیم. main را داخل nav، header یا footer قرار ندهید.

عنوان اصلی صفحه را با h1 و عنوان بخش های زیر آن را با h2 بنویسید. برای انتخاب اندازه ظاهری، ترتیب عنوان ها را عوض نکنید. در درس 6 درباره عنوان ها و پاراگراف ها همین سلسله مراتب را بررسی کردیم.

section، article، aside و div را کجا به کار ببریم؟

section یک بخش موضوعی از سند است که معمولا عنوان دارد؛ مثلا خدمات، درباره شرکت یا پرسش های رایج. article برای محتوایی مناسب است که به صورت مستقل هم معنا داشته باشد، مانند مقاله وبلاگ یا یک نظر کاربر. چند پاراگراف مرتبط در معرفی خدمات، الزاما مقاله مستقل نیستند؛ برای آنها section می تواند انتخاب مناسبی باشد.

aside اطلاعاتی با ارتباط جانبی با محتوای اصلی را مشخص می کند؛ برای مثال منابع تکمیلی یک مقاله. اسم این تگ به معنی اجبار برای قرار گرفتن در ستون کناری نیست. div هم هنوز کاربرد دارد: وقتی فقط به ظرفی برای چیدمان نیاز داریم و معنای موضوعی ویژه ای وجود ندارد، استفاده از آن طبیعی است. هر ظرف CSS را با section جایگزین نکنید.

<article>
  <header>
    <h2>چگونه اولین صفحه وب را بسازیم؟</h2>
    <p>راهنمای شروع برای هنرجویان</p>
  </header>
  <p>ساخت صفحه را با یک سند HTML ساده آغاز می کنیم.</p>
  <footer>
    <p>نویسنده: تیم آموزش ارومیا دیزاین</p>
  </footer>
</article>

footer؛ اطلاعات پایانی صفحه یا بخش

footer اطلاعات پایانی مربوط به صفحه یا بخش والد خود را نگه می دارد؛ مانند نام نویسنده، حقوق محتوا یا لینک تماس. یک صفحه می تواند footer سراسری داشته باشد و مقاله درون آن هم footer خودش را. این عنصر به تنهایی در پایین پنجره ثابت نمی ماند؛ موقعیت ظاهری آن وابسته به جریان سند و CSS است.

پروژه عملی: اسکلت یک صفحه شرکتی فارسی

کد زیر را در فایل semantic-page.html ذخیره کنید و در مرورگر باز کنید. سپس روی لینک های منو کلیک کنید تا به بخش های مقصد بروید. اگر در ذخیره فایل یا پوشه پروژه تردید دارید، درس 3 درباره اولین پروژه وب را ببینید. نمونه هنوز CSS ندارد؛ بنابراین ظاهر آن ساده است، ولی ساختار محتوایی روشن دارد.

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>صفحه شرکتی تمرینی</title>
</head>
<body>
  <a href="#main-content">رفتن به محتوای اصلی</a>
  <header>
    <p>شرکت نمونه</p>
    <nav aria-label="منوی اصلی">
      <ul>
        <li><a href="#services">خدمات</a></li>
        <li><a href="#about">درباره ما</a></li>
        <li><a href="#contact">تماس</a></li>
      </ul>
    </nav>
  </header>

  <main id="main-content">
    <h1>طراحی و توسعه سایت برای کسب و کارها</h1>
    <section id="services">
      <h2>خدمات ما</h2>
      <p>طراحی سایت شرکتی و فروشگاهی ارائه می کنیم.</p>
    </section>
    <section id="about">
      <h2>درباره شرکت</h2>
      <p>این صفحه یک نمونه برای تمرین HTML معنایی است.</p>
    </section>
    <section id="contact">
      <h2>راه ارتباطی</h2>
      <p>برای شروع پروژه، نیازهای خود را آماده کنید.</p>
    </section>
  </main>

  <footer>
    <p>تمام حقوق این صفحه تمرینی محفوظ است.</p>
  </footer>
</body>
</html>

لینک آغاز صفحه یک مسیر سریع به محتوای اصلی فراهم می کند. این لینک را در تمرین قابل مشاهده گذاشته ایم تا عملکرد آن روشن باشد. همچنین شناسه های services، about و contact یکتا هستند و با مقصد منو مطابقت دارند. همین اصول در یک پروژه واقعی طراحی سایت در ارومیه هم به نظم کد کمک می کنند.

اشتباه های رایج در ساختار معنایی HTML

• اشتباه گرفتن head و header: اولی اطلاعات سند است، دومی محتوای معرفی قابل نمایش.
• ساخت چند main قابل نمایش: محتوای اصلی صفحه را در یک main مشخص جمع کنید.
• استفاده از section فقط برای رنگ و فاصله: برای ظرف بدون موضوع مستقل، div مناسب است.
• قرار دادن همه لینک ها در nav: این عنصر را برای مجموعه های راهبری مهم به کار ببرید.
• انتظار چیدمان آماده از تگ ها: تگ معنایی، ستون بندی یا طراحی واکنش گرا ایجاد نمی کند.
• نامرتب نوشتن عنوان ها: h1 و h2 باید رابطه محتوایی بخش ها را نشان دهند.

تمرین درس 15

به صفحه نمونه یک بخش «نمونه کارها» اضافه کنید، برای آن عنوان h2 و شناسه portfolio بگذارید. سپس در منو لینکی به همان شناسه بسازید. داخل آن بخش یک article برای معرفی یک پروژه مستقل قرار دهید و عنوان آن را با h3 بنویسید.

<section id="portfolio">
  <h2>نمونه کارها</h2>
  <article>
    <h3>سایت فروشگاه نمونه</h3>
    <p>این پروژه برای معرفی محصولات فروشگاه ساخته شده است.</p>
  </article>
</section>

درس قبلی: اعتبارسنجی فرم در HTML | درس 14