درس هفتم: تگ‌های معنایی (Semantic HTML) و جادوی سئو

تا به حال فکر کرده‌اید که گوگل چطور می‌فهمد کدام بخش سایت شما محتوای اصلی است و کدام بخش منو یا فوتر؟ پاسخ در تگ‌های معنایی نهفته است. در این درس یاد می‌گیریم چطور به کدهایمان “معنا” ببخشیم.

🏗️ ۱. تگ‌های معنایی در مقابل غیرمعنایی

تگ‌هایی مثل <div> و <span> هیچ معنای خاصی ندارند و فقط کانتینر هستند. اما تگ‌های معنایی دقیقاً محتوا را توصیف می‌کنند.

✅ <header>: برای بخش سربرگ سایت (لوگو و منو).
✅ <nav>: مخصوص منوهای ناوبری.
✅ <main>: محتوای اصلی و منحصربه‌فرد صفحه.
✅ <section>: برای جدا کردن بخش‌های مختلف یک محتوا.
✅ <article>: برای یک محتوای مستقل مثل پست بلاگ.
✅ <aside>: برای محتوای جانبی (سایدبار).
✅ <footer>: برای بخش پابرگ سایت.

💻 نمونه ساختار یک صفحه استاندارد

ببینید چطور تگ‌های معنایی جایگزین div‌های بی‌معنی می‌شوند:

<header>
    <h1>لوگوی سایت CSLearn</h1>
    <nav>خانه | درباره ما</nav>
</header>

<main>
    <article>
        <h2>عنوان مقاله آموزشی</h2>
        <p>متن مقاله در اینجا قرار می‌گیرد...</p>
    </article>
</main>

<footer>
    <p>تمامی حقوق محفوظ است.</p>
</footer>

🚀 ۲. چرا باید از این تگ‌ها استفاده کنیم؟

سئو (SEO): گوگل عاشق کدهای تمیز و معنادار است.
دسترسی‌پذیری: کمک به افراد نابینا که از صفحه‌خوان‌ها استفاده می‌کنند.
خوانایی کد: برنامه‌نویس‌های دیگر سریع‌تر ساختار سایت شما را درک می‌کنند.

🚩 تمرین درس هفتم:

سعی کنید کدهای درس‌های قبلی خود را بررسی کنید و آن‌ها را در تگ‌های <main> و <section> بسته‌بندی کنید تا ساختار استانداردتری پیدا کنند.

درس قبلی

بازگشت به دوره

درس بعدی