آموزش HTML به زبان ساده-قسمت هشتم:کاربرد تگ span

نویسنده : ادمین زمان انتشار : پنجشنبه ، ۴ مهر ۹۸

برچسب یا تگ <span> چیست؟

در ابتدا باید بدانید که خود کلمه span به معنی “طول” است. در واقع تگ span به ما کمک می‌کند یک عنصر را در طول عنصری دیگر قرار دهیم. برای درک بهتر به یک مثال روی می‌آوریم. فرض کنید می‌خواهید جمله “حسن به مدرسه رفت” را در HTML بنویسید و همچنین نهاد این جمله یعنی کلمه “حسن” را به رنگ آبی در بیاورید. در حالت عادی باید دو تگ Paragraph ایجاد کنیم و در تگ اول، نهاد را بنویسیم و همچنین به آن استایلِ رنگ آبی بدهیم. در تگ پاراگراف دوم نیز بقیه جمله را بنویسیم. که در این صورت نهاد جمله در خط اول باقی می‌ماند و بقیه جمله به خط دوم می‌رود. مانند زیر:

<p/> حسن<";p style="color:blue>
<p/>به مدرسه رفت<p>

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

کاربرد تگ <span>

تگ span یک تگ بسته است به این معنی که علاوه بر تگ باز<span>، دارای یک تگ بسته <span/> نیز می‌باشد. با استفاده از این تگ می‌توانیم به سک قسمت خاص از نوشته ها استایل‌های خاصی بدهیم. در واقع هنگام استفاده از این تگ ما یک عنصر درونی ایجاد کرده‌ایم. با ان تفاوت که عنصر درونی ایجاد شده هیچ تغییر موقعیتی نمی‌دهد. مثلا می‌توانیم کلمه “حسن” در جمله بالا را به رنگ آبی در بیاوریم ولی همچنان تمام جمله در یک خط باقی بماند.

با استفاده از این تگ کار های بسیار جالبی می‌توان انجام داد اما برای آموزش آنها کمی زود است و ابتدا باید با بسیاری از تگ‌ها آشنا شوید. پس آموزش آنها را به جلسات نهایی موکول می‌کنیم تا درکشان برای شما ساده باشد.

روش استفاده از تگ span

همانطور که گفته شد این تگ به ایجاد یک عنصر درونی می‌پردازد پس ما باید از این تگ، درون دیگر عناصر استفاده کنیم. برای درک بهتر به تشریح مثال اول می‌پردازیم. برای اینکه نهاد را به رنگ آبی دربیاوریم در حالی که بقیه جمله رنگِ دیگری داشته باشد. باید ابتدا یک تگ پاراگراف ایجاد کنیم و تمام جمله خود را درون آن بنویسیم. سپس در سمت چپ کلمه “حسن” یک تگ باز <span> و در سمت راست آن یک تگ بسته <span/> ایجاد می‌کنیم. حالا وقت آن رسیده که درون تگ باز span استایل‌های خود را تنظیم نماییم به این منظور به جعبه کدهای زیر توجه فرمایید.

See the Pen aboxpoE by amir (@amir5250) on CodePen.0

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