گاهی در طراحی وب‌سایت‌ها و صفحات HTML، شما می‌خواهید که تنها یک کلمه خاص را استایل بدهید بدون اینکه نشانه‌گذاری متصل به آن تحت تاثیر قرار گیرد. به عنوان مثال، شاید بخواهید رنگ یا فونت یک کلمه را تغییر دهید ولی نقطه یا ویرگول بعد از آن هم چنان در حالت پیش‌فرض باقی بماند. در چنین مواردی، استفاده از تگ <span> و اضافه کردن کلاس‌های CSS به آن می‌تواند راه حل مناسبی باشد.
برای شروع، می‌توانید اطراف کلمه مورد نظر خودتان از تگ <span> استفاده کنید و یک کلاس CSS دلخواه به آن اضافه کنید. این گونه کنترل کاملی بر روی استایلینگ آن کلمه خواهید داشت. به عنوان مثال:
گزینه‌های زیادی برای انجام چنین کاری وجود دارد؛ مهم این است که دقت کنید تا نشانه‌گذاری‌های متصل به کلمه را خارج از تگ <span> قرار دهید تا تاثیری نپذیرند. این رویکرد به شما اجازه می‌دهد که به راحتی و با حفظ خوانایی متن، تغییراتی را که نیاز دارید انجام دهید.
همچنین، استفاده از این تکنیک به شما کمک می‌کند که محتویات خود را منظم‌تر و زیباتر ارائه دهید و در عین حال، تجربه کاربری بهتری برای بازدیدکنندگان ایجاد کنید. البته، همیشه بهینه است که استایل‌دهی‌های خود را تا حد ممکن ساده و سبک نگه دارید، به خصوص زمانی که با موارد پیچیده HTML و CSS سروکار دارید.
<p>Hello, this is a <span class="highlight">special</span> word.</p>
<p> - شروع تگ پاراگراف برای محتوای متنی
"Hello, this is a" - متن پیش از کلمه خاص
<span class="highlight"> - آغاز تگ span با کلاس خاص به نام highlight
"special" - کلمه‌ای که استایل خاصی گرفته
</span> - بستن تگ span
"word." - ادامه متن که نشانه‌گذاری اصولی پس از آن را نشان می‌دهد
</p> - بستن تگ پاراگراف برای خاتمه محتوای متنی