Lekcja 2.1: Nagłówki (<h1> - <h6>)
Czym są nagłówki HTML?
Nagłówki HTML to znaczniki używane do definiowania tytułów i podtytułów na stronie internetowej. Służą do strukturyzowania treści i nadawania jej hierarchii, co ułatwia użytkownikom i wyszukiwarkom zrozumienie organizacji informacji na stronie.
HTML oferuje sześć poziomów nagłówków, od <h1> (najważniejszy) do <h6> (najmniej ważny). Każdy poziom reprezentuje inny stopień ważności w strukturze dokumentu.
Znaczniki nagłówków
<h1>: Najważniejszy nagłówek, zazwyczaj używany jako główny tytuł strony lub artykułu. Powinien być użyty tylko raz na stronie.<h2>: Nagłówek drugiego poziomu, używany do oznaczania głównych sekcji strony.<h3>: Nagłówek trzeciego poziomu, używany do podsekcji w ramach sekcji oznaczonych<h2>.<h4>: Nagłówek czwartego poziomu, do dalszego podziału treści.<h5>: Nagłówek piątego poziomu.<h6>: Nagłówek szóstego poziomu, najniższy poziom w hierarchii.
Przykład użycia nagłówków
Poniższy przykład pokazuje, jak można użyć różnych poziomów nagłówków do stworzenia logicznej struktury dokumentu:
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Przykład użycia nagłówków</title>
</head>
<body>
<h1>Główny tytuł strony</h1>
<p>Wprowadzenie do tematu strony...</p>
<h2>Sekcja 1: Pierwszy ważny temat</h2>
<p>Treść dotycząca pierwszego tematu...</p>
<h3>Podsekcja 1.1</h3>
<p>Szczegóły dotyczące podsekcji 1.1...</p>
<h3>Podsekcja 1.2</h3>
<p>Szczegóły dotyczące podsekcji 1.2...</p>
<h2>Sekcja 2: Drugi ważny temat</h2>
<p>Treść dotycząca drugiego tematu...</p>
<h4>Pod-podsekcja 2.1.1</h4>
<p>Bardziej szczegółowe informacje...</p>
</body>
</html>Znaczenie semantyczne nagłówków
Nagłówki mają kluczowe znaczenie semantyczne. Informują przeglądarkę i technologie wspomagające (np. czytniki ekranu) o strukturze i hierarchii treści. Użytkownicy czytników ekranu często nawigują po stronie, przeskakując między nagłówkami, aby szybko znaleźć interesujące ich sekcje.
Dlatego ważne jest, aby używać nagłówków zgodnie z ich przeznaczeniem semantycznym, a nie tylko dla uzyskania efektu wizualnego (np. większej czcionki). Do stylizacji tekstu należy używać CSS.
Kluczowe zasady używania nagłówków:
- Używaj
<h1>tylko raz na stronie jako główny tytuł. - Zachowaj logiczną hierarchię nagłówków (nie przeskakuj poziomów, np. z
<h2>do<h4>bez<h3>). - Nie używaj nagłówków do formatowania zwykłego tekstu – do tego służą inne znaczniki i CSS.
- Upewnij się, że treść nagłówków jest zwięzła i trafnie opisuje zawartość danej sekcji.
Nagłówki a SEO
Wyszukiwarki internetowe, takie jak Google, analizują nagłówki, aby zrozumieć strukturę i tematykę strony. Prawidłowe użycie nagłówków, zwłaszcza <h1> i <h2>, zawierających relevantne słowa kluczowe, może pozytywnie wpłynąć na pozycjonowanie strony w wynikach wyszukiwania (SEO).
Używanie nagłówków zgodnie z ich semantycznym znaczeniem pomaga wyszukiwarkom lepiej indeksować treść i prezentować ją użytkownikom w bardziej zrozumiały sposób.
Domyślny wygląd nagłówków
Przeglądarki internetowe domyślnie wyświetlają nagłówki różnymi rozmiarami czcionki i pogrubieniem, aby wizualnie oddać ich hierarchię. <h1> jest największy, a <h6> najmniejszy. Pamiętaj jednak, że domyślny wygląd można (i często należy) modyfikować za pomocą CSS, aby dopasować go do designu strony.
Zadanie praktyczne (z rozwiązaniem)
Zadanie: Stwórz strukturę strony o ulubionym zwierzęciu, używając nagłówków <h1>, <h2> i <h3>.
Rozwiązanie:
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Moje ulubione zwierzę - Kot</title>
</head>
<body>
<h1>Koty - Nasi domowi towarzysze</h1>
<p>Koty są jednymi z najpopularniejszych zwierząt domowych na świecie.</p>
<h2>Charakterystyka kotów</h2>
<p>Koty są znane ze swojej niezależności, ale potrafią być również bardzo przywiązane do swoich opiekunów.</p>
<h3>Wygląd fizyczny</h3>
<p>Koty występują w wielu rasach, różniących się wielkością, umaszczeniem i długością sierści.</p>
<h3>Zachowanie</h3>
<p>Typowe zachowania kotów to mruczenie, polowanie na zabawki i długie drzemki.</p>
<h2>Pielęgnacja kota</h2>
<p>Opieka nad kotem wymaga zapewnienia mu odpowiedniej diety, pielęgnacji sierści i regularnych wizyt u weterynarza.</p>
</body>
</html>Dodatkowe zadania do samodzielnego wykonania:
- Dodaj do powyższego przykładu nagłówek
<h4>w sekcji "Pielęgnacja kota", opisujący np. "Żywienie". - Stwórz strukturę nagłówków dla fikcyjnego artykułu o podróżach, używając co najmniej czterech poziomów nagłówków.
- Spróbuj użyć nagłówka
<h6>i zaobserwuj jego domyślny wygląd w przeglądarce. - Celowo pomiń poziom nagłówka (np. użyj
<h4>bezpośrednio po<h2>) i zastanów się, dlaczego jest to niezalecane.
Najczęściej zadawane pytania
Ile razy można użyć znacznika <h1> na stronie?
Zgodnie z najlepszymi praktykami SEO i dostępności, znacznik <h1> powinien być użyty tylko raz na stronie, jako główny tytuł opisujący jej zawartość. Pomaga to wyszukiwarkom i użytkownikom zrozumieć główny temat strony.
Czy muszę używać wszystkich poziomów nagłówków od <h1> do <h6>?
Nie, nie musisz używać wszystkich sześciu poziomów. Ważne jest, aby używać ich w logicznej kolejności i nie przeskakiwać poziomów (np. nie używać <h3> bezpośrednio po <h1>). Używaj tylu poziomów, ile jest potrzebne do stworzenia przejrzystej struktury.
Czy wygląd nagłówków można zmienić?
Tak, domyślny wygląd nagłówków (rozmiar czcionki, pogrubienie, marginesy) można dowolnie modyfikować za pomocą CSS. Pamiętaj jednak, aby używać nagłówków zgodnie z ich znaczeniem semantycznym, a nie tylko dla efektu wizualnego.
Jak nagłówki wpływają na SEO?
Nagłówki pomagają wyszukiwarkom zrozumieć strukturę i tematykę strony. Umieszczenie słów kluczowych w nagłówkach, zwłaszcza <h1> i <h2>, może pozytywnie wpłynąć na pozycjonowanie strony w wynikach wyszukiwania dla tych fraz.
Czy mogę użyć <h2> przed <h1>?
Chociaż technicznie jest to możliwe, jest to niezgodne z zasadami semantyki i logiki struktury dokumentu. Nagłówek <h1> powinien reprezentować główny tytuł, a <h2> i kolejne poziomy powinny go rozwijać, tworząc hierarchię.