Kategoria:HTML

Zaawansowane sekcje w HTML

  • Czas potrzebny na przeczytanie:2 minuty
  • Opublikowane:6 czerwca 2022

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>).

O autorze

Olaf Sulich

Olaf jest Frontend Developerem, blogerem i nosi rybacki kapelusz 🎩 Pisze o wszystkim co związane z frontendem, ale nie boi się backendu i designów 🦾 Ma głowę pełną pomysłów i nadzieję, że znajdziesz tutaj coś dla siebie!

Frontlive School

Wyróżnij się na rynku pracy, nie wydając ani złotówki!

Wchodzę

Dołącz do społeczności!

Bo w programowaniu liczą się ludzie

Wchodzę