تگ <span> کاربرد زیادی در شخصی سازی متن ها و صفحات html دارد. فرض کنید که می خواهید متنی بنویسید که هر قسمت آن رنگی مختلف داشته باشد، نوشتن آن با تگ <p> کار سختی است. در این موقع از تگ <span> استفاده می کنیم.
تگ <span>
اسپن یک المان اینلاین است. این یعنی بر خلاف <p> المان شما به خط بعدی نمی رود. <span> مانند یک جعبه برای متن شماست. در واقع اسپن قسمتی از متن شما را در بر می گیرد و می توانید استایل دلخواه خود را به آن بدهید. البته توجه داشته باشید که <span> به خودی خود تغییری در ظاهر متن شما ایجاد نمی کند و باید به آن استایل بدهید.
برای مثال در زیر متنی را با تگ <p> می نویسیم و سپس قسمتی که می خواهیم از بقیه متن متفاوت باشد را در تگ <span> با رنگ و فونت دلخواه قرار می دهیم.
<p>نوشته می شود<span style="color: red; font-family: Yekan;">رنگ و فونت دلخواه</span>متن با</p>
نتیجه ای که در مرورگر نشان داده می شود به صورت زیر است:
