بلوکی/خطی، div، کلاس و id

بلوکی در مقابل خطی

• block (مثل div, p, h1): کل عرض را می‌گیرد و خط جدید می‌سازد.
• inline (مثل span, a, strong): فقط به اندازهٔ محتوا، در یک خط می‌ماند.

div و span

دو جعبهٔ بی‌معنا برای گروه‌بندی جهت استایل:

<div class="card"> ... </div>   <!-- بلوکی -->
<span class="tag">برچسب</span>  <!-- خطی -->

قبل از div، بپرس آیا تگ معنادارتری هست (header, nav, article)؟

کلاس و id

<div class="card">  <!-- قابل تکرار روی چند عنصر -->
<div id="main">     <!-- باید یکتا باشد -->

• class پرکاربردترین؛ روی چند عنصر.
• id یکتا؛ برای لینک لنگر (#main) یا دسترسی با JS.

توصیه: بیشتر از class استفاده کن.