Nagłówek HTML

Nagłówek HTML

<h1>

Wyobraźmy sobie, że jesteśmy dziennikarzami i piszemy artykuły do gazety. Każdy artykuł musimy zaopatrzyć w nagłówek, oraz przynajmniej jeden akapit. Podobnie jest ze stroną internetową, dłuższy tekst zazwyczaj będziemy poprzedzali ciekawym nagłówkiem, który przyciągnie wzrok czytelnika.

Nagłówki tworzymy używając elementów od <h1> do <h6>. Litera h jest skrótem od ang. słowa heading, czyli nagłówek. Cyfry od 1 do 6 oznaczają hierarchię nagłówków, zaczynając od 1 jako najważniejszego w hierarchii. Może łatwiejsze do wytłumaczenia będzie to jeżeli nagłówek nazwiemy tytułem.

Artykuł zazwyczaj składa się z tytułu głównego i kilku podtytułów. Może się również przydarzyć, że wystąpią podtytuły podtytułów i w tym przypadku potrzebna nam będzie hierarchia. Możemy ją uzyskać poprzez zastosowanie cyfr. Elementem <h1> opatrzymy główny tytuł, elementy <h2> posłużą nam jako tytuły drugiego rzędu, a elementy <h3> jako tytuły trzeciego rzędu.

W ten sposób możemy posługiwać się tytułami, aż do elementu <h6>, jednak w praktyce najczęściej używa się elementów od <h1> do <h3>. Różnice pomiędzy nagłówkami dostrzeżemy nie tylko w kodzie, ale również na ekranie. Domyślnie nasze nagłówki będą różniły się rozmiarem czcionki.

Nagłówek H1

Nagłówek H2

Nagłówek H3

Nagłówek H4

Nagłówek H5
Nagłówek H6

Tekst, który uprzednio napisaliśmy na naszej stronie możemy teraz zamieścić jako nagłówek <h1> i zobaczyć co się stanie, otwierając naszą stronę w przeglądarce. Natomiast zapis w naszym dokumencie będzie wyglądał następująco:

<!DOCTYPE html>
<html>
     <head>
     </head>
     <body>
         <h1>Moja pierwsza strona internetowa.</h1>
     </body>
</html>

Moja pierwsza strona internetowa

Jeśli masz czas i ochotę sprawdź mój nowy projekt Zdalny Ninja. Jest to serwis poświęcony Pracy Zdalnej. Zachęcam Cię już teraz do wpisania się na listę osób, które jako pierwsze dowiedzą się, że projekt wystartował.