HTML/CSS, Poradniki webdevelopera

Nagłówki HTML – Kluczowe zastosowanie i znaczenie

0

Wyobraź sobie że jesteś copywriterem, który pisze nowy artykuł na blog. Każda przygotowana sekcja musi posiadać swój specjalny nagłówek, który wprost określi co będzie się pod nim znajdować oraz dodatkowo skłoni czytelnika do zapoznania się z nim.

Z samymi nagłówkami miałeś/aś zapewne nieraz styczność, choćby w programach tekstowych takich jak Microsoft Word czy też Libre Writer. W przypadku wymienionych programów, nagłówki tworzymy poprzez zaznaczenie elementu a następnie nadanie mu pewnej „właściwości”.

W przypadku kodu HTML, nagłówki tworzymy poprzez znaczniki <Hx>. W standardzie przyjęło się, że często są wykorzystywane nagłówki z przedziału od <h1> do <h6>. Czym się różnią?

Różnice pomiędzy nagłówkami <h1> do <h6>

Pierwsza znacząca różnica to przede wszystkim kontekst i wielkość nagłówków. Nagłówek H1 oznacza wprost, że jest to nagłówek tytułowy, który powinien występować tylko raz w obrębie danego artykułu. Pozostałe nagłówki z przedziału <h2><h6> to nagłówki typowo śródtekstowe, które także różnią się wielkością, jednak opisują zagadnienie zaznaczone w nagłówku h1.

Przedstawimy przykład, który powinien lepiej przybliżyć działanie:

Jak stworzyć stronę internetową?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet

Kluczowe technologie

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet

Css

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet

Javascript

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet

PHP

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet

Jakich błędów unikać?

W przedstawionym przykładzie mamy następującą strukturę:

Nagłówki:

– Jak stworzyć stronę internetową? – H1
– Kluczowe technologie – H2
– Css – H3
– Javascript – H3
– PHP – H3
– Jakich błędów unikać? – H2

Jak widzimy, nagłówki powinny tworzyć pewien logiczny schemat dla czytelnika.

Tabela z nagłówkami

Tag HTML Wynik
<h1></h1> Nagłówek H1
<h2></h2> Nagłówek H2
<h3></h3> Nagłówek H3
<h4></h4> Nagłówek H4
<h5></h5> Nagłówek H5
<h6></h6> Nagłówek H6

Nagłówki a pozycja w wyszukiwarce Google

Warto także wspomnieć, że tworząc artykuły blogowe z logicznym schematem nagłówków, zwiększamy szansę na osiągnięcie lepszych wyników w wyszukiwarce Google.

Podsumowanie

Twórz teksty tak, aby dobrze się je czytało oraz każdy nagłówek wynikał z poprzedniego. Dla wyszukiwarki Google i czytelnika, schemat nagłówków jest bardzo istotny – przemyśl strukturę zanim chwycisz się za „mięso artykułu”. Zdajemy sobie sprawę, że rady są dość oczywiste, jednak warto je podkreślić. W przypadku pytań zapraszamy do pozostawienia komentarzy.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *