Element HTML span sam w sobie nie ma żadnego specjalnego znaczenia. Jest to ogólny kontener śródliniowy (zachowujący się jak zwykły tekst, tzn. nie powodujący przejścia do nowego wiersza itd.) służący do oznaczania fragmentów tekstu w celu nadania im właściwości wizualnych (za pomocą takich atrybutów, jak class, style) lub określenia pewnych wspólnych cech (za pomocą takich atrybutów, jak dir, id, lang).

Elementu span nie należy nadużywać, ponieważ w wielu przypadkach lepszym wyborem jest inny element o określonym znaczeniu (określonej wartości semantycznej) – zobacz poniższe przykłady.

Przykłady użycia elementu HTML span

Elementu span należy używać w przypadkach, kiedy nie pasuje żaden inny element, który lepiej określa znaczenie danego fragmentu tekstu. W poniższym przykładzie za pomocą atrybutu class oznaczamy różne rodzaje organizmów żywych, aby nadać im spójny wygląd za pomocą arkuszy stylów CSS.

<p>Organizmy żywe dzielą się na bakterie, archeony i eukarionty. Przedstawicielem pierwszej grupy są na przykład dobrze znane <span class="bakterie">pałeczki okrężnicy</span>. Do drugiej zalicza się na przykład <span class="archeony">Methanobrevibacter smithii</span>, a wśród eukariontów można wymienić choćby <span class="eukarionty" >człowieka</span>.</p>

Do powyższego przykładu można zastosować na przykład takie reguły CSS:

.bakterie {font-style: italic}
.archeony {font-weight: bold}
.eukarionty {font-style: italic; font-weight: bold}

Wynik

Kolorowanie składni kodu źródłowego

Element span jest często używany do kolorowania składni kodu źródłowego, np.:

<pre class="language-clike" tabindex="0"><code class="language-clike">int <span class="token function">dodajDwa</span><span class="token punctuation">(</span>int liczbaWejsciowa<span class="token punctuation">)</span>
<span class="token punctuation">{</span>
int <span class="token function">wartosc</span><span class="token punctuation">(</span>liczbaWejsciowa <span class="token operator">+</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> wartosc<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>

Powyższy przykład to efekt działania skryptu Prismatic.js na jednej ze stron w tej witrynie. Efekt wygląda tak:

int dodajDwa(int liczbaWejsciowa)
{
    int wartosc(liczbaWejsciowa + 2);
    return wartosc;
}

Lepsze wybory niż span

Elementu span nie powinno się nadużywać, ponieważ często dostępne są elementy HTML, które lepiej pasują do danej sytuacji. Jeśli na przykład definiujemy jakieś pojęcie, które chcemy wyróżnić pogrubieniem, to zamiast elementu span z odpowiednią regułą CSS powinniśmy użyć elementu dfn z odpowiednią regułą CSS:

<span style="font-weight: bold">Element span…</span>

W tym przypadku lepszym wyborem jest element dfn, ewentualnie z elementem strong:

<p><dfn><strong>Element span</strong></dfn>…</p>

Kontekst użycia

Atrybuty obowiązkowe

Element span nie ma atrybutów obowiązkowych.

Atrybuty opcjonalne

Element span obsługuje atrybuty globalne i atrybuty zdarzeniowe.