div و span دو تگ مهم در صفحات وب

HTML   
13 ژوئن 2014   

دو عنصر div و span، دو عنصر مهم در صفحات وب هستند و از اهمیت زیادی برخوردارند و به جای بسیاری از عناصر می توان از یکی از این دو عنصر استفاده کرد. مثلا به جای استفاده از جداول در سایت ها می توان از division ها استفاده کرد.

کار این دو عنصر مهم در اصل مشخص کردن قسمت است که خود می تواند شامل عناصر دیگر باشد و با مشخص کردن محدوده ی خاص ویژگی های آن را تغییر داد. در ادامه به توضیح و تفاوت های هریک می پردازیم.

division در css

Divisionها بر خلاف span یک عنصر درون خطی نیست در نتیجه نوشتن هر تگ <div> باعث می شود به خط بعد برویم. به این معنی که مثلا اگر داخل نوشته های مان در یک پاراگراف از division استفاده کنیم، نوشته ای که داخل این عنصر قرار گرفته است به خط بعد می رود.

درون خطی بودن یا نبودن عناصر را می توان همان ویژگی display در css دانست.

division را می توان مستطیلی درنظر گرفت که می توان هرگونه مشخصاتی برای آن تعیین کرد. محتویات یک <div> محدود به نوع خاصی نیست و می تواند شامل متون، تصاویر، لینک ها و یا مجموعه ای از این ها باشد و همانطور که گفته شد زمانی از این عنصر استفاده می کنیم که می خواهیم قسمتی از عناصر را پیدا کرده و تنظیمات خاصی را برای آنها مشخص کنیم.

به مثال زیر دقت کنید:

و این کد css برای آن نوشته شده است:

خروجی:

div element

می بینید که چه خوب می توان با تعیین کردن ویژگی های این division به ظاهر موردنظر و دلخواه دست یافت.

 

span در css

عنصر span هم از جهاتی شبیه به div است اما برعکس آن، این عنصر یک عنصر درون خطی است. یعنی با ایجاد یک عنصر span خط جدیدی بوجود نمی آید و بیشتر زمانی استفاده می شود که می خواهیم قسمتی از یک متن را دارای فرمت خاصی کنیم.

به عنوان مثال کد زیر را درنظر بگیرید:

به همراه این کد css:

خروجی:

span element

همانطور که مشاهده کردید این عنصر هم می تواند به شکل های مختلف به طراحی صفحات وب کمک کند.

 

تقاوت این دو عنصر را می توانید در شکل زیر مشاهده کنید:

span VS div

همچنین ارتباط این دو عنصر به مطلب “شناسایی عناصر با استفاده از id یا class” را می توان در شکل زیر خلاصه کرد:

div and span - class and id