عنصرهای Semantic (معنایی) اون دسته از تگ‌های HTML هستن که معنی و نقش محتوای داخلشون رو مشخص می‌کنن.
این کار باعث می‌شه:

• مرورگرها بهتر محتوا رو درک کنن.

• موتورهای جستجو (SEO) بهتر سایت رو ایندکس کنن.

• توسعه‌دهنده‌ها و خوانندگان کد راحت‌تر متوجه ساختار بشن.

🔑 تفاوت Semantic و Non-Semantic

• Semantic: معنی مشخص داره (مثلاً <header>, <footer>, <article>).

• Non-Semantic: فقط برای ساختار استفاده می‌شه، معنی خاصی نداره (مثل <div> و <span>).

📚 لیست مهم‌ترین تگ‌های Semantic در HTML5

1. <header>

نمایانگر بخش سربرگ یک صفحه یا مقاله.

<header>
  <h1>وب‌سایت من</h1>
  <nav>
    <a href="#">خانه</a>
    <a href="#">درباره ما</a>
  </nav>
</header>

2. <nav>

برای بخش منو و ناوبری.

<nav>
  <a href="#">خانه</a> |
  <a href="#">خدمات</a> |
  <a href="#">تماس با ما</a>
</nav>

3. <section>

یک بخش مجزا از محتوا.

<section>
  <h2>مقالات جدید</h2>
  <p>اینجا آخرین مقالات وبلاگ قرار می‌گیرد.</p>
</section>

4. <article>

برای محتوای مستقل (مثل مقاله، پست وبلاگ، نظر کاربر).

<article>
  <h2>یادگیری HTML</h2>
  <p>HTML زبان نشانه‌گذاری برای ساخت صفحات وب است.</p>
</article>

5. <aside>

برای محتوای جانبی (مثلاً سایدبار، تبلیغات).

<aside>
  <h3>تبلیغات</h3>
  <p>اینجا بنر تبلیغاتی نمایش داده می‌شود.</p>
</aside>

6. <footer>

پاورقی صفحه یا مقاله.

<footer>
  <p>کپی‌رایت © 2025 - تمام حقوق محفوظ است.</p>
</footer>

7. <main>

نمایانگر محتوای اصلی صفحه.

<main>
  <h1>به وب‌سایت ما خوش آمدید</h1>
  <p>اینجا بخش اصلی محتوای سایت است.</p>
</main>

📊 تفاوت درک مرورگر و موتور جستجو

✅ با Semantic:

<article>
  <h2>خبر ورزشی</h2>
  <p>تیم ملی ایران پیروز شد!</p>
</article>

❌ با Non-Semantic:

<div class="article">
  <h2>خبر ورزشی</h2>
  <p>تیم ملی ایران پیروز شد!</p>
</div>

در حالت اول موتور جستجو می‌فهمه این یک مقاله‌ست، ولی در حالت دوم فقط یک div هست!