فقط واتساپ ۰۹۱۵۷۲۳۲۳۹۸

تگ span در HTML چه کاربردی دارد + ویدیو آموزشی

تگ span در html چه کاربردی دارد؟ تگ span از تگ های اینلاین لول است و زمانی که می خواهیم یک محتوای کوتاه ایجاد کنیم یا یک متن درون خطی ایجاد کنیم از این تگ استفاده می کنیم. در این مقاله در این رابطه بیشتر توضیح خواهیم داد تا به طور کامل متوجه شوید که تگ span در html چه کاربردی دارد و کجا می توان از آن استفاده کرد.

 

⭐ (پیشنهاد می کنم برای یادگیری بهتر، ابتدا ویدیو بالا که قسمتی از دوره رایگان آموزش HTML CSS به زبان ساده است را ببینید سپس ادامه متن را مطالعه نمایید.)⭐

 

تگ span در html چه کاربردی دارد؟

کاربرد تگ span در html زمانی است می خواهیم یک محتوای کوتاه را به کاربر نشان دهیم. مثلا می خواهیم تاریخ انتشار یک نوشته را در زیر آن نشان دهیم. یا زمانی که می خواهیم درون یک متن بلند یک تکه از آن را با استایل متفاوت نشان دهیم. مثلا می خواهیم رنگ یک کلمه یا فونت آن را متفاوت از سایر کلمات نشان دهیم. به صورت کلی زمانی که یک متن کوتاه داریم که دارای استایل خاصی است از این تگ استفاده می کنیم.

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

برای آموزش تگ span در html، بهتر است ابتدا تفاوت تگ های بلاک لول و اینلاین لول را بدانید.

 

تگ بلاک لول و اینلاین لول چیست؟

تگ بلاک لول (block-level) : این تگ تمام بلاک خود را اشغال می کند. حتی اگر در این تگ یک کلمه هم بنویسیم تمام سطر خود را اشغال می کند. اگر چند تگ بلاک لول داشته باشید هر یک از آنها در یک سطر قرار می گیرد.

 

تگ اینلاین لول (inline-level) :

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

 

تفاوت بلاک لول و اینلاین لول

 

تگ span در css

یکی از دلایل اصلی استفاده از تگ span این است که می خواهیم یک استایل خاص به آن تکه مورد نظر بدهیم. مثلا زمانی که یک خط نوشته داریم می توانیم به یکی از کلمات آن تگ <span> بدهیم و آن را با یک فونت و یا رنگ دیگر نشان بدهیم تا توجه مخاطب را به آن جلب کنیم.

 

مثال 1: زمانی که می خواهیم یک تکه از یک متن استایل خاصی داشته باشد.

 

        خروجی ⇐ برای آموزش تگ span با ما باشید.

 

مثال 2: زمانی که می خواهیم نام نویسنده، تعداد بازدید و منبع یک مطلب را در یک خط کنار هم نمایش دهیم.

 

     خروجی ⇐   نویسنده: رضا حیدری   تعداد بازدید: 108   منبع: وبسافت3

 

تفاوت تگ span و div

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

 

تگ span در html | جمع بندی

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

 

منبع: https://www.w3schools.com/tags/tag_span.asp

2 دیدگاه دربارهٔ «تگ span در HTML چه کاربردی دارد + ویدیو آموزشی»

zeynab گفت:

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

مثلا به این صورت: سلام سلام

رضا حیدری گفت:

سلام اگر هردوتا متن داخل یک تگ باشند کنار هم قرار میگیرند همچنین اگر هر دو بصورت مجزا داخل تگ span هم باشند بازم کنار هم قرار میگیرند

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

ورود | ثبت نام
شماره موبایل یا ایمیل خود را وارد کنید
برگشت
کد تایید را وارد کنید
کد تایید برای شماره موبایل شما ارسال گردید
ارسال مجدد کد تا دیگر
برگشت
رمز عبور را وارد کنید
رمز عبور حساب کاربری خود را وارد کنید
برگشت
رمز عبور را وارد کنید
رمز عبور حساب کاربری خود را وارد کنید
برگشت
درخواست بازیابی رمز عبور
لطفاً پست الکترونیک یا موبایل خود را وارد نمایید
برگشت
کد تایید را وارد کنید
کد تایید برای شماره موبایل شما ارسال گردید
ارسال مجدد کد تا دیگر
ایمیل بازیابی ارسال شد!
لطفاً به صندوق الکترونیکی خود مراجعه کرده و بر روی لینک ارسال شده کلیک نمایید.
تغییر رمز عبور
یک رمز عبور برای اکانت خود تنظیم کنید
تغییر رمز با موفقیت انجام شد