در HTML دو دسته عنصر داریم:
- عناصر معنایی (Semantic Elements): مثل
<header>,<footer>,<article>که معنا و نقش مشخصی دارند. - عناصر غیرمعنایی (Non-semantic Elements): مثل
<div>و<span>که هیچ معنای خاصی ندارند و فقط برای ساختاردهی و استایلدهی استفاده میشوند.
🔹 عنصر <div>
- نوع: بلاکسطحی (block-level).
- کاربرد: تقسیمبندی صفحه به بخشهای مختلف، بدون معنای خاص.
- ویژگی: یک ظرف همهکاره برای گروهبندی محتوا.
📌 مثال:
<article>
<header>...</header>
<div class="article-body">
<p>متن اصلی مقاله اینجاست…</p>
<p>ادامه متن…</p>
</div>
<footer>...</footer>
</article>
اینجا <div> فقط برای هدفگذاری با CSS استفاده شده (مثلاً رنگ پسزمینه یا فاصله).
🔹 عنصر <span>
- نوع: درونخطی (inline-level).
- کاربرد: تغییر ظاهر بخشی از متن داخل یک خط.
- ویژگی: برای استایلدهی به کلمات یا عبارات خاص، بدون افزودن معنای محتوایی.
📌 مثال:
<p>
خوش آمدید به شرکت <span class="brand-color">Ipsum</span>، پیشرو در فناوری.
</p>
اینجا <span> فقط برای استایلدهی به نام برند استفاده شده، نه برای تأکید معنایی.
⚖️ تفاوت با عناصر معنایی
- Semantic Elements: معنا دارند و مرورگر/موتور جستجو میفهمد نقششان چیست (مثلاً
<header>= سربرگ). - Non-semantic Elements: هیچ معنای خاصی ندارند؛ فقط ظرفی برای استایلدهی و چیدمان هستند.
🎯 جمعبندی
<div>= بلاکسطحی غیرمعنایی → برای بخشبندی و کانتینرهای بزرگ.<span>= درونخطی غیرمعنایی → برای استایلدهی به بخشهای کوچک متن.- هر دو برای کار با CSS حیاتی هستند.
- وقتی عنصر معنایی مناسب وجود ندارد، از این دو استفاده کنید.