تفاوت تگ‌های <div> و <span> در HTML  چیست؟

گردآوری و تالیف : آرزو اقبالي
تاریخ انتشار : 18 شهریور 1398
دسته بندی ها : html

تگ‌های <div> و<span>، دو تگ پرکا‌ربرد و بدون معنا در HTML هستند.

برای ساختن یک سایت خوب، باید از عناصر صحیح در هر بخش استفاده کنیم.

در HTML5 قابلیت‌های زیادی در اختیار برنامه‌نویس قرار داده شده است.

تفاوت در چیست؟

تگ <div> مبتنی بر بلوک است که فضا را به صورت افقی پر می‌کند و بیشتر برای گروه‌بندی عناصر دیگراستفاده می‌شود.

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

البته ما می‌توانیم با استفاده از المنت‌های موجود در تگ‌ها، نحوه نمایش را تغییر دهیم؛ ولی اکثریت از حالت پیش‌فرض استفاده می‌کنند.

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

اگر می‌خواهید پروژه مورد نظر را در فضای شبکه‌ای استفاده کنید، هرچه بیشتر از تگ <div> استفاده کنید راحت‌تر می‌توانید استایل‌های خود را اعمال کنید.

<div class="container">
    <div class="row">
        <main class="col-12 col-md-8">
            Your main content...
        </main>
        <aside class="col-12 col-md-4">
            Your sidebar content...
        </aside>
    </div>
</div>

در حالی که  <div> بیشتر برای ساختار طرح‌بندی است، <span> برای عناصر مرتبط با متن ویا عناصر کوچکتر است. مانند وقتی می‌خواهید برخی از عناصر درون خطی جاوا اسکریپت را استفاده کنید.

<p>This is a <strong>highlighted text</strong> which has meaning.</p>
<p>This is a <span class="bold">highlighted text</span> which hasn't meaning.</p>

استفاده از تگ <span> برای قالب‌های متنی مانند ضخیم کردن، کج کردن و ... نادرست است و بهتر است از تگ‌های <strong> و<em> استفاده شود.

منبع

مقالات پیشنهادی

  • ۱۰ کاراکتر طراحی شده با HTML و CSS

    من همیشه از اینکه می‌بینم چکارهایی با سی‌اس‌اس می‌ توان انجام داد، شگفت زده می‌شوم. توسعه دهندگان وب می‌دانند که با سی‌اس‌اس می‌توان لایه‌های خارق الع...

    ارسطو عباسی
  • تفاوت import و require در Node.js

    از اونجایی که Node.js از ماژول بندی commonJS استفاده می کنه, من به فرآیند کاری Node با استفاده از ماژول های commonJS اشاره می کنم و برای ماژول های ECM...

    امیررضا سیستانه ای
  • بررسی تفاوت‌های میان SaaS، Paas و IaaS

    پیش‌بینی می‌شود تا سال ۲۰۲۰ حدود ۶۷ درصد از تمام شرکت‌ها به  مدل‌های سرویس‌دهی مانند Paas، Saas و IaaS مهاجرت بکنند. اما این موارد چیستند؟ کدام‌شان بر...

    ارسطو عباسی