<h1>–<h6>
Nagłówki sześciu poziomów, od najważniejszego h1 do najmniej ważnego h6. Razem tworzą spis treści strony.
- Wyświetlanie
- block
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść frazowa (phrasing content)
Przykład
#<h1>Kurs JavaScript</h1>
<h2>Moduł 1: Zmienne</h2>
<h3>Deklarowanie zmiennych</h3>
<h3>Liczby i teksty</h3>
<h2>Moduł 2: Funkcje</h2>Definicja i zastosowanie
#Elementy od <h1> do <h6> oznaczają nagłówki. Cyfra to poziom: <h1> jest tytułem całej strony, <h2> oznacza główne rozdziały, <h3> ich podrozdziały i tak dalej. Razem tworzą konspekt dokumentu, czyli coś w rodzaju spisu treści.
Z tego spisu korzystają nie tylko wyszukiwarki. Wielu użytkowników czytników ekranu przegląda stronę, przeskakując od nagłówka do nagłówka, tak jak osoba widząca przebiega wzrokiem po śródtytułach. Dlatego poziom nagłówka dobieraj według jego miejsca w strukturze, a nie według rozmiaru czcionki, który i tak ustawisz w CSS.
Zasady są proste. Na stronie powinien być jeden <h1>, opisujący jej temat. Schodząc w głąb, nie przeskakuj poziomów, czyli po <h2> użyj <h3>, a nie od razu <h4>. Wracać możesz za to o dowolną liczbę poziomów, np. z <h4> do <h2>.
Przeglądarki pogrubiają nagłówki i nadają im rozmiary od 2em dla <h1> do 0.67em dla <h6>. Nie używaj nagłówka tylko po to, żeby tekst był duży i pogrubiony, np. przy sloganie reklamowym. Wtedy wystarczy akapit ostylowany w CSS.
Składnia
#<h1>Tytuł strony</h1>
<h2>Rozdział</h2>
<h3>Podrozdział</h3>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Więcej przykładów
#<h1>Nagłówek h1</h1>
<h2>Nagłówek h2</h2>
<h3>Nagłówek h3</h3>
<h4>Nagłówek h4</h4>
<h5>Nagłówek h5</h5>
<h6>Nagłówek h6</h6><article>
<h2 style="font-size: 1rem; margin: 0;">Kurs Python</h2>
<p style="margin: 4px 0 0;">Mały nagłówek karty to nadal h2, bo tak wynika ze struktury strony.</p>
</article>Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
h1, h2, h3, h4, h5, h6 {
display: block;
font-weight: bold;
}
h1 { font-size: 2em; margin-block: 0.67em; }
h2 { font-size: 1.5em; margin-block: 0.83em; }
h3 { font-size: 1.17em; margin-block: 1em; }
h4 { font-size: 1em; margin-block: 1.33em; }
h5 { font-size: 0.83em; margin-block: 1.67em; }
h6 { font-size: 0.67em; margin-block: 2.33em; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Każda strona powinna mieć jeden
<h1>z jej głównym tematem. - Nie przeskakuj poziomów w dół. Po
<h2>przychodzi<h3>, nawet jeśli bardziej podoba Ci się wygląd<h4>. - Wygląd nagłówka ustawiaj w CSS. Poziom ma wynikać ze struktury treści, a nie z rozmiaru czcionki.
Powiązane hasła
#- <hgroup>Łączy nagłówek z podtytułem, sloganem albo nadtytułem w jedną całość.
- <section>Tematyczna część dokumentu, zwykle z własnym nagłówkiem.
- <article>Samodzielna, zamknięta treść, którą można przeczytać i udostępnić osobno.
- <header>Wstęp do strony lub sekcji: logo, tytuł, nawigacja, dane autora.
- <title>Tytuł dokumentu widoczny na karcie przeglądarki, w zakładkach i jako nagłówek wyniku w wyszukiwarce.
- <p>Akapit tekstu.
Widzisz błąd albo brakuje przykładu? Napisz do nas.