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

HTML چیست ؟

HTML یک زبان نشانه گذاری است که در آموزش طراحی سایت استفاده می‌شود. در زبان‌های نشانه گذاری برخلاف زبان‌های برنامه نویسی، خبری از ساختارهایی مثل شرط، حلقه، تکرار و غیره نیست و شما در متن خود از یک سری نشانه استفاده می‌کنید.

در حقیقت در این زبان شما به کمک این نشانه‌ها متن را از سایر عناصر صفحه جدا کرده و ساختار صفحه را مشخص می‌کنید. فایل‌‌های HTML با پسوند .htm یا .html در سیستم ذخیره می‌شوند. تقریبا همه مرورگرهای وب این فایل‌ها را پشتیبانی می‌شوند.

تگ چیست ؟

تگ‌های HTML دستورالعمل‌های این زبان هستند که به مرورگر می‌گویند صفحه مورد نظر از چه عناصری تشکیل شده است. هر کدام از این Tagها معنا و مفهوم خاصی دارند و به شما امکاناتی مانند تغییر شکل ظاهری متن، ساخت لیست‌های مختلف و به هم وصل کردن صفحات را می‌دهند.

تگ‌ها وظایف گوناگونی دارند و با فراخوانی هر کدام کارشان شروع شده و با بستن تگ کارشان تمام می‌شود. مثلا برای نوشتن پاراگراف‌ها در زبان HTML از تگ <p> استفاده می‌شود و زمانی که پاراگراف تمام شده، تگ هم بسته می‌شود.

Block Element چیست و چه فرقی با Inline Element دارد؟

2 دسته مهم از المان هایی که در HTML از آن‌ها استفاده می‌کنیم، المان‌های بلاکی (Block element) و المان‌های درون خطی (Inline element) هستند.

• المان‌های بلاکی

همان طور که از عنوان پیدا است این المان‌ها مانند بلوکی هستند که می‌توانند عناصر دیگر را در خود جای دهند و با استفاده از آن‌ها می‌توان بخش‌های مختلف صفحه را جدا کرده و به هر بخش استایل داد. به عنوان مثال Div و h1 دو نمونه از المان‌های بلاکی هستند. قبل و بعد از باز و بسته شدن این نوع المان ها، مرورگر یک خط جدید در نظر می‌گیرد.

• المان‌های درون خطی 

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

تگ Div یا Division در HTML چیست ؟

به کمک تگ Div می‌توان بخش‌های مختلف صفحه را به طور جداگانه طراحی کرد و به عناصری که در آن Div قرار داده ایم با CSS سبک و استایل بدهیم. به عنوان مثال قسمت پایینی هر سایت (Footer) در کدهای HTML یک Div محسوب می‌شود که آیکون ها، متن و سایر المان هایی که در فوتر می‌بینید در آن دیو قرار می‌گیرند. با کمک Div عناصر قسمتی از صفحه که به دلخواه شما چیده شده اند، استایل می‌گیرند. همچنین تمامی بخش‌های یک صفحه مانند تصاویر، متن، دکمه و غیره با استفاده از این تگ قابل جداسازی هستند.

تگ Span در HTML چیست ؟

به کمک تگ span می‌توان به هر عنصر مستقل و بدون تغییر دادن سایر عناصر استایل داد. به عنوان مثال می‌توانید این تگ را برای یک پاراگراف <P> در کدهای خود استفاده کرده و استایل آن را تغییر دهید بدون اینکه سایر متن‌ها تغییری کنند.

تفاوت تگ Div با Span چیست ؟

HTML به شما در شکل دهی ساختار یک صفحه کمک می‌کند و برای استایل دادن و افزودن ویزگی‌های ظاهری به صفحات سایت، باید از CSS کمک بگیرید. تگ div و تگ span در کنار CSS کاربرد زیادی دارند و در بسیاری از موارد کار طراحان وب را ساده می‌کنند. تا این قسمت از مطلب با کاربرد تگ‌ها آشنا شدیم. در لیست زیر تفاوت تگ Div و Span را بررسی می‌کنیم:

• تگ Div:
  • تگ Div یک المان بلاکی است.
  • Div برای استایل دادن به کادرهای موجود در صفحه که دارای المان‌های مختلفی هستند، به کار می‌رود.
• تگ Span :
  • Span یک المان درون خطی است.
  • این تگ برای استایل دادن به عناصر صفحه به کار می‌رود.

جمع بندی

پس به این نتیجه رسیدیم که تگ دیو در HTML برای سازمان دهی المان‌های مختلفی که در خود جای داده به کار می‌رود. درحالیکه تگ Span برای سازمان دهی متن در همان خط از کد استفاده می‌شود. اگرشما هم تعریف دیگری از تفاوت این دو تگ دارید خوشحال می‌شویم با خوانندگان سون لرن در میان بگذارید.