Aby wstawić spację w HTML, należy rozróżnić kilka możliwości, ponieważ HTML interpretuje białe znaki inaczej niż tekst pisany w zwykłym edytorze. W tym poradniku znajdziesz szczegółowe omówienie najważniejszych metod, praktyczne przykłady i wskazówki do zastosowania w codziennej pracy z kodem HTML.
Podstawowa spacja w HTML
W normalnym dokumencie HTML pojedyncza spacja w kodzie źródłowym jest traktowana przez przeglądarkę jako jeden biały znak (niezależnie, czy wpiszesz jedną, czy kilka spacji pod rząd). Przykład:
<p>To są słowa rozdzielone wieloma spacjami.</p>Na stronie zostanie to wyświetlone jako:
To są słowa rozdzielone wieloma spacjami.
Przeglądarka automatycznie redukuje wszystkie spacje i znaki nowej linii do jednego odstępu. Jeśli zależy Ci na zachowaniu większych odstępów – możesz skorzystać ze znaków specjalnych lub właściwości CSS.
Niełamliwa spacja (nbsp)
Najważniejszym narzędziem do kontrolowania odstępów w HTML jest niełamliwa spacja, czyli non-breaking space, zapisywana jako:
Ta spacja nie tylko tworzy widoczny odstęp, ale także blokuje łamanie w tym miejscu wiersza. Dzięki temu tekst, który powinien pozostać w jednej linii, nie zostanie przypadkowo podzielony na dwa wiersze.
Typowe przykłady użycia
- Zapobieganie rozdzieleniu daty i jednostki („2025 rok” zamiast „2025 rok”),
- ochrona tzw. „sierot” w języku polskim, czyli by jedną literę, np. „w”, „z”, „a”, zawsze zostawić przy następnym słowie („z tego powodu”),
- zapobieganie łamaniu liczby i jednostki, np. „15 cm”.
Przykład kodu
<p>Proszę zgłosić się do <strong>dr Nowaka</strong>.</p>
<p>Koszt wysyłki: 25 zł.</p>
<p>W 2025 roku planujemy nowy projekt.</p>
Wiele spacji obok siebie
Aby uzyskać kilka kolejnych spacji w tekście HTML, należy po prostu powielić znak specjalny , np.:
<p>Słowo1 Słowo2</p>Dzięki temu między wyrazami pojawią się trzy nierozerwalne odstępy.
Większa kontrola odstępów
Jeśli potrzebujesz pełnej kontroli nad ilością przestrzeni w pionie lub poziomie, warto czasem użyć CSS lub specjalnych elementów HTML.
Przykład z użyciem CSS (klasa z marginesem)
<span style="margin-left: 30px;">Przesunięty tekst</span>albo
<p style="word-spacing: 2em;">Tekst z dużymi odstępami między wyrazami.</p>Element <pre> – zachowanie białych znaków
Chcesz pokazać tekst z dokładnym zachowaniem każdej spacji i nowej linii (np. kod, wiersz)? Skorzystaj z elementu <pre>:
<pre> To jest tekst z wieloma spacjami i enterami. </pre>Przeglądarka zachowa wszystkie spacje, tabulatory i przeniesienia wierszy.
Podsumowanie i praktyczne porady
- Zwykła spacja – jeden znak spacji w kodzie HTML to zawsze jeden odstęp na stronie, wiele spacji zredukuje się do jednej;
- Spacja niełamliwa
– pozwala kontrolować odstępy oraz zapobiega łamaniu wiersza w miejscu jej użycia. Zalecana przy ochronie „sierot”, wartości i jednostek, imion i nazwisk oraz innych fragmentów, które powinny pozostać razem; - Kilka spacji – wstaw kilka
obok siebie; - Większe i bardziej precyzyjne odstępy – używaj stylów CSS (np.
margin,padding,word-spacing); - Zachowanie wszystkich białych znaków – umieść tekst w bloku
<pre>.
Odpowiednie użycie spacji pozwala zachować estetykę, czytelność i poprawność językową publikowanych treści – szczególnie w języku polskim, gdzie dbałość o „sieroty” i nieprzypadkowe dzielenie wyrazów to ważny element profesjonalnego webwritingu.
