Aby utworzyć nagłówek w HTML, należy użyć specjalnych znaczników od <h1> do <h6>, które definiują odpowiednio nagłówki od najwyższego do najniższego poziomu. Nagłówki te służą do organizowania i hierarchizacji treści na stronie internetowej, poprawiają jej czytelność oraz ułatwiają przeglądanie zarówno użytkownikom, jak i wyszukiwarkom.
Hierarchia nagłówków HTML
W HTML wyróżnia się sześć poziomów nagłówków:
<h1>– nagłówek główny (najważniejszy, największy);<h2>– nagłówek drugiego poziomu (sekcji);<h3>– nagłówek trzeciego poziomu (podsekcji);<h4>,<h5>,<h6>– kolejne, coraz mniej ważne nagłówki.
Przykład zastosowania nagłówków –
<h1>Tytuł strony lub artykułu</h1>
<h2>Główna sekcja</h2>
<h3>Podsekcja</h3>
<h4>Dalszy podział treści</h4>
Znaczenie i rola nagłówków
- Struktura treści – nagłówki pomagają uporządkować tekst, tworząc czytelną hierarchię podobną do spisu treści w książce;
- Nawigacja – dzięki nagłówkom użytkownicy mogą łatwo odnaleźć interesujące ich fragmenty na stronie;
- Optymalizacja SEO – poprawna struktura nagłówków jest korzystna dla wyszukiwarek, które analizują je przy rozumieniu tematyki i ważności poszczególnych części strony.
Przykładowa struktura dokumentu HTML z nagłówkami
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład strony z nagłówkami</title>
</head>
<body>
<h1>Jak zrobić nagłówek w HTML?</h1>
<h2>Czym są nagłówki?</h2>
<p>Nagłówki to elementy strukturyzujące treść...</p>
<h2>Hierarchia nagłówków</h2>
<h3>Poziom pierwszy – <h1></h3>
<p>Najważniejszy nagłówek, używany na stronie tylko raz...</p>
<h3>Poziom drugi – <h2></h3>
<p>Używany do oznaczania głównych sekcji...</p>
<h2>Praktyczne zastosowania</h2>
<h3>Artykuł blogowy</h3>
<p>Każdy rozdział zaczyna się od <h2>, podpunkty to <h3>...</p>
</body>
</html>
Zasady prawidłowego stosowania nagłówków
- Na każdej podstronie powinien znaleźć się tylko jeden nagłówek
<h1>, będący tytułem strony; - Nagłówki powinny być używane w sposób hierarchiczny – nie należy „przeskakiwać” poziomów (np. z
<h1>od razu do<h4>); - Nagłówki powinny być krótkie, konkretne i odzwierciedlać zawartość danej sekcji;
- W nagłówkach warto umieszczać kluczowe słowa związane z tematem strony (ważne dla SEO).
Przykłady zastosowań nagłówków
Struktura artykułu informacyjnego
<h1>Jak dbać o zdrowie?</h1>
<h2>Aktywność fizyczna</h2>
<h3>Bieganie</h3>
<h3>Jazda na rowerze</h3>
<h2>Dieta</h2>
<h3>Warzywa i owoce</h3>
<h3>Białka</h3>
Strona firmowa
<h1>Usługi informatyczne ABC</h1>
<h2>Oferta</h2>
<h2>O nas</h2>
<h2>Kontakt</h2>
Podsumowanie możliwości
- <h1>–<h6> pozwalają nadać strukturę tekstowi na stronie;
- Zapewniają lepszą czytelność i nawigację;
- Pomagają w pozycjonowaniu i dostępności strony.
Nagłówki są podstawą przejrzystej i efektywnej prezentacji informacji w serwisie internetowym – kluczowe jest ich świadome i logiczne stosowanie.
