طراحی وب یکی از شغل هایی است که امروزه کسب و کارهای زیادی به آن نیاز دارند. شما با راه اندازی یک وب سایت میتوانید فعالیتهای شخصی خود را گسترش دهید و این مسئله ای است که باعث شده افراد زیادی به دنبال یادگیری طراحی وب باشند. تفاوت تگ div و span یکی از سوالات مکرر افراد در مسیر یادگیری طراحی وب است و ما در این مقاله به این سوال پاسخ میدهیم.
HTML یک زبان نشانه گذاری است که در آموزش طراحی سایت استفاده میشود. در زبانهای نشانه گذاری برخلاف زبانهای برنامه نویسی، خبری از ساختارهایی مثل شرط، حلقه، تکرار و غیره نیست و شما در متن خود از یک سری نشانه استفاده میکنید.
در حقیقت در این زبان شما به کمک این نشانهها متن را از سایر عناصر صفحه جدا کرده و ساختار صفحه را مشخص میکنید. فایلهای HTML با پسوند .htm یا .html در سیستم ذخیره میشوند. تقریبا همه مرورگرهای وب این فایلها را پشتیبانی میشوند.
تگهای HTML دستورالعملهای این زبان هستند که به مرورگر میگویند صفحه مورد نظر از چه عناصری تشکیل شده است. هر کدام از این Tagها معنا و مفهوم خاصی دارند و به شما امکاناتی مانند تغییر شکل ظاهری متن، ساخت لیستهای مختلف و به هم وصل کردن صفحات را میدهند.
تگها وظایف گوناگونی دارند و با فراخوانی هر کدام کارشان شروع شده و با بستن تگ کارشان تمام میشود. مثلا برای نوشتن پاراگرافها در زبان HTML از تگ <p> استفاده میشود و زمانی که پاراگراف تمام شده، تگ هم بسته میشود.
2 دسته مهم از المان هایی که در HTML از آنها استفاده میکنیم، المانهای بلاکی (Block element) و المانهای درون خطی (Inline element) هستند.
همان طور که از عنوان پیدا است این المانها مانند بلوکی هستند که میتوانند عناصر دیگر را در خود جای دهند و با استفاده از آنها میتوان بخشهای مختلف صفحه را جدا کرده و به هر بخش استایل داد. به عنوان مثال Div و h1 دو نمونه از المانهای بلاکی هستند. قبل و بعد از باز و بسته شدن این نوع المان ها، مرورگر یک خط جدید در نظر میگیرد.
این المانها میتوانند درون یک تگ دیگر مورد استفاده قرار بگیرند و تاثیری روی سایر عناصر آن بخش ندارند و فقط همان خط را تغییر میدهند. از این المانها میتوان در استایل دادن به المانهای بلاکی نیز استفاده کرد. قبل و بعد از باز شدن این تگ، مرورگر به خط جدید نمیرود.
به کمک تگ Div میتوان بخشهای مختلف صفحه را به طور جداگانه طراحی کرد و به عناصری که در آن Div قرار داده ایم با CSS سبک و استایل بدهیم. به عنوان مثال قسمت پایینی هر سایت (Footer) در کدهای HTML یک Div محسوب میشود که آیکون ها، متن و سایر المان هایی که در فوتر میبینید در آن دیو قرار میگیرند. با کمک Div عناصر قسمتی از صفحه که به دلخواه شما چیده شده اند، استایل میگیرند. همچنین تمامی بخشهای یک صفحه مانند تصاویر، متن، دکمه و غیره با استفاده از این تگ قابل جداسازی هستند.
به کمک تگ span میتوان به هر عنصر مستقل و بدون تغییر دادن سایر عناصر استایل داد. به عنوان مثال میتوانید این تگ را برای یک پاراگراف <P> در کدهای خود استفاده کرده و استایل آن را تغییر دهید بدون اینکه سایر متنها تغییری کنند.
HTML به شما در شکل دهی ساختار یک صفحه کمک میکند و برای استایل دادن و افزودن ویزگیهای ظاهری به صفحات سایت، باید از CSS کمک بگیرید. تگ div و تگ span در کنار CSS کاربرد زیادی دارند و در بسیاری از موارد کار طراحان وب را ساده میکنند. تا این قسمت از مطلب با کاربرد تگها آشنا شدیم. در لیست زیر تفاوت تگ Div و Span را بررسی میکنیم:
پس به این نتیجه رسیدیم که تگ دیو در HTML برای سازمان دهی المانهای مختلفی که در خود جای داده به کار میرود. درحالیکه تگ Span برای سازمان دهی متن در همان خط از کد استفاده میشود. اگرشما هم تعریف دیگری از تفاوت این دو تگ دارید خوشحال میشویم با خوانندگان سون لرن در میان بگذارید.
ممنون از مقاله خوب و مفیدتون
سوال بنده این هست که میشه به جای تگ p از تگ span استفاده کرد گاهی اوقات؟ و فرقش چیه وقتی استفاده میشه؟ مثلا سایت بنده که وردپرسی هست در قسمتی از ویجت عنوان استفاده می کنم ولی چون در فوتر برای مثلا متن پیوند های مرتبط دارم ازش استفاه میکنم نمیخوام تگ h2 ، h3 و ... بدم، لذا تگ ویجت عنوان رو باید بین p یا span انتخاب کنم. میخوام بدونم کدوم بهتره و چه فرقی داره؟
بیشتر تفاوتشون تو استایل دهی و ... هست. این تاپیک رو مطالعه کنید جواب میگیرید.