ظرف‌های عمومی: div و span

گاهی نیاز دارید چند عنصر را با هم گروه‌بندی کنید تا بتوانید روی کل آن گروه، استایل یا رفتار خاصی اعمال کنید؛ بدون این‌که آن گروه معنای خاصی مثل «تیتر» یا «پاراگراف» داشته باشد. برای همین منظور دو عنصر عمومی در HTML وجود دارد.

div — ظرف بلاک

<div> یک عنصر بلاک عمومی است که هیچ معنای خاصی ندارد و صرفاً برای گروه‌بندی بخش‌های بزرگ‌تر صفحه، مثل هدر، منو یا فوتر به‌کار می‌رود.

<div style="background-color:#f2f2f2; padding:20px;">
    <h2>عنوان بخش</h2>
    <p>محتوای این بخش داخل یک div قرار دارد.</p>
</div>

span — ظرف اینلاین

<span> نسخه‌ی اینلاین همین ایده است؛ برای دور گرفتن بخش کوچکی از یک متن، بدون شکستن خط، استفاده می‌شود؛ مثلاً برای رنگی کردن یک کلمه‌ی خاص در یک جمله.

<p>قیمت این محصول <span style="color:red; font-weight:bold;">۹۹ هزار تومان</span> است.</p>

در پروژه‌های واقعی، این دو عنصر معمولاً همراه با ویژگی‌های class یا id استفاده می‌شوند تا بتوان آن‌ها را به‌طور دقیق در CSS یا جاوااسکریپت هدف قرار داد؛ موضوعی که در دو فصل بعدی بررسی می‌کنیم.