<section>
Tematyczna część dokumentu, zwykle z własnym nagłówkiem.
- Wyświetlanie
- block
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść przepływu (flow content)
Przykład
#<section aria-labelledby="faq-title">
<h2 id="faq-title">Najczęstsze pytania</h2>
<p><strong>Czy potrzebuję doświadczenia?</strong> Nie, zaczynamy od zera.</p>
<p><strong>Ile to trwa?</strong> Pierwszą stronę zbudujesz w tydzień.</p>
</section>Definicja i zastosowanie
#Element <section> grupuje treść wokół jednego tematu: rozdział artykułu, zakładkę w interfejsie, blok „Cennik” albo „FAQ” na stronie głównej. Sekcja powinna mieć nagłówek, bo to on mówi, o czym jest dana część.
Różnica między <section> a <article> jest prosta: artykuł jest samodzielny, sekcja jest częścią czegoś większego. A kiedy potrzebujesz kontenera wyłącznie do stylowania, bez żadnego znaczenia, sięgnij po <div>.
Sekcja z nazwą dostępną dla technologii asystujących (na przykład przez aria-labelledby wskazujące jej nagłówek) staje się regionem, do którego czytniki ekranu pozwalają szybko przejść.
Składnia
#<section>
<h2>Tytuł sekcji</h2>
…
</section>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
section {
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
#- Każda sekcja powinna mieć nagłówek. Sekcja bez tytułu to zwykle sygnał, że wystarczy
<div>. - Łącz sekcję z nagłówkiem przez
aria-labelledby, żeby czytniki ekranu podawały jej nazwę.
Powiązane hasła
#- <article>Samodzielna, zamknięta treść, którą można przeczytać i udostępnić osobno.
- <div>Uniwersalny kontener blokowy bez znaczenia, do grupowania elementów i stylowania.
- <main>Główna, unikalna treść strony. Na stronie jest tylko jeden widoczny.
- <aside>Treść poboczna, luźno związana z otoczeniem: ramka, pasek boczny, przypis.
- <h1>–<h6>Nagłówki sześciu poziomów, od najważniejszego h1 do najmniej ważnego h6. Razem tworzą spis treści strony.
Widzisz błąd albo brakuje przykładu? Napisz do nas.