راهنمای جامع کاربردها و تفاوت های Div و Span در HTML

تگ در html به چه معنا است؟

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

تگ html باعث می شود تا مرورگرها بتوانند عنصر هر بخش از یک صفحه از یک سایت را تشخیص دهند و بدانند که چگونه باید آن را برای کاربر به نمایش در آورند. به عنوان مثال تگی که نشان دهنده تیتر صفحه، منوها، لیست ها، نمایش جداول و غیره است. تگ ها دارای انواع مختلف تگ باز Opening Tag و تگ بسته Closing Tag هستند. برخی از عناصر یا المان های یک سایت برای نمایش داده شدن در صفحات وب سایت نیاز به هر دو نوع تگ دارند و بعضی دیگر می توانند به تنهایی با یکی از تگ ها نمایش داده شوند. در ادامه شما را با انواع تگ های دایو و اسپن و کاربردهایشان آشنا خواهیم کرد. 

تگ Div در HTML چیست؟

تگ Div مخفف کلمه Division است که به معنای بخش یا قسمت گرفته شده است و در زبان فارسی به آن تگ دایو یا دیو می گویند. این تگ جز پرکاربردترین تگ هایی که در طراحی صفحات وب سایت مورد استفاده قرار می گیرد و با استفاده از آن می توان صفحات یک سایت را به بخش های مختلف تقسیم کرد. شیوه استفاده از این تگ به شکل <<div> </div است و بین دو تگ باز و بسته می توان گروهی از تگ های دیگر را که هرکدام ممکن است تصویر، ویدئو، فایل صوتی و غیره باشد، قرار داد.

 قبل از این که تگ دایو به پروتکل html اضافه شود، طراحان وب سایت برای قسمت های مختلف سایت مانند هدر، فوتر، ساید بار و غیره باید از جدول تگ استفاده می کردند. اما پس از به وجود آمدن تگ دایو با روشی ساده تر این کار صورت گرفت. در واقع با وجود تگ دایو می توان به روشی تخصصی تر کار بخش بندی سایت را انجام داد. نکته مهمی که در استفاده از تگ دایو وجود دارد این است که حتما باید تگ های مرتبط با بخش بندی مانند فوتر، هدر، سکشن، دایو و غیره استفاده کرد در غیر این صورت استفاده بیش از حد از این تگ باعث ایجاد تاثیر منفی روی سئو سایت خواهد شد.

تگ span در html چیست؟

تگ span زمانی مورد استفاده قرار می گیرد که بخواهید در وب سایت یک متن کوتاه را با استایل خاصی نشان دهید. به عنوان مثال می خواهید در زیر یک متن تاریخ انتشار آن را بنویسید و یا در یک متن طولانی عبارتی را با یک استایل و فونت خاص نشان دهید، می توانید از این تگ استفاده کنید. بنابراین تگ span یک محفظه درون خطی است که برای علامت گذاری بخشی از یک متن یا بخشی از یک سند مورد استفاده قرار می گیرد. این تگ در بیشتر مواقع با css فرم دهی می شود و می توان آن را از سایر عناصر خط متمایز کرد. تگ span از نظر کاربرد مشابه تگ دایو است؛ با این تفاوت که تگ دایو می تواند کل بلوک خود را تغییر دهد اما تگ اسپن فقط یک عنصر درون خطی را دچار تغییر می کند.

کاربردهای تگ span و div

تگ دایو و اسپن هر کدام کاربردهای جداگانه ای دارند که در این قسمت شما را با آن آشنا خواهیم کرد.

کاربرد div

همان طور که پیش تر هم به این مضوع اشاره کردیم با تگ دایو می توان یک محتوای چند خطی یا مجموعه از محتواها را درون یک کانتینر یا همان دایو قرار داد و با استفاده از زبان css، ویژگی یا استایل خاص و متمایزی به آن عنصر یا المان داد. به عنوان مثال شما می خواهید در سایت خود یک محتوای دو خطی را به رنگ طوسی و سه خط دیگر را با رنگ بنفش نشان دهید. برای این کار می توانید دو خط اول را در یک دیو قرار دهید و به آن دیو، رنگ پس زمینه طوسی دستور دهید. سه خط بعدی را هم در یک دیو جدا قرار داده و با استفاده از زبان css به آن دستور رنگ پس زمینه بنفش را می دهید.

