Zaawansowane sekcje w HTML
- Czas potrzebny na przeczytanie:2 minuty
- Opublikowane:
Po co tak właściwie korzystamy z <section>
, nie wystarczy zwykły <div>
? Część osób powie "bo semantyka" - ale co ta semantyka nam daje? Strona przecież wygląda identycznie.
Powinniśmy korzystać z "semantycznych" tagów, nie bo "ktoś tak powiedział", tylko dlatego, że są one potrzebne technologiom asystującym, np. czytnikom ekranowym.
Kiedy używać <section>
? Gdy mamy na stronie, tak jak nazwa mówi, jakąś sekcję, która powinna mieć w sobie nagłówek. Na tym większość materiałów odnośnie tego tagu się kończy, ale jest pewien haczyk...
Załóżmy sytuację, w której mamy <div>
a w nim nagłówek, analogicznie zróbmy z <section>
. Pod względem struktury HTML, druga opcja faktycznie reprezentuje sekcję. Różnic natomiast nie ma dla technologii asystujących - odbierają one te dwa bloki kodu identycznie.
Newsletter dla Frontend Developerów 📮
Tutaj całe na biało wchodzą Aria Roles, wcześniej deklarowało je się w ten sposób 'role="main"', obecnie większość ról da się zastąpić "semantycznymi" tagami HTML, np. <main>
. Tak jak <main>
odpowiada roli main
, tak <section>
reprezentuje rolę region
- pod pewnym warunkiem.
Żeby sekcja uzyskała status "region" potrzebuje tzw. accessible name, możemy je dodać za pomocą aria-label
lub aria-labelledby
(preferowane).
Po co nam te całe role? Dzięki nim użytkownicy technologii asystujących mogą rozróżnić, że "hej tu jest nawigacja, tu główna część strony, tutaj formularz, a tutaj sekcja z nagłówkiem". Warto również pamiętać o nagłówkach w sekcjach, bo to przez nie najczęściej użytkownicy nawigują się po stronach.
A jeśli to do Ciebie nie przemawia (a powinno), to nawet z perspektywy czystego kodu warto powiedzieć innemu programiście "ten element strony jest sekcją".
Powinniśmy jednak używać sekcji z rozwagą - nie chcemy wprowadzać użytkownika w błąd mówiąc mu, że coś jest sekcją, a tak naprawdę na stronie występuje np. w formie jakiejś pobocznej treści (<aside>
).