تابستون تو راهه. قبل از تغییر قیمت‌ها یادگیری رو شروع کن ...
۰ ثانیه
۰ دقیقه
۰ ساعت
۲۱ دیدگاه نظر ریحانه یزدانی
تگ span چیست و چه تفاوتی با تگ div در html دارد؟
تگ 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 برای سازمان دهی متن در همان خط از کد استفاده می‌شود. اگرشما هم تعریف دیگری از تفاوت این دو تگ دارید خوشحال می‌شویم با خوانندگان سون لرن در میان بگذارید.

 
۲۱ دیدگاه
ما همه سوالات و دیدگاه‌ها رو می‌خونیم و پاسخ میدیم
zenab ۱۴ آبان ۱۴۰۲، ۱۰:۰۶

سلام اگر بخواهم دوتا متن روبروی هم قرار بگیرند باید چیکار کنم؟ مثلا به این صورت: سلام سلام

نازنین کریمی مقدم ۲۰ آبان ۱۴۰۲، ۱۰:۵۹

درود باید هردو رو در یک div گذاشته و از ویژگی display استفاده کنید.

۲۶ مرداد ۱۴۰۲، ۱۵:۱۵

سلام. من تو سند html تگ span رو نوشتم و بهش class دادم. بعد تو سند css رنگش رو تغییر دادم ولی خروجی هیچ تغییری نکرد

نازنین کریمی مقدم ۰۶ شهریور ۱۴۰۲، ۰۶:۱۰

درود باید کدتون رو در کدپن آپلود و اینجا بفرستید تا بتونم مشکلتون رو برطرف کنم.

۱۷ خرداد ۱۴۰۲، ۰۸:۰۹

سلام بسیار مفید بود ممنون

۲۸ مرداد ۱۴۰۱، ۱۵:۰۵

سلام و عرض ادب ممنون از مقاله خوب و مفیدتون سوال بنده این هست که میشه به جای تگ p از تگ span استفاده کرد گاهی اوقات؟ و فرقش چیه وقتی استفاده میشه؟ مثلا سایت بنده که وردپرسی هست در قسمتی از ویجت عنوان استفاده می‌کنم ولی چون در فوتر برای مثلا متن پیوند‌های مرتبط دارم ازش استفاه میکنم نمیخوام تگ h2 ، h3 و ... بدم، لذا تگ ویجت عنوان رو باید بین p یا span انتخاب کنم. میخوام بدونم کدوم بهتره و چه فرقی داره؟

نازنین کریمی مقدم ۲۹ مرداد ۱۴۰۱، ۰۷:۱۳

درود بیشتر تفاوتشون تو استایل دهی و ... هست. <a href="https://stackoverflow.com/questions/1908234/when-to-use-span-instead-p#:~:text=The%20p%20tag%20denotes%20a,winds%20up%20side%20by%20side." target="_blank" rel="noopener nofollow ugc">این تاپیک</a> رو مطالعه کنید جواب میگیرید.

۲۸ تیر ۱۴۰۱، ۱۰:۳۲

تگ span فقط برای استایل دهی به متن استفاده میشه؟

نازنین کریمی مقدم ۲۸ تیر ۱۴۰۱، ۱۱:۱۹

درود بله اغلب برای اینکار استفاده میشه، البته امکانش هست که استایل رو هم تغییر نداد و صرفا عبارت رو تو span گذاشت اما فایده ای نداره و تفاوتی با اینکه کل عبارت در یک المان مثلا p نوشته بشه.

۰۴ اردیبهشت ۱۴۰۱، ۰۸:۳۹

great

۱۰ بهمن ۱۴۰۰، ۱۰:۳۸

عالی

۱۶ دی ۱۴۰۰، ۰۸:۴۹

خیلی کامنتا برام عجیب بود! به نظر من خیلی شفاف و واضح بود

منیر ۳۰ مرداد ۱۴۰۰، ۰۸:۲۲

سلام توضیحات خیلی بد بود.

نازنین کریمی مقدم ۳۱ مرداد ۱۴۰۰، ۲۳:۵۱

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

zahra ۱۱ اسفند ۱۳۹۹، ۱۸:۵۰

مرسی عالی

سروش رضایی ۱۱ مهر ۱۳۹۹، ۰۷:۴۵

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

نازنین کریمی مقدم ۱۱ مهر ۱۳۹۹، ۱۵:۳۷

درود. این مقاله درمورد یکی از المانهای html توضیح میده. اگر کسی با مفاهیم پایه آشنا نباشه، مسلما در فهم مطالب به مشکل میخوره. مقاله <a href="https://7learn.com/blog/front-end-road-map" rel="noopener noreferrer" target="_blank">نقشه راه فرانت اند</a> رو برای تازه واردان درنظر گرفتیم تا به ترتیب شروع به یادگیری کنند.

یاشار ۱۶ تیر ۱۳۹۹، ۱۱:۴۲

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

فائقه نامور ۱۹ مرداد ۱۳۹۹، ۱۶:۵۶

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

علی ۰۱ تیر ۱۳۹۹، ۰۴:۰۸

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

فائقه نامور ۲۱ مرداد ۱۳۹۹، ۱۰:۳۷

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

  • HTML چیست ؟
  • تگ چیست ؟
  • Block Element چیست و چه فرقی با Inline Element دارد؟
  • تگ Div یا Division در HTML چیست ؟
  • تگ Span در HTML چیست ؟
  • تفاوت تگ Div با Span چیست ؟
  • جمع بندی
اشتراک گذاری مقاله در :