Dokumentacja HTML z przykładami: Span

Q: Dlaczego width nie działa na moim spanie?

Elementy inline ignorują width, height i pionowe marginesy. Nadaj spanowi display: inline-block, żeby został w linii i przyjął rozmiar, albo display: block, żeby zachowywał się jak div.

Q: Jak zmienić kolor jednego słowa w HTML?

Obejmij słowo spanem z klasą i nadaj mu kolor w CSS: word z .accent { color: #2563eb; }. Przy jednorazowej zmianie działa też word .

Znacznik span w HTML: stylowanie fragmentu tekstu i div vs span

Znacznik <span> to ogólny kontener inline: obejmuje kilka słów w linii, żeby dało się je ostylować albo obsłużyć skryptem bez łamania linii. Dowiedz się, jak go używać, czym różni się od div i kiedy lepiej pasuje bardziej konkretny znacznik.

Na tej stronie są działające edytory: edytuj, uruchamiaj i od razu zobacz wynik.

Autor: Kevin Spektor, Współzałożyciel i CTO

Opublikowano Sep 24, 2026

Co robi znacznik span

<span> obejmuje fragment tekstu w linii, żeby dało się go ostylować albo znaleźć w JavaScript. To bliźniak <div> w wersji inline: nie ma znaczenia ani domyślnego wyglądu i nie zaczyna nowej linii.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; font-size: 18px; }
    .accent { color: #2563eb; font-weight: 600; }
    .tag { background: #fef3c7; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <p>Your order ships <span class="accent">tomorrow</span>, status: <span class="tag">packed</span>.</p>
</body>
</html>

Zdanie zostaje w jednej linii. Zmieniają się tylko objęte słowa.

div vs span

Oba mają identyczne przeznaczenie (kontener bez znaczenia), a różnią się tym, jak układają się na stronie:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs span</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .line { margin-bottom: 16px; }
    .d { border: 2px solid #2563eb; }
    .s { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div class="line">Text before <div class="d">a div</div> text after.</div>
  <div class="line">Text before <span class="s">a span</span> text after.</div>
</body>
</html>

Div dzieli zdanie na trzy linie i rozciąga się na całą szerokość strony; span zostaje w zdaniu i przylega do swojego tekstu.

	`<div>`	`<span>`
Wyświetlanie	Blokowe	Inline
Zaczyna nową linię	Tak	Nie
Szerokość	Cała dostępna szerokość	Tak szeroki jak jego treść
`width`, `height`, pionowy margines	Stosowane	Ignorowane
Może zawierać	Wszystko, łącznie z blokami	Tylko tekst i elementy inline
Typowe użycie	Sekcje, karty, opakowania układu	Słowo lub wyrażenie w tekście

Jeszcze jedna różnica: <div> nie może być wewnątrz <p>, a jeśli spróbujesz, przeglądarka wcześniej zamknie akapit, natomiast span może stać wszędzie tam, gdzie tekst. Więcej na ten temat na stronie o div.

Stylowanie spana: co działa, a co nie

Kolor, czcionka, tło i poziomy padding działają na spanie. Rozmiar nie: element inline ignoruje width, height oraz górne i dolne marginesy. Zmień go na inline-block, żeby nadać mu rozmiar i zostawić go w linii:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span width</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 2; }
    .box { background: #dbeafe; width: 120px; height: 40px; margin: 20px 0; }
    .ib { display: inline-block; line-height: normal; }
  </style>
</head>
<body>
  <p>Inline: <span class="box">width ignored</span> end.</p>
  <p>Inline block: <span class="box ib">120 × 40</span> end.</p>
</body>
</html>

Pierwszy span jest tak szeroki jak jego słowa. Drugi ma dokładnie 120 na 40 pikseli i nadal stoi w zdaniu.

Spany w JavaScript

Span to typowe miejsce na wartość, którą wypełnia skrypt, na przykład licznik albo nazwę użytkownika:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span with JavaScript</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #count { font-weight: bold; color: #16a34a; }
  </style>
</head>
<body>
  <p>You have clicked <span id="count">0</span> times.</p>
  <button type="button">Click</button>
  <script>
    let n = 0;
    document.querySelector('button').addEventListener('click', () => {
      n++;
      document.getElementById('count').textContent = n;
    });
  </script>
</body>
</html>

Zmienia się tylko liczba; reszta zdania pozostaje nietknięta.

Kiedy konkretny znacznik jest lepszy niż span

Span nie ma znaczenia, więc czytnik ekranu czyta go jak zwykły tekst. Gdy słowa pełnią jakąś rolę, użyj znacznika dla tej roli i ostyluj go, jak chcesz:

Znaczenie	Użyj zamiast spana
Ważny tekst	`<strong>`
Akcent, emfaza	`<em>`
Wyróżniony lub zaznaczony tekst	`<mark>`
Kod, nazwa pliku	`<code>`
Klawisz klawiatury	`<kbd>`
Data lub godzina	`<time datetime="2026-09-24">`
Tekst w innym języku	`<span lang="fr">` (span plus atrybut `lang`)

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save <code>index.html</code>.</p>
<p>This step is <strong>required</strong>, and <mark>the deadline is Friday</mark>.</p>
<p>She said <span lang="fr">merci</span> and left.</p>

Strona o pogrubieniu wyjaśnia różnicę między <strong>, <b>, <em> i <i>.

Częste błędy

Ustawianie width na zwykłym spanie. Jest ignorowane. Użyj display: inline-block.
Wstawianie diva albo akapitu do spana. Niepoprawny HTML, który łamie linię. Zamień zewnętrzny span na div.
Klikalne spany. Tak jak do diva, do spana z onclick nie da się dotrzeć klawiaturą. Użyj <button> albo linku.
Span dla każdego stylu. Jeśli całe akapity albo sekcje potrzebują stylu, umieść klasę na samym <p> lub kontenerze, zamiast obejmować jego tekst spanem.

Najczęściej zadawane pytania

Czym jest span w HTML?

<span> to ogólny kontener inline. Obejmuje część linii tekstu, na przykład jedno słowo, żeby CSS albo JavaScript mogły się do niej odwołać, i nie ma własnego wyglądu ani znaczenia.

Czym różni się div od span?

<div> to blok: zaczyna się w nowej linii i zajmuje pełną szerokość. <span> jest inline: zostaje w linii tekstu i jest tak szeroki jak jego treść. Używaj div do grupowania bloków treści, a span do oznaczania słów w tekście.

Dlaczego width nie działa na moim spanie?

Elementy inline ignorują width, height i pionowe marginesy. Nadaj spanowi display: inline-block, żeby został w linii i przyjął rozmiar, albo display: block, żeby zachowywał się jak div.

Jak zmienić kolor jednego słowa w HTML?

Obejmij słowo spanem z klasą i nadaj mu kolor w CSS: <span class="accent">word</span> z .accent { color: #2563eb; }. Przy jednorazowej zmianie działa też <span style="color: #2563eb">word</span>.

Czy span może zawierać div?

Nie. Span może zawierać tylko treść inline, taką jak tekst, linki, obrazki i inne spany. Przeglądarki i tak wyświetlą div w spanie, ale to niepoprawny HTML, który łamie linię, więc zmień zewnętrzny element na div.

Powiązane zagadnienia