Kategoria:HTML

Zrozum nagłówki w HTML

  • Czas potrzebny na przeczytanie:1 minuta
  • Opublikowane:3 czerwca 2022

First things first - nagłówki służą do opisywania poszczególnych sekcji dokumentu. HTML dysponuje poziomami nagłówków w przedziale od 1 do 6.

Poziom nagłówka nie oznacza “mocy” nagłówka, a jego kolejność w hierarchii. Nagłówki powinny następować po sobie w odpowiedniej kolejności, bez pomijania żadnego poziomu.

Nagłówek pierwszego stopnia <h1> powinien znaleźć się stronie tylko jeden raz. Przykładowa struktura na nagłówków:

<h1>Pierwszy poziom</h1>
<h2>Drugi poziom</h2>
<h3>Trzeci poziom</h3>
<h2>Drugi poziom</h2>
<h3>Trzeci poziom</h3>
<h4>Czwarty poziom</h4>
<h4>Czwarty poziom</h4>
<h5>Piąty poziom</h5>

Ani jego wygląd, ani rozmiar nie powinien mieć nic wspólnego z jego poziomem. Na przykład <h4> może być mniejszy od <h3>, ale nie musi. Nie powinno się przekładać rozmiaru nagłówka na poziom.

Nagłówki poza wizualnym rozdzieleniem sekcji, służą również jako punkty nawigacyjne dla czytników ekranowych. Użytkownicy korzystający z czytników często przeskakują przez stronę, korzystając właśnie z nagłówków.

A co z SEO? Trzeba przyznać, że nagłówki pomagają lepiej pozycjonować stronę, ale nie powinniśmy przekładać tego nad ich faktyczny zamysł. Nie powinno się „maksymalizować SEO” przez dodawanie np. kilku <h1>, czy wrzucania niepotrzebnego tekstu mającego poprawić wyniki wyszukiwania.

Pamiętajmy o tym, że strony tworzymy z myślą o użytkownikach, nie wyszukiwarkach - nawet sam Google o tym wspomina!

O autorze

Olaf Sulich

Olaf jest Frontend Developerem, blogerem i nosi rybacki kapelusz 🎩 Pisze o wszystkim co związane z frontendem, ale nie boi się backendu i designów 🦾 Ma głowę pełną pomysłów i nadzieję, że znajdziesz tutaj coś dla siebie!

Frontlive School

Wyróżnij się na rynku pracy, nie wydając ani złotówki!

Wchodzę

Dołącz do społeczności!

Bo w programowaniu liczą się ludzie

Wchodzę