Znacznik <span> w HTML to uniwersalny element liniowy (inline), który pozwala na oznaczanie fragmentów tekstu lub innych elementów w celu ich stylizacji, dodania interaktywności lub struktury – nie zmieniając przy tym struktury dokumentu ani nie wprowadzając łamania linii.
Czym jest <span>?
<span>to wbudowany kontener liniowy – nie wprowadza przerw przed i po swoim użyciu;- nie ma znaczenia semantycznego: służy tylko do grupowania części treści wewnątrz innego elementu (np. akapitu, nagłówka, linku) wtedy, gdy inne znaczniki (np.
<strong>,<em>) nie są odpowiednie, - jest odpowiednikiem elementu
<div>, z tą różnicą, że<div>jest blokowy, a<span>liniowy.
Typowe zastosowania <span>
- Stylizacja fragmentów tekstu – bez naruszania układu strony;
- Oznaczanie fragmentów tekstu – w celu manipulacji za pomocą JavaScript;
- Przypisywanie klas lub identyfikatorów (class, id) – do dowolnego fragmentu treści, by można było go z łatwością stylizować lub selektywnie obsługiwać;
- Łączenie z atrybutami globalnymi oraz atrybutami ARIA – dla dostępności i automatyzacji testów.
Przykłady użycia <span>
Kolorowanie fragmentu tekstu
<p>Znacznik <span style="color: red;">span</span> jest bardzo przydatny.</p>
W tym przypadku tylko wybrany wyraz zostanie wyróżniony na czerwono, podczas gdy reszta tekstu pozostanie bez zmian.
Zmiana rozmiaru pojedynczego słowa
<p>To zdanie zawiera <span style="font-size: 1.5em;">większy</span> wyraz.</p>
Wyróżnienie wielu fragmentów za pomocą klas CSS
<p>Kolory: <span class="text-blue">niebieski</span>, <span class="text-red">czerwony</span>, <span class="text-green">zielony</span>.</p>
Przykładowy CSS:
.text-blue { color: blue; }
.text-red { color: red; }
.text-green { color: green; }
Umożliwia to wielokrotne wykorzystywanie tych samych reguł stylu.
Dodanie interaktywności z JavaScript
<span id="kliknij" style="cursor: pointer;">Kliknij mnie!</span>
<script>
document.getElementById("kliknij").onclick = function () {
alert("Span został kliknięty!");
};
</script>
Podobnie można wykorzystać <span> do dynamicznych zmian (np. podmiana tekstu, reagowanie na akcje użytkownika).
Grupowanie ikon i tekstu wewnątrz innych elementów
<a href="/profil">
Zobacz <span style="font-weight: bold;">profil</span>
<span class="ikona">👤</span>
</a>
Takie podejście pozwala nadać różne style tekstowi i ikonom bez wpływania na całość linku.
Najważniejsze cechy <span>
- Element liniowy – nie zaczyna nowego wiersza i nie łamie tekstu;
- Brak semantyki – nie przekazuje dodatkowej informacji o przeznaczeniu treści dla przeglądarek czy czytników ekranu;
- Obsługuje atrybuty globalne (np.
id,class,title,style,aria-*) – umożliwiające łatwe rozbudowanie funkcjonalności.
Porównanie <span> i <div>
| Cecha | <span> |
<div> |
|---|---|---|
| Typ | Liniowy | Blokowy |
| Przeznaczenie | Oznaczenie fragmentu tekstu | Grupowanie sekcji |
| Łamanie linii | Nie | Tak |
| Zastosowania | Stylizacja, skrypty, interakcje | Layout, struktura |
Dobre praktyki
- Używaj
<span>, gdy chcesz stylizować lub wybiórczo manipulować fragmentem treści bez wpływu na cały blok, - Nie powinien być stosowany do budowania całych sekcji strony czy jej układu (do tego wykorzystaj
<div>lub semantyczne elementy blokowe), - twórz zwięzłe i sensowne klasy lub identyfikatory – ułatwi to obsługę CSS i JavaScript oraz poprawi przeglądanie kodu.
Podsumowanie – <span> to niezastąpiony “uniwersalny marker” w HTML, który pozwala na precyzyjną stylizację, selektywną interaktywność i większą kontrolę nad wybranymi fragmentami treści, bez naruszania struktury dokumentu.
