تگ span چیست و چه تفاوتی با تگ div در html دارد؟

دسته بندی: برنامه نویسی
سطح مقاله: ساده
زمان مطالعه: 4 دقیقه
۱۴ مهر ۱۳۹۸

طراحی وب یکی از شغل هایی است که امروزه کسب و کارهای زیادی به آن نیاز دارند. شما با راه اندازی یک وب سایت می توانید فعالیت های شخصی خود را گسترش دهید و این مسئله ای است که باعث شده افراد زیادی به دنبال یادگیری طراحی وب باشند. تفاوت تگ 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 می توان بخش های مختلف صفحه را به طور جداگانه طراحی کرد و به عناصری که در آن Div قرار داده ایم با CSS سبک و استایل بدهیم. به عنوان مثال قسمت پایینی هر سایت (Footer) در کدهای HTML یک Div محسوب می شود که آیکون ها، متن و سایر المان هایی که در فوتر می بینید در آن دیو قرار می گیرند. با کمک Div عناصر قسمتی از صفحه که به دلخواه شما چیده شده اند، استایل می گیرند. همچنین تمامی بخش های یک صفحه مانند تصاویر، متن، دکمه و غیره با استفاده از این تگ قابل جداسازی هستند.

تگ Span در HTML چیست ؟

تگ span چیست

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

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

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

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

جمع بندی

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

 

نویسنده
شاید به ساخت یک اثر هنری فکر کنیم و یا بخواهیم بلندترین قله ها را فتح کنیم؛ ما هنوز نمی دانیم از زندگی چه چیزی را بیشتر از همه می خواهیم. پس هر کاری که از دستتان بر می آید برای زندگی انجام دهید و سرانجام قلب تان، این انتخاب بزرگ را انجام خواهد داد...

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 
گزارش مشکل