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

  ‏سطح ساده
‏  4 دقیقه
۱۴ مهر ۱۳۹۸
تگ span چیست و چه تفاوتی با تگ div در html دارد؟

طراحی وب یکی از شغل هایی است که امروزه کسب و کارهای زیادی به آن نیاز دارند. شما با راه اندازی یک وب سایت می‌توانید فعالیت‌های شخصی خود را گسترش دهید و این مسئله ای است که باعث شده افراد زیادی به دنبال یادگیری طراحی وب باشند. تفاوت تگ 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 برای سازمان دهی متن در همان خط از کد استفاده می‌شود. اگرشما هم تعریف دیگری از تفاوت این دو تگ دارید خوشحال می‌شویم با خوانندگان سون لرن در میان بگذارید.

 

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

 

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

zahra

مرسی عالی

سروش رضایی

توضیحاتتون خوب بود ولی ملموس نبود
کاربری که از صفر داره یاد میگیره فکر نکنم زیاد چیزی از این آموزش بفهمه

نازنین کریمی مقدم

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

یاشار

بسیااااار بسیار گنگ.. اصلا سرو ته نداشت

فائقه نامور

سلام ممنون از توجه شما
موردی که اشاره فرمودید به تیم تولید محتوا انتقال داده می شود

علی

سلام ، و تشکر به خاطر مطلب مفیدی که قرار دادید.با این تعریف شما ، اگر بخواهیم به یک سطر استایل بدهیم از span و اگر بخواهیم به چند سطر استایل بدهیم از div استفاده میکنیم. درسته ؟

فائقه نامور

سلام
ممنون از توجه شما
شما اگر بخواهید به قسمتی از div استایل مستقلی بدهید آن قسمت را در تگ span قرار دهید.

ما در سون لرن با محدودسازی دسترسی آزاد به اینترنت مخالفیم     اطلاعات بیشتر