Do tworzenia logicznej, hierarchicznej struktury tekstu na stronie używa się przede wszystkim znaczników nagłówków oraz akapitów:
<h1>- nagłówek główny strony lub artykułu,<h2>- nagłówek sekcji niższego poziomu,<h3>-<h6>- kolejne poziomy podsekcji,<p>- akapit zwykłego tekstu.
Nagłówki nie służą tylko do powiększenia tekstu. Ich głównym zadaniem jest opisanie struktury dokumentu. Dzięki temu strona jest czytelniejsza dla użytkowników, wyszukiwarek oraz technologii wspomagających, np. czytników ekranu.
Przykład poprawnej struktury
<h1>Oferta firmy</h1>
<p>Przedstawiamy zakres usług naszej firmy.</p>
<h2>Projektowanie stron</h2>
<p>Tworzymy responsywne strony internetowe.</p>
<h2>Administracja serwerami</h2>
<p>Zajmujemy się konfiguracją i utrzymaniem serwerów WWW.</p>
W tym przykładzie <h1> określa główny temat strony, a znaczniki <h2> dzielą treść na sekcje. Znaczniki <p> zawierają zwykły tekst opisowy.
Czego unikać?
Nie należy budować struktury tekstu za pomocą samego <div> ani wymuszać wyglądu akapitów formatowaniem CSS bez odpowiednich znaczników semantycznych. Przykład niepoprawnego podejścia:
<div style="font-size: 32px; font-weight: bold;">Oferta firmy</div>
<div>Przedstawiamy zakres usług naszej firmy.</div>
Taki kod może wyglądać podobnie w przeglądarce, ale nie przekazuje poprawnej informacji o hierarchii treści.
Zapamiętaj
Do organizacji tekstu na stronie używaj nagłówków <h1>-<h6> oraz akapitów <p>. Wygląd ustawiaj w CSS, ale znaczenie i strukturę zapisuj w HTML.