Poznaj Programowanie

Tagi HTML: pre

Piotr Grochal 5 min. czytania

Znacznik <pre> służy do wyświetlania tekstu preformatowanego, w którym wszystkie spacje, tabulatory i znaki nowej linii są zachowywane i prezentowane dokładnie tak, jak w kodzie źródłowym.

Wewnątrz <pre> przeglądarka nie zwija białych znaków i wyświetla tekst czcionką o stałej szerokości (monospace).

Czym jest tekst preformatowany?

Domyślnie HTML zwija wielokrotne białe znaki (spacje, tabulatory, nowe linie) do pojedynczej spacji. Oto przykład kodu, który to ilustruje:

<p>To    jest   tekst  z  wieloma    spacjami</p>

Przeglądarka wyświetli to jako: „To jest tekst z wieloma spacjami” – dodatkowe spacje zostaną zignorowane.

Znacznik <pre> zmienia to zachowanie. W jego obrębie wszystkie białe znaki są interpretowane dosłownie, co pozwala wiernie oddać strukturę i wyrównanie tekstu.

Podstawowy przykład użycia

Tak wygląda prosty blok z zachowaniem podziału na linie i wcięć:

<pre>
To jest pierwsza linia
Druga linia
Trzecia linia z wcięciem
Czwarta linia
</pre>

Ten kod zostanie wyświetlony dokładnie tak, jak został zapisany – wraz ze spacjami i nowymi liniami.

Główne zastosowania znacznika <pre>

Najczęściej wykorzystasz ten znacznik w następujących scenariuszach:

  • prezentacja kodu źródłowego – konieczne jest zachowanie wcięć, wyrównań i układu linii;
  • ASCII art – wierne odwzorowanie „grafik” budowanych z tekstowych znaków ASCII;
  • teksty poezji o określonym kształcie – forma wiersza zależy od dokładnego ułożenia znaków;
  • struktury tabelaryczne i diagramy tekstowe – układy, w których liczy się precyzyjne wyrównanie znaków.

Przykład: kod źródłowy

Fragment kodu JavaScript wyświetlony w bloku preformatowanym:

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

Przykład: ASCII art

Prosty rysunek ASCII zachowujący odstępy i wyrównanie:

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

Przykład: forma wiersza

Fragment, w którym liczy się kształt tekstu:

<pre>
Język programowania Python rządzi
</pre>

Specyfikacja HTML5

Znacznik <pre> w kontekście specyfikacji HTML5 charakteryzuje się następująco:

  • model treści – treść ogólna oraz treść wyczuwalna;
  • elementy nadrzędne – wszystkie elementy dopuszczające treść ogólną;
  • elementy potomne – elementy frazujące;
  • znaczniki – znacznik otwierający i zamykający są obowiązkowe;
  • interfejs DOM – HTMLPreElement.

Kombinacja z tagiem <code>

Najlepszą praktyką jest łączenie <pre> z <code> przy prezentacji fragmentów kodu. Pierwszy zachowuje formatowanie, a drugi nadaje treści właściwą semantykę.

Przykładowa, rekomendowana struktura:

<pre><code>
function calculate(a, b) {
return a + b;
}
</code></pre>

Style CSS dla <pre>

Poniżej znajdziesz użyteczny zestaw stylów poprawiających czytelność bloków preformatowanych:

pre {
white-space: pre; /* zachowuje białe znaki i nowe linie */
color: #333333; /* kolor tekstu */
background: #f4f4f4; /* kolor tła */
padding: 15px; /* wewnętrzne marginesy */
border: 1px solid #cccccc; /* obramowanie */
border-radius: 5px; /* zaokrąglone rogi */
overflow-x: auto; /* poziomy scrollbar dla długich linii */
font-family: 'Courier New', monospace;
font-size: 14px;
}

Kluczowa właściwość: white-space

Najważniejsze wartości i ich zachowanie prezentuje poniższa tabela:

Wartość Zachowanie
pre zachowuje wszystkie białe znaki, łamie w miejscach nowych linii
pre-wrap zachowuje białe znaki, może automatycznie zawijać wiersze
pre-line sekwencje białych znaków zwijane do jednej spacji, nowe linie zachowane
nowrap białe znaki zwijane do jednej spacji, wiersze nigdy nie są zawijane
normal domyślne zachowanie HTML – wszystkie białe znaki zwijane do jednej spacji

Praktyczny przykład ze stylowaniem

Poniżej pełny przykład wykorzystania <pre> z prostym ciemnym motywem:

<!DOCTYPE html>
<html>
<head>
<style>
pre {
width: 500px;
padding: 10px;
background-color: #282c34;
color: #abb2bf;
border-radius: 8px;
overflow-x: auto;
font-size: 13px;
line-height: 1.5;
}
</style>
</head>
<body>
<pre><code>
// Przykład kodu JavaScript
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
</code></pre>
</body>
</html>

Ważne uwagi i dobre praktyki

W pracy z <pre> warto pamiętać o poniższych zasadach:

  • dostępność – jeśli zawartość to kod, dodaj opis, np. atrybut aria-label lub tekstowy kontekst dla czytników ekranu;
  • responsywność – stosuj overflow-x: auto, aby długie linie nie rozbijały układu na urządzeniach mobilnych;
  • semantyka – dla kodu łącz <pre> z <code>, a dla zwykłych bloków tekstu używaj <pre> tylko wtedy, gdy naprawdę musisz zachować formatowanie;
  • unikaj nadużywania – nie używaj <pre> do celów typograficznych (wyrównanie, rozmiar tekstu); do tego służy CSS.

Stosując te praktyki, zapewnisz czytelne, dostępne i estetyczne prezentowanie treści preformatowanych.