Juniorسختی 2 از ۵· در 70٪ مصاحبههای این حوزه پرسیده شده
چرا استفاده از تگهای معنایی (Semantic HTML) بهجای div ساده اهمیت دارد؟
☆نشان کردنپاسخ کوتاه
چون به موتورهای جستوجو و ابزارهای دسترسیپذیری معنای محتوا را میرساند، نه فقط به مرورگر که چطور آن را رندر کند.
پاسخ کامل
تگهایی مثل <div> و <span> هیچ معنایی درباره محتوایشان نمیرسانند — فقط یک ظرف عمومیاند.
در مقابل، تگهای معنایی (<header>, <nav>, <main>, <article>, <footer>) به سه گروه کمک میکنند:
- موتورهای جستوجو: بهتر میفهمند کدام بخش صفحه محتوای اصلی است (سئوی بهتر).
- Screen Readerها: به کاربران کمبینا اجازه میدهند مستقیم به «محتوای اصلی» یا «ناوبری» بپرند.
- توسعهدهندههای دیگر: خواندن کد بدون نیاز به حدسزدن نقش هر
divسادهتر میشود.
مثال کد
<!-- ❌ فقط div -->
<div class="header">...</div>
<div class="nav">...</div>
<!-- ✅ معنایی -->
<header>...</header>
<nav>...</nav>
نکته مهم
منبع کامل موضوع: HTML elements reference — MDN.
اشتباه رایج
❌ استفاده از <div class="button"> بهجای <button> — چنین دکمهای با کیبورد قابل فوکوس/اجرا نیست مگر Attributeهای زیادی دستی اضافه شود.