Nagłówki HTML, najważniejsze elementy

Czym są nagłówki HTML?

Nagłówek to element HTML, który spotykamy na każdej stronie internetowej. Najważniejszym nagłówkiem jest H1, najmniej istotnym pod względem hierarchii jest nagłówek H6.

Nagłówek H1 jest często spotykany w sekcji Hero, czyli pierwszym widoku po załadowaniu strony internetowej. Nagłówek H2 może być wykorzystany jako tytuł kolejnej sekcji na stronie, kolejny nagłówek czyli H3 może być zagnieżdżony w sekcji H2, aż stworzymy odpowiedni podział tekstu.

Struktura nagłówków H1-H6

<h1>Tekst nagłówka H1</h1> <h2>Tekst nagłówka H2</h2> <h3>Tekst nagłówka H3</h3> <h4>Tekst nagłówka H4</h4> <h5>Tekst nagłówka H5</h5> <h6>Tekst nagłówka H6</h6>

Nagłówki różnią się od siebie wielkością tekstu, domyślne wartości w przypadku nagłówka H1 to: font-size: 2em, font-weight: bolder. Wysokość w pixel’ach to 32px. Każdy z nagłówków można nadpisać własnym stylem CSS, w przypadku strony marcinzogrodnik.pl nagłówek H1 na stronie główej wynosi 72px, ma inny font, oraz kolor.

Dlaczego nagłówki HTML są ważne?

Powyższy nagłowek to H2, jest większy niż tekst na stronie, tworzy kolejną dobrze czytelną sekcję.

Wygląd

Nagłówek H3, podzieliłem sekcję H2 na dwie części, “Wygląd” i “Pozycjonowanie”.

Wspomniałem wyżej o tym, że wygląd każdego nagłówka można zmienić. Możesz ustawić wielkość każdego nagłówka taką samą, wtedy nie będą się od siebie różnić i użytkownik Twojej strony nie zauważy różnicy.

Jest to błąd, ponieważ trudniej wtedy nawigować po stronie, ciężko stwierdzić która sekcja jest ważniejsza, która mniej. Warto więc zostawić domyślne wartości nagłówków, lub zmienić je w sposób podobny do oryginalnego, czyli nagłówek H1 pozostaje największy, H2 mniejszy itd.

Pozycjonowanie

Tutaj nagłówki HTML są bardzo ważne pod względem pozycjonowania. Bot wyszukiwarki wchodzi na Twoją stronę internetową i szuka nagłówków H1-H6. Na tej podstawie może stworzyć odpowiednią mapę Twojej strony. Dodając słowa kluczowe w H1 masz większą szansę na wyższą pozycję w google pod wybranym słowem. Tak samo w przypadku H2 czy H3.

Struktura nagłówków

Poniżej znajdziesz przykłąd dobrej struktury nagłówków na stronie internetowej. Użyłem tylko jednego nagłówka H1, dwa nagłówki H2 i pod każdym dodałem jeszcze nagłówek H3.

<h1>Nagłówek H1</h1> <p>Tekst pod najważniejszym nagłówkiem</p> <h2>Przykłady</h2> <h3>Przykład 1</h3> <p>Opis przykładu 1</p> <h3>Przykład 2</h3> <p>Opis przykładu 2</p> <h2>Produkty</h2> <h3>Produkt 1</h3> <p>Opis produktu 1</p> <h3>Produkt 2</h3> <p>Opis produktu 2</p>

Dobre praktyki

  • Zawsze używaj tylko jednego tagu H1 na podstronie. Jeżeli masz kilka podstron np. “O nas”, “Galeria”, “Blog” to każda z tych stron powinna mieć tylko jeden nagłówek H1.
  • Nie przeskakuj nagłówków, zawsze zaczynaj od nagłówka H1, potem H2 itd. Zaczynanie od H3 jest bardzo złą praktyką.
  • Nie używaj nagłówków do powiększania tekstu na stronie, jeśli chcesz użyć większego tekstu użyj odpowiedniej klasy css i użyj font-size.

Podsumowanie

Nagłówki HTML pomagają przede wszystkim Twoim odwiedzającym odróżnić różne sekcje na stronie, dobrze dobrane wielkości oraz kolory nagłówków mogą np. zwiększyć sprzedaż produktów na stronie czy bardziej zaciekawić osoby czytające Twój blog.

Nie można zapomnieć również o robotach indeksujących Twoją stronę, to jest tak samo ważne jak warstwa prezentacyjna. Nie popełniaj błędów z hierarchią, dodawaj odpowiednie słowa kluczowe i obserwuj jak Twoja strona jest coraz wyżej w wynikach wyszukiwania.

Marcin ✌️

Zróbmy razem fajną stronę dla Twojej firmy

Nie masz strony internetowej, albo potrzebujesz zmian na swojej aktualnej?

Podaj swój numer telefonu, oddzwonię do Ciebie i porozmawiamy.