فصل 6 از 6 درس 1 از 4

Semantic Layout و Media

header، nav، main، section، article و footer

بخشی از آموزش جامع HTML

محتوای درس header، nav، main، section، article و footer

header، nav، main، section، article و footer یکی از بخش‌های مهم مسیر یادگیری HTML است. در این درس مفهوم، Syntax و رفتار آن را با نگاه کاربردی بررسی می‌کنیم تا بتوانید در پروژه واقعی تصمیم درست بگیرید.

صفحه مدرن، Responsive و قابل دسترس را با Elementهای Semantic و Media استاندارد می‌سازید. تمرکز این درس بر «header، nav، main، section، article و footer» است و مثال‌ها برای مطالعه و اجرا در محیط توسعه محلی نوشته شده‌اند.

هدف‌های این درس

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

Best Practice

نام‌گذاری شفاف، ساختار کوتاه و قابل تست، مدیریت حالت‌های مرزی و رعایت قراردادهای استاندارد HTML را در اولویت قرار دهید. نمونه کد این صفحه آموزشی و برای اجرا در محیط توسعه محلی آماده شده است.

درس بعدی: Responsive Images و picture

راهنمای فارسی header، nav، main، section، article و footer در آموزش HTML

نمونه کد

<main>
  <article aria-labelledby="lesson-title">
    <h2 id="lesson-title">HTML Semantic</h2>
    <p>محتوای اصلی آموزش</p>
  </article>
</main>

خروجی مورد انتظار

HTML Semantic