در حالت پیش فرض متنی که براساس تگ دایو روی سایت به نمایش در می آید، اندازه کل صفحه سایت است و از بالا و پایین هم یک خط با المان های دیگر فاصله دارد. البته اگر برنامه نویس بخواهد می تواند این استایل را با زبان css تغییر دهد و دیو را از چپ یا راست، کوچک تر یا بزرگ تر کند.

کاربرد span

زمانی که برنامه نویس بخواهد یک محتوا را در سایت به گونه ای قرار دهد که دنبال هم قرار بگیرند، به این معنا که فاصله ای بین آن ها نباشد و فضای بیشتری را اشغال نکند، از تگ اسپن استفاده می کند. اسپن دقیقا نقطه مقابل تگ دایو است و هیچ گونه عرض و فاصله پیش فرضی ندارد.

تفاوت اصلی تگ div و span

اگر بخواهیم تفاوت اصلی تگ دایو و اسپن را به شما بگوییم باید به این موضوع اشاره کنیم که تفاوت اصلی این دو تگ هم در ساختار و هم در کاربرد آن ها است. همان طور که پیش تر هم اشاره کردیم تگ دایو بیشتر برای بخش بندی سایت، طرح بندی و یا به اصطلاح قالب بندی یک صفحه از وب سایت مورد استفاده قرار می گیرد. تگ دایو را به عنوان تگ Block Level یا همان بلاکی هم می شناسند. این در حالی است که تگ اسپن بیشتر برای طرح بندی متن سایت مورد استفاده قرار می گیرد و جز تگ های اینلاینی یا همان Inline Level محسوب می شوند. یعنی اگر شما از چند تگ اسپن همزمان در کنار یک دیگر استفاده کنید، همه آن ها در یک خط پشت هم قرار می گیرند اما اگر بخواهید از چندین تگ دایو به طور همزمان و در کنار یک دیگر استفاده کنید، هر یک از دایوها در یک سطر قرار خواهند گرفت.

المان دیو بهتر است یا المان اسپن؟

سوالی که ممکن است برای بعضی از برنامه نویسان پیش بیاید این است که کدام یک از المان های دیو یا اسپن بهتر است. در پاسخ به این سوال باید بگوییم که هیچ المان یا تگی خوب یا بد نیست. نمی توانیم بگوییم کدام یک از المان ها بهتر یا بدتر است. هر کدام از آن ها کاربردهای خاص خود را دارند. به عنوان مثال ممکن است برای یک بخش از سایت تگ دایو بهتر و مناسب تر باشد و برای بخش دیگر تگ اسپن گزینه ایده آلی باشد. زبان html قواعد و استانداردهای خاص خود را دارد و یک برنامه نویس خوب و حرفه ای باید به تمام این قواعد به خوبی مسلط باشد تا بتواند بهترین المان را برای هر بخش استفاده کند.

تقسیم بندی صفحات یک سایت و شیوه چیدمان هر یک از عناصر در کنار یک دیگر، تقریبا کار دشوار و زمان بری است. هر چقدر هم تعداد صفحات بیشتر باشد و محتواها و جزئیات آن هم زیاد باشد، بخش بندی سایت حساس تر خواهد بود. چرا که این موضوع دقیقا روی تجربه کاربری سایت تاثیر می گذارد. چنین موضوعی هم رابطه مستقیم با تعداد بازدیدکنندگان سایت دارد. بنابراین تصمیم گیری درباره شیوه بخش بندی هر صفحه به عهده برنامه نویس و توسعه دهنده نخواهد بود و باید یک تیم طراحی و دیزاین سایت وجود داشته باشد تا بتوانند در کنار یگ دیگر طرح های مختلف را با استفاده زبان های نشان گذاری و تگ ها روی سایت پیاده سازی کند. البته این طور هم نیست که طراحان و توسعه دهندگان وب سایت ها فقط برای پروژه های بزرگ، با تیم های طراحی UXو UI همکاری کنند. بلکه برای پروژه های کوچک هم لازم است تا طراحان المان ها و نوع آن ها را بشناسند و تا جای ممکن از المان ها یا همان تگ های معنایی در html استفاده کنند و فقط به استفاده از تگ های عمومی مانند دایو و اسپن بسنده نکنند.