W aplikacji webowej dobry podział treści pomaga szybciej znaleźć funkcję, zrozumieć ekran i poruszać się po nim także za pomocą czytnika ekranu. Nagłówek drugiego poziomu, czyli element , porządkuje główne sekcje strony, ale jego rola nie kończy się na większym rozmiarze tekstu. Pokażę, jak używać go w HTML, aplikacjach .NET i interfejsach opartych na komponentach, jak łączyć go z H1 i H3 oraz jak uniknąć błędów osłabiających dostępność i czytelność.
Najważniejsze zasady pracy z nagłówkiem drugiego poziomu
- H2 oznacza główną sekcję znajdującą się pod tytułem strony lub widoku.
- Struktura H1, H2 i H3 powinna wynikać z hierarchii treści, a nie z rozmiaru fontu.
- CSS odpowiada za wygląd, natomiast znaczniki nagłówków przekazują sens dokumentu.
- W aplikacjach webowych H2 pomaga porządkować dashboardy, formularze, listy i panele administracyjne.
- Najczęstszy błąd to używanie pogrubionego tekstu albo przypadkowych poziomów zamiast semantycznych nagłówków.
Czym jest nagłówek h2 i jaką pełni funkcję
Element jest nagłówkiem drugiego poziomu. Najczęściej opisuje główną sekcję treści znajdującą się pod H1, czyli pod tytułem całej strony, artykułu albo widoku aplikacji.
Przykładowa struktura artykułu może wyglądać tak:
Zarządzanie użytkownikami
Lista użytkowników
Role i uprawnienia
Historia zmian
Każdy z tych nagłówków rozpoczyna osobny obszar informacji. Dzięki temu czytelnik nie musi przeglądać całego tekstu linia po linii, a technologie asystujące mogą wyświetlić listę sekcji i pozwolić przechodzić między nimi.
W praktyce nie traktuję H2 jako „większego tekstu”. To element opisujący strukturę dokumentu. Jeżeli tekst wygląda jak nagłówek, ale został zapisany jako zwykły akapit z pogrubieniem, wizualnie może być podobny, lecz semantycznie pełni zupełnie inną funkcję.
Jak budować hierarchię H1, H2 i H3
Najprostsza zasada jest taka, że H1 opisuje główny temat strony, H2 dzieli go na główne części, a H3 rozwija wybraną sekcję. Taki układ przypomina spis treści i pozwala szybko ocenić, czy treść ma logiczny porządek.
Przykład poprawnego układu
Panel klienta
Dane konta
Dane kontaktowe
Zmiana hasła
Zamówienia
Ostatnie zamówienia
Faktury
H3 należy do sekcji „Dane konta”, a nie do całej strony. Dlatego nie powinien pojawiać się bez wcześniejszego H2 tylko dlatego, że projektant uznał go za odpowiednio mały wizualnie.
Nie warto jednak kurczowo trzymać się poziomów wyłącznie z powodu wyglądu. Jeśli H2 jest zbyt duży, zmień jego styl w CSS. Nie wybieraj H3 zamiast H2 tylko po to, aby zmniejszyć czcionkę, ponieważ zmieniasz wtedy znaczenie elementu w strukturze dokumentu.
Czy na stronie może być więcej niż jeden H2
Tak. W typowym artykule, dashboardzie czy stronie ustawień kilka elementów H2 jest wręcz naturalne. Każdy z nich powinien jednak rozpoczynać odrębną, sensowną sekcję, a nie służyć jako ozdobny podpis nad pojedynczym przyciskiem.
W przypadku H1 najczęściej stosuję jeden główny tytuł dla strony lub widoku. Taki układ jest łatwy do zrozumienia dla użytkownika, zespołu programistycznego i narzędzi analizujących dokument.
Dlaczego H2 ma znaczenie dla dostępności
Osoby korzystające z czytników ekranu często poruszają się po stronie za pomocą listy nagłówków. Dobrze nazwane H2 pozwala im szybko przejść do sekcji „Metody płatności”, „Historia operacji” albo „Ustawienia powiadomień”, bez przeklikiwania wszystkich elementów interfejsu.
To samo pomaga osobom, które mają trudności z koncentracją, korzystają z klawiatury albo przeglądają stronę na małym ekranie. Nagłówek powinien opisywać zawartość sekcji, a nie tylko wyglądać atrakcyjnie.
Zamiast ogólnego tytułu „Informacje” lepiej napisać „Dane rozliczeniowe”, jeśli właśnie tego dotyczy formularz. Zamiast kilku identycznych nagłówków „Szczegóły” można użyć nazw wskazujących, czego użytkownik dowie się w danym miejscu.
Hierarchia powinna być logiczna
Nie chodzi o to, aby każda strona miała idealnie równy schemat. Chodzi o to, żeby poziomy nagłówków odzwierciedlały zależności między sekcjami. Przeskok z H2 do H4 bez wyraźnego powodu zwykle utrudnia orientację i może sugerować brakujący poziom pośredni.
Warto też uważać na komponenty wielokrotnego użytku. Karta produktu może zawierać tytuł zapisany jako H3 na jednej stronie, ale jako H2 w innym miejscu. W takiej sytuacji dobrze przekazywać poziom nagłówka jako parametr komponentu, zamiast wpisywać go na stałe.
Jak używać H2 w aplikacjach webowych
W aplikacjach internetowych nagłówki organizują nie tylko długie teksty. Porządkują również ekrany z formularzami, tabelami, filtrami, statystykami i komunikatami systemowymi. Na dashboardzie H2 może oznaczać „Sprzedaż w tym miesiącu”, „Ostatnią aktywność” albo „Zadania wymagające uwagi”.
Dobry nagłówek powinien odpowiadać na pytanie, co znajduje się w tej części interfejsu. Jeśli użytkownik widzi tabelę klientów, „Lista klientów” jest lepsze niż „Dane” albo „Moduł główny”, bo od razu określa zawartość.
Formularze i ustawienia
Rozbudowany formularz warto podzielić na logiczne grupy:
Utwórz konto
Dane podstawowe
Dane logowania
Taki podział jest czytelniejszy niż jeden wielki formularz z etykietami oddzielonymi wyłącznie odstępami. Przy bardzo złożonych grupach można dodatkowo użyć i , ponieważ te elementy lepiej opisują wzajemnie powiązane pola formularza.
Widoki dynamiczne i SPA
W aplikacjach SPA, czyli aplikacjach działających bez pełnego przeładowania strony, treść nagłówka może zmieniać się po przejściu do innego widoku. Framework, taki jak Blazor, Angular czy React, powinien wtedy aktualizować również strukturę DOM, a nie tylko tekst widoczny na ekranie.
Przykładowo widok „Edytuj produkt” powinien mieć własny H1, a jego sekcje mogą zaczynać się od H2. Jeśli komponent zostanie osadzony w kilku miejscach, trzeba sprawdzić, czy nie tworzy przypadkiem wielu głównych tytułów albo pustych nagłówków.
W aplikacjach .NET szczególnie łatwo przeoczyć ten problem przy renderowaniu warunkowym. Gdy sekcja nie ma danych, lepiej nie wyświetlać samego H2 bez treści pod spodem. Pusty lub osierocony nagłówek pogarsza orientację i może wyglądać jak błąd interfejsu.
H2 a SEO i wygląd strony
Struktura nagłówków pomaga wyszukiwarkom zrozumieć temat i podział treści, ale sam znacznik H2 nie jest magicznym sposobem na wyższą pozycję. Największą wartość daje wtedy, gdy nagłówki są zgodne z rzeczywistą zawartością, a tekst pod nimi odpowiada na potrzeby czytelnika.
Nie powtarzam tej samej frazy w każdym H2. Lepiej nazwać sekcje zgodnie z ich treścią, na przykład „Semantyczna struktura HTML”, „Błędy w aplikacjach SPA” i „Wpływ na dostępność”. Naturalna informacja jest ważniejsza niż mechaniczne nasycenie słowami kluczowymi.
Pod względem wizualnym można nadać H2 dowolny wygląd za pomocą CSS:
h2 {
font-size: 1.5rem;
line-height: 1.25;
margin-block: 2rem 0.75rem;
}Zmiana koloru, rozmiaru lub odstępów nie zmienia znaczenia elementu. To właśnie rozdzielenie treści od prezentacji jest jedną z podstaw dobrze zaprojektowanego HTML.
Przeczytaj również: ng command not found? Jak naprawić Angular CLI
Nie zastępuj H2 elementem div
W projektach opartych na bibliotekach UI często spotykam tytuły zapisane jako Jeśli biblioteka pozwala wskazać poziom nagłówka, korzystaj z tej możliwości. Gdy nie pozwala, lepiej stworzyć prosty własny komponent niż budować całą hierarchię za pomocą klas CSS i pogrubień. Najwięcej problemów wynika z traktowania nagłówków jako elementów czysto dekoracyjnych. Projektant zmniejsza lub zwiększa tekst, a programista dobiera znacznik według wyglądu. Efekt może być estetyczny, lecz struktura strony staje się trudna do zrozumienia. Podczas przeglądu gotowej strony sprawdzam najpierw samą listę nagłówków, bez oceniania kolorów i odstępów. Jeśli po przeczytaniu H1, H2 i H3 można odtworzyć sens strony, struktura zwykle jest dobra. Pomocne są też narzędzia deweloperskie oraz audyty dostępności, ale prosty test ręczny często wykrywa najbardziej oczywiste problemy. Na końcu przechodzę przez widok klawiaturą i sprawdzam, czy dynamiczne sekcje nie pojawiają się bez odpowiedniego kontekstu. W aplikacji webowej nagłówek powinien wspierać użytkownika dokładnie wtedy, gdy ekran staje się bardziej złożony. Dobrze użyty H2 nie poprawia strony dlatego, że jest większy od zwykłego tekstu. Działa, ponieważ nadaje treści czytelną hierarchię, wspiera dostępność i pomaga utrzymać porządek w kodzie komponentów. Przed publikacją warto zadać sobie trzy pytania: czy H2 opisuje realną sekcję, czy jego poziom wynika z hierarchii oraz czy użytkownik zrozumie jego znaczenie bez oglądania stylów CSS. Jeśli odpowiedź brzmi „tak”, ten element spełnia swoją funkcję zarówno w artykule, jak i w rozbudowanej aplikacji webowej.Najczęstsze błędy i szybka kontrola jakości
Mały element, który porządkuje cały widok
