<hgroup>
Łączy nagłówek z podtytułem, sloganem albo nadtytułem w jedną całość.
- Wyświetlanie
- block
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Jeden nagłówek
<h1>–<h6>oraz elementy<p>przed nim lub po nim
Przykład
#<hgroup>
<h1>CodeWorlds</h1>
<p>Nauka programowania jak gra przygodowa</p>
</hgroup>Definicja i zastosowanie
#Element <hgroup> łączy nagłówek z towarzyszącym mu tekstem: podtytułem książki, sloganem serwisu albo nadtytułem w stylu „Moduł 3 · Lekcja 5”. W środku umieszczasz dokładnie jeden nagłówek <h1>–<h6> oraz jeden lub więcej akapitów <p> przed nim lub po nim.
Dawniej <hgroup> grupował kilka nagłówków, np. <h1> i <h2>. Standard to zmienił: podtytuł zapisuje się teraz w <p>, dzięki czemu nie zaśmieca spisu nagłówków strony. Jeśli trafisz na poradnik z dwoma nagłówkami wewnątrz <hgroup>, ten zapis jest już nieaktualny.
Czytniki ekranu traktują podtytuł jak zwykły akapit, a w spisie nagłówków pojawia się tylko właściwy nagłówek. Sam element nie ma żadnego wyglądu, więc w CSS podtytułowi zwykle nadaje się mniejszą czcionkę i stonowany kolor.
Składnia
#<hgroup>
<h1>Tytuł</h1>
<p>Podtytuł</p>
</hgroup>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Więcej przykładów
#<hgroup>
<p style="margin: 0; font-size: 0.85rem; color: #f97316;">Moduł 3 · Lekcja 5</p>
<h2 style="margin-top: 4px;">Pętle i powtarzanie kodu</h2>
</hgroup>Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
hgroup {
display: block;
}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
#- Podtytuł zapisuj w
<p>, a nie w kolejnym nagłówku. - Nie opakowuj w
<hgroup>samotnego nagłówka bez podtytułu. Nic to nie wnosi. - Ostyluj podtytuł tak, żeby był wyraźnie drugorzędny, np. mniejszą czcionką i stonowanym kolorem.
Powiązane hasła
#- <h1>–<h6>Nagłówki sześciu poziomów, od najważniejszego h1 do najmniej ważnego h6. Razem tworzą spis treści strony.
- <header>Wstęp do strony lub sekcji: logo, tytuł, nawigacja, dane autora.
- <p>Akapit tekstu.
- <section>Tematyczna część dokumentu, zwykle z własnym nagłówkiem.
- <article>Samodzielna, zamknięta treść, którą można przeczytać i udostępnić osobno.
Widzisz błąd albo brakuje przykładu? Napisz do nas.