2. Nagłówki, akapity i formatowanie tekstu

~15-20 min poziom: początkujący

Tekst to podstawa każdej strony. HTML daje nam narzędzia do jego strukturyzowania i formatowania.

Nagłówki (h1–h6)

Używamy ich do tworzenia hierarchii treści – jak w artykule czy książce.

<h1>Główny tytuł strony</h1>
<h2>Podtytuł sekcji</h2><br>
<h3>Mniejszy podtytuł</h3>
<h4>Jeszcze mniejszy</h4>
<h5>...</h5>
<h6>Najmniejszy nagłówek</h6>

Akapity i podstawowe znaczniki tekstowe

<p>To jest zwykły akapit tekstu. Wszystko wewnątrz <p>...</p> zostanie wyświetlone jako blok tekstu.</p>

<p>
  <strong>Ważny tekst</strong> – pogrubienie (semantyczne).<br>

  <em>Podkreślony akcent</em> – kursywa (semantyczne).<br>

  <b>pogrubienie</b> i <i>kursywa</i> – tylko wizualne (unikaj).<br>

  <u>podkreślenie</u>, <s>przekreślenie</s>, <small>mniejszy tekst</small><br>

  Normalny tekst <sup>Indeks górny</sup>, Normalny tekst <sub>Indeks dolny</sub><br>
</p>

Znaczniki i <hr>

<p>Pierwsza linia tekstu<br>
Druga linia tekstu</p>

<hr>

<p>Nowa sekcja tekstu oddzielona linią</p>

index.html

https://example.com/

Podtytuł sekcji

Mniejszy podtytuł

Jeszcze mniejszy

...

Najmniejszy nagłówek

Ważny tekst – pogrubienie (semantyczne).
Podkreślony akcent – kursywa (semantyczne).
pogrubienie i kursywa – tylko wizualne (unikaj).
podkreślenie, ~~przekreślenie~~, mniejszy tekst
Normalny tekst ^{Indeks górny}, Normalny tekst _{Indeks dolny}

Pierwsza linia tekstu
Druga linia tekstu

Nowa sekcja tekstu oddzielona linią

Najważniejsze elementy wyjaśnione

<h1>–<h6> – nagłówki od najważniejszego (h1) do najmniej ważnego (h6). Tworzą hierarchię treści na stronie i pomagają w SEO oraz dostępności.
– akapit tekstu. Każdy tworzy osobny blok tekstowy z odstępem przed i po.
– oznacza tekst o dużym znaczeniu (semantycznie ważny). Domyślnie wyświetlany jako pogrubiony.
– podkreśla akcent w zdaniu (semantyczne wyróżnienie). Domyślnie wyświetlany jako kursywa.
– pogrubienie tylko wizualne. Nie niesie znaczenia semantycznego (czytniki ekranu traktują go jak zwykły tekst).
– podkreślenie tekstu. Używaj ostrożnie, bo może wyglądać jak link.
<s> – przekreślenie tekstu. Używane np. przy nieaktualnych informacjach lub starych cenach.
– mniejszy tekst, np. dopiski, prawa autorskie, informacje dodatkowe.
– wymusza przejście do nowej linii (line break). Używamy go, gdy chcemy złamać tekst bez tworzenia nowego akapitu.
<hr> – tworzy poziomą linię oddzielającą treść. Przydaje się do wizualnego rozdzielania sekcji.

Do zapamiętania: Zawsze używaj i zamiast i – to lepsze dla dostępności i SEO.

Zadanie

Rozbuduj swój plik index.html o nagłówki h1–h4 i kilka akapitów z różnymi znacznikami tekstowymi.

Następna lekcja

3. Listy uporządkowane i nieuporządkowane

[ Miejsce na reklamę ]