تگ‌هایheader ،nav و :footer ساختار اصلی صفحه معنایی

صفحه‌ت مثل خونه بدون اتاقه؟🏠 header nav footer همه چی رو منظم می‌کنن! تگ‌های معنایی HTML مثل نقشه راه صفحه عمل می‌کنن!🗺️ header بالای صفحه (لوگو+منو)،nav فقط navigation و footer پایین صفحه (کپی‌رایت+لینک‌ها). آموزش تگ‌های معنایی HTML با کد ساده:

<header>
  <h1>وبلاگ من🏢</h1>
  <p>بهترین آموزش‌های وب</p>
</header>

<nav>
  <a href="/">خانه🏠</a>
  <a href="/blog">وبلاگ📝</a>
  <a href="/contact">تماس☎️</a>
</nav>

<main>
  <!-- محتوای اصلی -->
</main>

<footer>
  <p>&copy; 2026 همه حقوق محفوظه</p>
</footer>

تگ header nav footer در HTML اینطوری کار می‌کنن :header فقط بالای صفحه (نه هر بخش!)، nav فقط لینک‌های ناوبری،footer انتهای صفحه screen reader .ها عاشقشن چون می‌فهمن هر بخش چیه!👀 ساختار معنایی صفحه وب با HTML گوگل رو هم خوشحال می‌کنه و SEO رو بالا می‌بره!📈✨

تگ‌های article، section و aside برای محتوای سازمان‌یافته

محتوای سایتت قاطی‌پاتیه؟ article section aside مثل کمد مرتب‌کننده‌ن! article هر محتوای مستقل (پست وبلاگ،محصول)، section گروه محتوای مرتبط و aside محتوای جانبی (سایدبار،تبلیغ).📦 تگ article section aside در HTML با مثال وبلاگ:

<article>
  <header>
    <h2>عنوان پست وبلاگ📝</h2>
    <p>نویسنده: علی - ۳۱ ژانویه ۲۰۲۶</p>
  </header>
  
  <section>
    <h3>مقدمه</h3>
    <p>تو این پست در مورد تگ‌های معنایی...</p>
  </section>
  
  <section>
    <h3>نتیجه‌گیری</h3>
    <p>خلاصه مطالب...</p>
  </section>
</article>

<aside>
  <h4>پست‌های مرتبط🔗</h4>
  <ul>
    <li>آموزش CSS Grid</li>
    <li>بهینه‌سازی تصاویر</li>
  </ul>
</aside>

محتوای سازمان‌یافته با تگ‌های معنایی screen reader رو راهنمایی می‌کنه: برو article دوم،section سوم و گوگل بهتر index می‌کنه!✨ تفاوت article و section در HTMLدقیقاً همینه :article مستقل،section زیرمجموعه.

main و :figure تگ‌های کمتر شناخته‌شده ولی قدرتمند HTML

main و figure رو نمی‌شناسی؟😲 ۹۰% دولوپرها از دستشون دادن! تگ main محتوای اصلی صفحه‌ست نه sidebar، نه header! و figure+figcaption تصاویر رو با توضیح معنایی می‌پیچن.🖼️ تگ main figure در HTML کامل:

<main>
  <article>
    <h1>بهترین لپ‌تاپ ۲۰۲۶💻</h1>
    
    <figure>
      <img src="laptop.jpg" alt="لپ‌تاپ MacBook Pro">
      <figcaption>MacBook Pro M3 - بهترین انتخاب ۲۰۲۶</figcaption>
    </figure>
    
    <p>مشخصات کامل و مقایسه...</p>
  </article>
</main>

تگ‌های کمتر شناخته‌شده HTML جادو می‌کنن main به screen reader می‌گه "اینجا محتوای اصلیه"، figure+figcaption تصاویر رو SEO-friendly می‌کنه چون گوگل caption رو می‌خونه!🔍 header nav footer article section aside main figure این ۹ تگ صفحه‌ت رو از div soup به شاهکار معنایی تبدیل می‌کنن screen reader !✨ها عاشقشن، گوگل بهتر index می‌کنه و خودت کد تمیز می‌نویسی؛ کدها رو کپی کن،دیگه div برای layout استفاده نکن و "تگ‌های معنایی HTML رو master شو تا دولوپر حرفه‌ای بشی.📈