2. Nagłówki, akapity i formatowanie tekstu
Witaj w drugiej lekcji! Tekst to serce większości stron internetowych – stanowi 80-90% treści. HTML nie tylko formatuje wygląd, ale nadaje znaczenie (semantykę), co poprawia SEO, dostępność dla niepełnosprawnych i czytelność. W 2026 roku, z AI indeksującym web, semantyka jest kluczowa. Nauczysz się strukturyzować tekst jak pro, unikając błędów z lat 90. Gotowy? Przejdźmy do akcji!
Historia w pigułce: Ewolucja formatowania tekstu w HTML
HTML1 (1991) miał proste tagi jak <p> i <h1>. HTML4 wprowadził semantykę (<strong> zamiast <b>). HTML5 (2014) podkreślił dostępność. Ciekawostka: W 2026, z Web Accessibility Initiative, niessemantyczny kod może obniżyć rankingi w wyszukiwarkach!
Nagłówki h1–h6 – Hierarchia treści jak w książce
Zasada 2026: Dokładnie jeden <h1> na stronę – to tytuł główny. Hierarchia pomaga w nawigacji i SEO. Pomijanie poziomów (np. h1 → h3) to błąd semantyczny.
<h1>Główny tytuł strony – tylko jeden!</h1>
<h2>Główny rozdział</h2>
<h3>Podrozdział</h3>
<h4>Szczegół</h4> <!-- Rzadko używany -->
<h5>Bardzo szczegółowo</h5> <!-- Prawie nigdy -->
<h6>Najmniejszy</h6> <!-- Ekstremalnie rzadko -->
Główny tytuł strony
Główny rozdział
Podrozdział
Wypróbuj: Dodaj nagłówki do index.html i sprawdź w narzędziach deweloperskich (F12) – outline pokazuje hierarchię!
Semantyczne znaczniki tekstowe – Nadaj znaczenie, nie tylko wygląd
<p>Zwykły akapit – automatyczny odstęp góry i dołu. Idealny na bloki tekstu.</p>
<p>
<strong>Ważne ostrzeżenie!</strong> – Semantyczne pogrubienie (czytniki podkreślają tonem).
<em>Akcent na to słowo.</em> – Semantyczna kursywa (nie mylić z <i>).
<small>Copyright © 2026 – All rights reserved.</small>
<s>Stara cena: 299 zł</s> Teraz tylko 199 zł! – Przekreślenie dla usuniętego.
Wzór chemiczny: H<sub>2</sub>O
Matematyka: x<sup>2</sup> + y<sup>2</sup> = r<sup>2</sup>
</p>
Szybka tabela wyboru – Kiedy co używać?
| Potrzebuję | Użyj | Semantyka | Kiedy najczęściej | Przykład użycia |
|---|---|---|---|---|
| Pogrubienie z sensem (ważne) | <strong> | tak | najczęściej | Ostrzeżenia, kluczowe frazy |
| Kursywa z sensem (akcent) | <em> | tak | najczęściej | Cytaty, terminy obce |
| Czysto wizualne pogrubienie | <b> | nie | rzadko | Styl bez znaczenia |
| Czysto wizualna kursywa | <i> | nie | rzadko | Ikony, nazwy statków |
| Przekreślona stara cena / usunięte | <s> lub <del> | tak | często | Promocje, edycje tekstu |
| Drobny tekst (stopka, regulamin) | <small> | tak | bardzo często | Disclaimer, footnotes |
| Podkreślenie | <u> | tak | unikaj | Błędy ortograficzne – mylone z linkami |
| Indeks dolny/górny | <sub> / <sup> | tak | często w nauce | Wzory, przypisy |
Przerwy liniowe i separatory – Kontroluj przepływ tekstu
<p>
Adres: ul. Przykładowa 123<br>
00-000 Miasto – bez nowego akapitu.
</p>
<hr> <!-- Cienka linia pozioma -->
<hr class="my-5 border-3 border-primary"> <!-- Stylizowana z Bootstrap/CSS -->
<strong> i <em> → zawsze priorytet (semantyka + styl).
<b> i <i> → tylko gdy naprawdę potrzebujesz samego wyglądu (np. w ikonach).
Dodatkowe best practices i pułapki
Unikaj pustych akapitów (<p></p>) na spacje – użyj CSS margins. <br> tylko w poezji/adresach, nie do layoutu. Waliduj kod w validator.w3.org. Ciekawostka: Semantyczny tekst poprawia konwersję o 20% wg badań UX!
Zadanie praktyczne – poziom podstawowy
- Otwórz index.html z lekcji 1.
- Dodaj dokładnie jeden <h1> z nazwą strony.
- Dodaj 2–3 <h2> i po 2–3 <h3> pod nimi.
- Napisz 3–5 akapitów z <strong>, <em>, <small>, <s>, <sup>/<sub>.
- Wstaw <hr> między sekcjami.
- Zapisz, odśwież przeglądarkę – sprawdź hierarchię w outline (F12 > Elements).
Zadanie zaawansowane – eksperyment
Zmień <strong> na <b> i sprawdź w czytniku ekranu (np. NVDA darmowy). Dodaj <del datetime="2026-02-26"> dla datowanej edycji. Podziel się efektami w komentarzach!