تگ Span در HTML چیست؟

Span Html رایج‌ترین عنصری است که در سفر خود به سمت  توسعه Front End با آن مواجه خواهید شد. با این حال، این تگ بر خلاف سایر عناصر، نوع خاصی از عنصر صفحه را تولید نمی‌کند. اگر این سوال هم برای شما پیش آمده که تگ Span در HTML چیست، تا انتهای مطلب همراه ما باشید تا پاسخ آن را به شما بگوییم.

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

تگ Span در HTML چیست؟

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

دلیل اینکه طراحان و توسعه‌دهندگان از <span>  استفاده می‌کنند، این است که کنترل قابل‌توجهی بر روی استایل و قالب‌بندی محتوا و صفحات وب‌سایت خود در اختیار آن‌ها قرار می دهد. هنگامی که از یک تگ span HTML  استفاده می‌کنید، باید یک تگ باز و بسته را نیز به کار ببرید مانند مثال زیر:

HTML

<span>Content goes here</span>

ما از عنصر span به عنوان "عمومی" یاد می‌کنیم، زیرا نام آن برچسب، نشان‌دهنده چیزی در مورد محتوای عنصر نیست. به عبارت دیگر، دیدن کلمه "span" برای ما معنایی ندارد. این دقیقا در تضاد شدید با عنصر معنایی HTML است. عنصری که نام آن، هدفش را توصیف می‌کند. ) مانند <P> برای پاراگراف، <button> و <form> (.

مطلب دیگری که باید در مورد تگ span HTML بدانید، این است که یک عنصر "inline" است. همان‌طور که از نام آن پیداست، عنصر در خط فعلی خود باقی می‌ماند و شکسته نمی‌شود. درست برعکس div که سطح بلوک بوده و استفاده از آن منجر به ایجاد یک خط جدید در صفحه شما خواهد شد. در ادامه مطلب چیزهای بیشتری را در مورد تفاوت بین span و div به شما می‌گوییم.پس تا انتها همراه ما باشید. 

Span در HTML چه می‌کند؟

به یاد داشته باشید: تگ<span>   به خودی خود  بر نحوه رندر صفحه تاثیری نخواهد داشت. دلیل  قدرتمند بودن تگ‌های <span>   این است که به ما اجازه می‌دهند هر ویژگی HTML جهانی را به بخشی از متن یا سایر محتوای صفحه درون خطی اختصاص دهیم. متداول‌ترین ویژگی‌هایی که می‌بینید، با span استفاده می‌شوند. id و class انتخاب‌کننده‌ها هستند که از آن‌ها برای اعمال استایل به کلمات خاص استفاده می‌کنید.

بله، می‌توان CSS را روی عناصر HTML   در تگ‌های  <span> و با استفاده از ویژگی‌های ظاهری اعمال کرد. ممکن است شنیده باشید که به آن" CSS درون خطی" گفته می‌شود. در حالی که باید بدانید CSS درون خطی از نظر فنی امکان‌پذیر است و بهتر است از آن اجتناب کنید. چرا که ایجاد تغییرات ظاهری در صفحه را دشوارتر می‌کند. 

Span  می‌تواند ویژگی‌های دیگری را نیز در خود جای دهد. به عنوان مثال، اگر متنی به زبانی متفاوت از سند دارید، آن را در یک  تگ <span>  بپیچید  و  ویژگی lang را به تگ اضافه کنید. این نشان‌دهنده یک تغییر زبان موقت است که به نمایه‌سازی موتور جستجو کمک می‌کند و حتی به برنامه‌های تبدیل متن به گفتار دستور می‌دهد کلمات را به درستی تلفظ کنند.

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

در نهایت، ما می‌توانیم از  <span>  برای پررنگ و مورب کردن متن با CSS استفاده کنیم. اگر چه بهتر است از  تگ <strong>   برای پررنگ کردن متن و  تگ <em>  (تاکید) برای ایتالیک کردن متن استفاده شود. دلیل آن هم این است که <strong>  و <em>  عناصر HTML معنایی هستند. در حالی که  <span> اینگونه نیست. بلکه باعث می‌شود کد شما برای صفحه‌خوان‌ها قابل دسترسی‌تر باشد. این تکنیک‌ها یکسان هستند.

یک نکته دیگر هم در مورد عنصر span HTML وجود دارد. در صورت امکان و  پیش از استفاده از <span> ، همیشه باید ببینید که آیا جایگزین معنایی‌تری برای آن وجود دارد یا خیر. این قابلیت، دسترسی به HTML وب‌سایت شما را افزایش می‌دهد. 

تفاوت بین HTML Span  وdiv  چیست؟

دقیقا مشابه با تگ span، div یک عنصر HTML عمومی است که در تمام صفحات وب وجود دارد. با این حال، این دو عنصر اهداف متفاوتی دارند و بسیار مهم است که بدانید هر کدام را در کدام سناریو استفاده کنید. 

ابتدا بیایید به اهداف مختلفی که span و div ارائه می‌دهند، بپردازیم. همان‌طور که می‌دانید، span یک عنصر درون خطی عمومی، اما div یک عنصر عمومی در سطح بلوک است.

برای توضیح دقیق‌تر در مورد این که چنین چیزی در عمل به چه معناست، به توضیحات کامل‌تر ما در مورد span در مقابل div در HTML مراجعه کنید. در زیر تفاوت‌های بینdiv  و span به طور کوتاه و ساده آورده شده است.

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

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

متن خود را با تگ‌های Span استایل کنید

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

بنابراین، اگر می‌خواهید توجه را به یک خط متن جلب کنید، محتوای پویا را با جاوا اسکریپت اضافه نمایید یا فقط زیبایی‌شناسی سایت خود را ارتقا دهید،  <span> را  در کمربند ابزار خود نگه دارید؛ چرا که تا حد زیادی از آن استفاده خواهید کرد.

• 4
• 0