Sekcje w HTML - tego nie nauczą Cię na kursie 🙈
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.
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>
).
☎️ Kontakt
Twój feedback jest dla mnie bardzo wartościowy, dlatego będzie mi mega miło jak dasz znać jak Ci się podobał dzisiejszy mail 🙏🏼
Jeśli miałbyś jakieś pytania, to po prostu odpisz na tego maila lub napisz na jednym z sociali 👇
Do usłyszenia!