Jak zrobić wcięcie w HTML?

W HTML wcięcie tekstu (czyli przesunięcie pierwszej linii akapitu względem krawędzi) wykonuje się przede wszystkim za pomocą właściwości CSS text-indent. Umożliwia to czytelne prezentowanie dłuższych treści, nadając stronie profesjonalny i uporządkowany wygląd. Poniżej znajdziesz szczegółowy poradnik ze sprawdzonymi przykładami zastosowań.

Jak działa text-indent w HTML?

text-indent to właściwość CSS, która ustala, o ile pikseli, emów lub procentów pierwsza linia tekstu danego elementu (najczęściej akapitu — <p>) będzie przesunięta w prawo (lub w lewo, jeśli zadana wartość jest ujemna).

Składnia

selector { text-indent: wartość; } 

Wartość może być określona m.in. przy użyciu:

• Pikseli (px) – ścisła kontrola nad długością wcięcia;
• em – jednostka względna (w stosunku do wielkości czcionki);
• % – procent szerokości elementu nadrzędnego.

Przykłady zastosowań

Wcięcie wszystkich akapitów na stronie

Aby każdy akapit (<p>) miał wcięcie 20px, wystarczy dodać taki styl CSS:

p { text-indent: 20px; } 

Przykład w HTML:

<p>To jest przykładowy akapit. Pierwsza linia tego paragrafu zostanie przesunięta o 20px w prawo, reszta tekstu pozostanie bez zmian.</p> 

Efekt: Tylko pierwsza linia akapitu zostaje przesunięta – klasyczne wcięcie znane z edytorów tekstu.

Wcięcie tylko wybranego akapitu lub elementu

Możesz nadać wcięcie tylko konkretnemu elementowi, np. przez klasę CSS:

.ident { text-indent: 2em; } 

<p class="ident">Ten akapit zaczyna się od wcięcia o wartości 2em, czyli odpowiadającego dwóm wysokościom litery "M" użytej czcionki.</p> 

Takie rozwiązanie pozwala różnicować formatowanie w obrębie jednej strony.

Wcięcie wyrażone w procentach

Użycie wartości procentowej bazuje na szerokości kontenera tekstu:

blockquote { text-indent: 10%; } 

Efekt: każda pierwsza linia w bloku cytatu (<blockquote>) będzie przesunięta o 10% szerokości bloku.

Usunięcie wcięcia dla określonych elementów

Można również usunąć wcięcie dla wybranej grupy elementów, np.:

p.nie-indentuj { text-indent: 0; } 

<p class="nie-indentuj">Ten akapit nie będzie zawierał żadnego wcięcia.</p> 

Wcięcie kodu źródłowego (prezentacja kodu)

Wcięcie kodu w HTML osiąga się przy użyciu czterech spacji lub znaku tabulacji w kodzie źródłowym. To wcięcie poprawia czytelność, ale nie wpływa automatycznie na efekt wizualny dla użytkownika w przeglądarce, chyba że umieścisz kod w tagu <pre> lub odpowiednio ostylujesz go CSS.

<pre>
  <code>
    function przyklad() {
      // kod z wcięciami
    }
  </code>
</pre>

Najczęstsze zastosowania wcięć tekstu

• Akapity w artykułach i esejach – poprawiają czytelność i dają jasną strukturę tekstu;
• Cytowania i bloki tekstowe – nadawanie indywidualnego wcięcia wyróżnia cytaty lub ważniejsze wypowiedzi;
• Listy, instrukcje, regulaminy – wcięcie podkreśla hierarchię i podział na punkty.

Wskazówki praktyczne

• Unikaj jednoczesnego stosowania wcięcia text-indent i dużych marginesów lewych – mogą się one kumulować i przesuwać tekst zbyt daleko,
• Ustawiaj text-indent w jednostkach względnych (em) tam, gdzie zależy Ci na dorównaniu wielkości tekstu (lepsze skalowanie dla różnych urządzeń),
• Aby uzyskać wcięcie od lewej krawędzi wszystkich linii w bloku (a nie tylko pierwszej!), użyj właściwości padding-left lub margin-left, nie text-indent.

Podsumowanie

Do tworzenia klasycznych wcięć pierwszej linii tekstu w HTML i CSS wykorzystuje się właściwość text-indent. Pozwala ona formować czytelne, estetyczne akapity na stronach internetowych, a za pomocą różnych jednostek oraz selektorów CSS możesz swobodnie dostosowywać wcięcia do Twoich potrzeb.