Element <span>

Artykuł  | Mirosław Zelent

Pojemnik, na pierwszy rzut oka podobny do <div>, jednak w odróżnieniu od niego, element <span> nie zachowuje się blokowo (nie spowoduje zmian w strukturze blokowej witryny, niczego nie przesunie). Słowo span ma w języku angielski wiele znaczeń, jednak w tym kontekście przetłumaczymy je jako: zasięg, rozpiętość.

Najczęściej element <span> tworzymy po to, aby zdefiniować zasięg działania jakiejś klasy w CSS. Sam znacznik nie posiada żadnej roli, poza właśnie prostym zdefiniowaniem iż odtąd dotąd obowiązuje dany styl. Dlatego też atrybutami znacznika <span> będą najczęściej class, albo ewentualnie style. Dobrym praktycznym przykładem zastosowania <span>, jest chęć zapisania jednego wyrazu innym kolorem czcionki, np. czerwonym:

 <style> .cz { color:red; } </style>
<!-- ustawienie czerwonego koloru czcionki dla klasy .cz -->

Polowanie na <span class="cz">Czerwony</span> Październik

Rezultat w przeglądarce:

Polowanie na Czerwony Październik

Takie użycie <span> zastąpiło nieużywane już dzisiaj tagi <font> z atrybutem color. Tagów <font> nie używamy, gdyż interesuje nas rozdzielenie wyglądu strony od jej zawartości. Czasami, w niektórych kodach źródłowych, zobaczysz elementy <span>, które zachowują się blokowo, tzn. tak jak divy. Jest to możliwe, jeśli w klasie spana wymusimy takie zachowanie dopisując: display: block;

Komentarze

Czy macie jakieś uwagi, pytania, sugestie? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać w komentarzach. Dziękujemy Wam za poświęcony czas!