Co to jest `pre` w HTML?

Znacznik <pre> w HTML służy do wyświetlania „wstępnie sformatowanego” tekstu, czyli takiego, który zachowuje wszystkie spacje, tabulatory oraz znaki nowej linii dokładnie tak, jak zostały zapisane w kodzie źródłowym. Jest to jeden z niewielu elementów HTML, przy których przeglądarka nie ignoruje wielokrotnych spacji i przejść do nowej linii, co daje pełną kontrolę nad formatem wyświetlanego tekstu.

Kluczowe cechy <pre>

• Zachowanie oryginalnego formatowania – przestrzenie, tabulatory i nowe linie nie są przez przeglądarkę modyfikowane;
• Czcionka mono-spaced – domyślnie tekst wewnątrz <pre> jest prezentowany czcionką o stałej szerokości, taką jak Courier;
• Brak automatycznego zawijania wierszy – długie linie mogą powodować przewijanie poziome, o ile nie zastosowano własnych reguł CSS.

Składnia

<pre> To jest przykładowy tekst, w którym zachowane są wszystkie odstępy i nowe linie. </pre> 

Powyższy kod sprawi, że tekst wyświetli się dokładnie w takiej formie, jak został zapisany w edytorze, wraz ze wszystkimi odstępami i nowymi liniami.

Przykłady praktycznych zastosowań

Prezentacja fragmentów kodu programistycznego

<pre> function greet(name) { console.log("Hello, " + name); } </pre> 

Taki blok kodu jest czytelny zarówno dla komputera, jak i dla użytkownika, ponieważ zachowuje strukturę tabulacji i wcięć.

Wyświetlanie tekstów wymagających specyficznego układu, np. poezji

<pre> Nad rzeką wierzba pochyla cień Słyszę — śpiewa wiatr </pre> 

Wiersz zostanie pokazany z oryginalnym układem wersów i wcięć.

Przedstawienie logów lub danych technicznych

<pre> [2025-08-07 14:05] INFO Server started [2025-08-07 14:07] WARN High memory usage detected [2025-08-07 14:09] ERROR Failed to connect to database </pre> 

Dzięki <pre> czytelność logów nie zostaje utracona.

Tworzenie grafik tekstowych (ASCII art)

<pre> /\_/\ ( o.o ) > ^ < </pre> 

Bez <pre> taki rysunek straciłby kształt, bo przeglądarka połączyłaby wszystko w jedną linię.

Dodatkowe uwagi i najczęstsze błędy

• Niewskazane jest stosowanie <pre> w miejscach, gdzie nie jest wymagane zachowanie formatowania — do zwykłego tekstu należy używać standardowych elementów, np. <p>;
• Można stosować proste elementy HTML wewnątrz <pre> — np. <strong>, <a>, <span>, ale unika się rozbudowanych układów, ponieważ mogą zakłócić interpretację białych znaków;
• Stylowanie CSS – jeśli chcesz, aby tekst zawijany był przy krawędzi, można użyć reguły CSS white-space: pre-wrap;, jednak domyślnie <pre> używa white-space: pre;.

Podsumowanie

Znacznik <pre> to podstawowe narzędzie każdego twórcy stron internetowych, gdy konieczne jest precyzyjne odwzorowanie formatu tekstu, np. w kodach, logach czy specjalnych układach tekstu. Dzięki temu użytkownik widzi dokładnie taki układ tekstu, jaki został zapisany w źródle.