تعریف و کاربرد تگ <span>

<span> ... </ span> - یک ظرف درونی برای محتوا

عنصر HTML <span> یک کانال خطی عمومی برای عبارات محتوا است که به طور ذاتی چیزی را نشان نمی دهد. این می تواند برای دسته بندی عناصر برای اهداف یک ظاهر طراحی (با استفاده از ویژگی های کلاس یا شناسه)، یا به دلیل اینکه آنها ویژگی های یکسان مانند lang را به اشتراک می گذارند. این باید فقط زمانی استفاده شود که هیچ عنصر معنایی دیگر مناسب نباشد. <span> بسیار شبیه یک عنصر <div> است، اما <div> یک عنصر سطح بلوک است در حالی که <span> یک عنصر درون خطی است.

عنصر span شبیه به div است که برای اضافه کردن ساختار به محتوای شما استفاده می شود. تفاوت این است که div یک عنصر block-level است، در حالی که span یک عنصر درون خطی است:

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

عناصر درونی مانند span، a و img برای طراحی قطعات کوچکتری مانند چند کلمه یا جمله در یک محتوا بزرگتر طراحی شده اند. اضافه کردن یک عنصر درون خطی باعث ایجاد یک خط جدید نمی شود. عناصر بلوک سطح می توانند شامل عناصر درون خطی باشند، اما عناصر درون خطی نمی توانند عناصر سطح بلوک داشته باشند.

همانطور که با div، شما اغلب یک کلاس و / یا ویژگی id را به یک فاصله اضافه کنید تا بتوانید آن را با استفاده از CSS سبک کنید.

مثال زیر از عناصر span برای نشان دادن نام محصولات در یک پاراگراف استفاده می کند. سپس این نام محصول می تواند با استفاده از CSS برجسته شود. یک موتور جستجوی سفارشی همچنین می تواند به طور بالقوه از اطلاعات ارائه شده توسط عناصر طولی برای شناسایی محصولات درون صفحه استفاده کند.

<p>Some of our products include <span class="product">SuperWidgets</span>

 <span class="product">MegaWidgets</span> 

<and <span class="product">WonderWidgets</span>.</p