Div و Span + Block/Inline

تگ div

<div> یک ظرف عمومی (block-level) است که برای گروه‌بندی عناصر استفاده می‌شود. خودش هیچ معنایی خاصی ندارد و صرفاً برای ساختاردهی و استایل‌دهی کاربرد دارد.

ویژگی‌های div

• بلوکی (Block): کل عرض موجود را می‌گیرد
• خط جدید: قبل و بعد از آن خط جدید ایجاد می‌شود
• تو در تو: می‌تواند شامل div‌ها و عناصر دیگر باشد
• بدون معنای خاص: برای مرورگر و موتورهای جستجو هیچ معنایی ندارد

تگ span

<span> یک ظرف inline است برای استایل‌دهی به بخشی از متن یا گروه‌بندی عناصر inline.

ویژگی‌های span

• اینلاین (Inline): فقط به اندازه محتوا جا می‌گیرد
• بدون خط جدید: در همان خط ادامه می‌یابد
• استایل‌دهی جزئی: برای تغییر رنگ، فونت یا استایل بخشی از متن
• بدون معنای خاص: صرفاً برای استایل‌دهی استفاده می‌شود

انواع عناصر HTML

عناصر HTML به سه دسته اصلی تقسیم می‌شوند:

۱. عناصر Block

عناصر بلوکی کل عرض را می‌گیرند و قبل و بعد از آنها خط جدید ایجاد می‌شود:

• div — ظرف عمومی
• p — پاراگراف
• h1 تا h6 — عنوان‌ها
• ul, ol, li — لیست‌ها
• table — جدول
• form — فرم
• header, footer, section — عناصر معنایی

۲. عناصر Inline

عناصر اینلاین فقط به اندازه محتوا جا می‌گیرند و خط جدید ایجاد نمی‌کنند:

• span — ظرف inline
• a — لینک
• strong, b — متن ضخیم
• em, i — متن ایتالیک
• img — تصویر
• code — کد
• input, button — عناصر فرم

۳. عناصر Inline-Block

ترکیبی از هر دو: مثل inline در یک خط قرار می‌گیرند اما می‌توانند width و height داشته باشند:

• img — تصویر
• button — دکمه
• input — ورودی فرم
• textarea — ناحیه متن
• select — لیست انتخاب

چه زمانی از div استفاده کنیم؟

• وقتی هیچ تگ معنایی مناسب وجود ندارد: اگر تگ معنایی مثل article, section, nav مناسب نیست
• برای چیدمان (Layout): ساختار کلی صفحه مثل sidebar, container
• برای استایل‌دهی گروهی: وقتی می‌خواهیم چند عنصر را با هم استایل دهیم
• برای وقتی نیاز به یک ظرف برای دستکاری با JS داریم

چه زمانی از span استفاده کنیم؟

• استایل‌دهی بخشی از متن: تغییر رنگ، فونت یا سایز بخشی از پاراگراف
• برای انتخاب بخش خاصی از متن برای تغییر
• برای آیکون‌ها: قرار دادن آیکون در کنار متن
• برای هایلایت کردن: برجسته کردن بخشی از متن

بهترین شیوه‌ها

• اول تگ‌های معنایی: همیشه از تگ‌های معنایی HTML5 استفاده کنید (header, nav, main, article, section, aside, footer)
• div آخرین گزینه: div فقط وقتی استفاده کنید که تگ معنایی مناسب وجود ندارد
• نام‌گذاری کلاس‌ها: از نام‌های معنادار برای کلاس‌های div استفاده کنید
• جلوگیری از div soup: از تودرتوی بیش از حد div خودداری کنید
• استفاده از span کمینه: فقط وقتی واقعاً نیاز دارید

مقایسه div و تگ‌های معنایی

تگ معنایی	معادل div	تفاوت
<header>	<div class="header">	header معنای "سربرگ" دارد
<nav>	<div class="nav">	nav معنای "ناوبری" دارد
<article>	<div class="article">	article معنای "محتوای مستقل" دارد
<section>	<div class="section">	section معنای "بخش" دارد

نکات مهم

• div و span هیچ معنایی خاصی ندارند و فقط برای ساختار و استایل استفاده می‌شوند
• عناصر block نمی‌توانند داخل عناصر inline باشند (مثلاً div داخل span مجاز نیست)
• برای دسترس‌پذیری (Accessibility)، تگ‌های معنایی بهتر از div هستند
• برای سئو (SEO)، تگ‌های معنایی به موتورهای جستجو کمک می‌کنند محتوا را بهتر درک کنند
• از CSS می‌توان display یک عنصر را تغییر داد (block به inline و برعکس)