nagłówki H1–H6

Nagłówki H1–H6 to hierarchia tytułów porządkująca strukturę treści i wspierająca dostępność.

Nagłówki H1–H6 jako mapa treści strony

Nagłówki H1–H6 tworzą uporządkowaną hierarchię informacji w dokumencie HTML. Ich zadaniem jest pokazanie, które fragmenty tekstu są najważniejsze, które rozwijają główny temat, a które opisują bardziej szczegółowe zagadnienia. Dzięki temu treść może być łatwiejsza do przeczytania dla człowieka, poprawniej interpretowana przez wyszukiwarkę oraz bardziej dostępna dla osób korzystających z czytników ekranu. Oznaczenia H1, H2, H3, H4, H5 i H6 nie są wyłącznie sposobem zmiany wielkości liter. Każde z nich pełni funkcję elementu strukturalnego.

H1 powinien opisywać główny temat konkretnej strony. Zwykle występuje jeden raz i wskazuje nadrzędny tytuł dokumentu, na przykład „Naprawa laptopa w Warszawie” albo „Jak wybrać dysk do komputera”. H2 dzieli stronę na główne części, takie jak wprowadzenie, objawy usterki, sposoby diagnozy i zalecenia. H3 służy do wyodrębniania podrozdziałów wewnątrz sekcji H2. Kolejne poziomy, czyli H4, H5 i H6, można stosować wtedy, gdy materiał rzeczywiście wymaga dalszego podziału.

Najważniejsza jest logiczna kolejność, a nie wykorzystanie wszystkich sześciu poziomów. Prosta strona informacyjna może mieć jeden H1, kilka H2 i kilka H3. Dodawanie H4–H6 tylko po to, aby uzyskać mniejszy tekst, zwykle pogarsza czytelność. Rozmiar, krój i kolor nagłówka powinny być ustalane w arkuszu stylów CSS, natomiast sam znacznik powinien informować o znaczeniu danego fragmentu. Właściwa hierarchia pozwala prześledzić temat od ogółu do szczegółu.

Nagłówki H1–H6 w HTML i ich relacje hierarchiczne

W kodzie HTML nagłówki zapisuje się za pomocą znaczników od <h1> do <h6>. Przykładowa struktura artykułu może wyglądać następująco: H1 określa tytuł główny, H2 opisuje najważniejsze obszary tematyczne, a H3 rozwija poszczególne punkty w obrębie wybranego obszaru. Jeżeli sekcja dotycząca diagnozy ma podpunkty „sprawdzenie zasilania” i „test pamięci”, oba mogą otrzymać poziom H3. Następne uszczegółowienie, na przykład lista etapów testu pamięci, może zostać poprzedzone H4.

Hierarchię warto rozumieć jak spis treści, a nie jak numerację akapitów. H2 powinien należeć do H1, H3 do poprzedzającego H2, a H4 do odpowiedniego H3. Nie oznacza to jednak, że każdy poziom musi pojawić się po kolei w każdej sekcji. W praktyce lepiej pominąć niepotrzebny poziom niż tworzyć sztuczne podziały. Zbyt głęboka struktura może utrudnić orientację, zwłaszcza na krótkiej stronie.

Ważna jest także różnica między nagłówkiem a tekstem wyróżnionym wizualnie. Pogrubiony akapit, duży napis zdefiniowany przez CSS albo element <div> z większą czcionką nie zastępuje semantycznego nagłówka. Programy odczytujące strukturę dokumentu rozpoznają przede wszystkim znaczniki H1–H6. Z tego powodu tytuły sekcji powinny być zapisane właściwym elementem HTML, a nie jedynie sformatowane tak, by wyglądały jak nagłówki.

Nie należy też wybierać poziomu na podstawie długości tytułu. H2 nie oznacza krótkiego nagłówka, a H5 nie jest przeznaczony wyłącznie dla małego tekstu. Poziom wynika z miejsca danego fragmentu w strukturze informacji. Tytuł opisujący główny dział pozostaje H2 nawet wtedy, gdy zawiera wiele słów, natomiast szczegółowy podpunkt może być H3 niezależnie od swojej długości.

Nagłówki H1–H6 a typowe problemy z czytelnością i dostępnością

Jednym z częstych błędów jest użycie kilku elementów H1 dla niezależnych wizualnie bloków, mimo że opisują one tę samą stronę. W niektórych nowoczesnych układach technicznych może to być dopuszczalne, jednak w typowym artykule, opisie usługi lub poradniku prostsza i bardziej przewidywalna jest jedna główna etykieta H1. Następnie treść warto podzielić na tematyczne H2, a dalsze szczegóły oznaczyć H3.

Inny problem polega na pomijaniu poziomów bez uzasadnienia, na przykład przejściu z H2 od razu do H5. Taki zapis nie zawsze powoduje błąd techniczny, ale może sugerować czytnikowi ekranu, że w strukturze brakuje kilku nadrzędnych części. Jeżeli nie ma potrzeby tworzenia H3 i H4, można użyć H2 albo zwykłego akapitu. Semantyka powinna odzwierciedlać zależności między tematami.

Nagłówki nie powinny być przeładowane słowami kluczowymi ani powtarzać identycznych fraz w każdej sekcji. Lepszy efekt daje jasne nazwanie rzeczywistej zawartości. Zamiast kilku podobnych tytułów można zastosować między innymi „Objawy problemu z uruchamianiem”, „Sprawdzenie podzespołów” oraz „Działania po zakończeniu testów”. Każdy nagłówek powinien pomagać w szybkim odnalezieniu informacji.

Warto kontrolować także długość i zrozumiałość tytułów. Nagłówek może być konkretny, lecz nie powinien zamieniać się w cały akapit. Dobrze sprawdzają się sformułowania wskazujące temat i zakres sekcji. Jeżeli pod nagłówkiem umieszczana jest lista, należy zadbać o to, aby wszystkie jej elementy rzeczywiście rozwijały zapowiedziany temat. Spójność między tytułem a treścią zwiększa zaufanie do całej strony.

Nagłówki H1–H6 i praktyczne wskazówki tworzenia struktury

Przed napisaniem tekstu można przygotować prosty szkic w formie drzewa. Najpierw ustala się jeden temat główny, następnie trzy lub cztery większe obszary, a później szczegółowe pytania, na które ma odpowiadać każda sekcja. Taki plan ogranicza powtarzanie informacji i pomaga utrzymać właściwy porządek. Przykładowo artykuł o awarii komputera może obejmować H1 z nazwą problemu, H2 dotyczące objawów, H2 dotyczące przyczyn, H2 dotyczące działań użytkownika oraz H2 opisujące moment, w którym potrzebna jest profesjonalna pomoc.

W nagłówkach warto używać języka naturalnego. Tytuł „Co oznacza wolne uruchamianie systemu” jest bardziej pomocny niż ciąg przypadkowych fraz. Jednocześnie nie należy tworzyć nagłówków, które obiecują odpowiedź, a następnie nie rozwijają jej w treści. Każdy poziom powinien pełnić funkcję orientacyjną: informować, czego można spodziewać się w następnym fragmencie.

Przy tworzeniu strony dobrze jest sprawdzić strukturę także bez stylów wizualnych. Jeżeli po wyłączeniu CSS nadal można odczytać kolejność tematów, hierarchia prawdopodobnie została zaplanowana poprawnie. Pomocne bywa również przejrzenie listy nagłówków w narzędziach deweloperskich lub w dodatku do kontroli dostępności. Taki przegląd pozwala wykryć brak H1, przypadkowe powtórzenia, puste tytuły i nieuzasadnione przeskoki poziomów.

Do nagłówka nie powinno się wkładać całych zdań opisujących wszystkie szczegóły. Szczegóły lepiej pozostawić w akapicie, tabeli albo liście. Z kolei zbyt ogólny tytuł, taki jak „Informacje” lub „Opis”, niewiele mówi osobie przeglądającej spis sekcji. Przydatny nagłówek wskazuje konkretny zakres, na przykład „Różnice między dyskiem HDD i SSD” albo „Czynności przed oddaniem sprzętu do diagnozy”.

Nagłówki H1–H6 i moment zgłoszenia sprzętu do serwisu

Hierarchia nagłówków ma znaczenie również na stronach opisujących problemy ze sprzętem. Użytkownik często szuka tylko jednego fragmentu: przyczyny nagrzewania, sposobu wykonania kopii danych, oznak uszkodzenia dysku albo informacji o dalszej diagnostyce. Czytelne H2 i H3 pozwalają szybko przejść do właściwej części bez konieczności analizowania całego tekstu. Warto więc układać sekcje zgodnie z naturalnym przebiegiem decyzji: rozpoznanie objawów, bezpieczne czynności, ograniczenia samodzielnych działań i przesłanki do skorzystania z pomocy.

Do serwisu można zgłosić się wtedy, gdy komputer samoczynnie się wyłącza, nie uruchamia się prawidłowo, wyświetla powtarzające się komunikaty, działa niestabilnie po zalaniu albo wydaje nietypowe dźwięki. Ostrożność jest szczególnie ważna, gdy urządzenie zawiera istotne dane, a kolejne próby uruchomienia mogą pogłębić problem. Przed przekazaniem sprzętu warto zanotować objawy, moment ich występowania oraz ostatnie wykonywane czynności. Pomaga to uporządkować proces rozpoznania usterki.

W razie potrzeby można skorzystać z pomocy firmy Warszawskie Pogotowie Komputerowe 24/7, opisując wcześniej rodzaj urządzenia i obserwowane zachowanie. Przydatna, dobrze zbudowana strona serwisowa powinna prowadzić od jasnego nagłówka H1 przez tematyczne H2 aż do szczegółowych H3, tak aby informacje o zgłoszeniu, przygotowaniu danych i możliwych następnych krokach były łatwe do odnalezienia. Taka struktura wspiera zarówno użytkownika, jak i osoby odpowiedzialne za utrzymanie czytelnego kodu HTML.