Tag SECTION

Definicja Tagu SECTION (HTML5)

Element <section> w specyfikacji HTML5 definiuje semantyczną sekcję w dokumencie, która stanowi tematyczną grupę treści, zazwyczaj opatrzoną nagłówkiem. Jest to element blokowy reprezentujący ogólny fragment dokumentu lub aplikacji, który nie posiada bardziej specyficznego znacznika semantycznego (takiego jak <article>, <nav> czy <aside>).

Użycie: Tematyczne Bloki Treści

Tag ten powinien być stosowany do logicznego grupowania powiązanych tematycznie treści. Przykłady implementacji obejmują rozdziały długiego artykułu, poszczególne zakładki w interfejsie użytkownika (tabbed content) lub moduły strony typu Landing Page (np. sekcje "O nas", "Cennik", "Kontakt"). Zgodnie z wytycznymi W3C, każda sekcja powinna w idealnym przypadku zawierać nagłówek (h1-h6) identyfikujący jej temat.

Atrybuty i Dostępność (Accessibility)

Choć <section> posiada domyślną rolę region (gdy posiada dostępną nazwę), dla zapewnienia pełnej dostępności w drzewie a11y zaleca się jawne stosowanie atrybutu aria-labelledby. Atrybut ten wskazuje na ID nagłówka znajdującego się wewnątrz sekcji, co pozwala technologiom asystującym na precyzyjną identyfikację i nawigację po regionach strony.

Semantyka i Outline Algorithm

W kontekście SEO i algorytmu zarysu dokumentu (Document Outline), <section> tworzy nową sekcję zarysu (sectioning content). Oznacza to, że zagnieżdżone w nim nagłówki rozpoczynają nowy, lokalny poziom hierarchii, niezależny od nagłówków zewnętrznych. Roboty indeksujące interpretują to jako wyodrębnioną, spójną część merytoryczną witryny.

Różnica: SECTION vs. DIV

Podstawowa różnica ma charakter semantyczny. Element <div> jest kontenerem neutralnym, pozbawionym znaczenia semantycznego, służącym wyłącznie do celów prezentacyjnych, stylowania (CSS) i budowania układu (layout wrapper). Element <section> niesie informację o strukturze treści. Zasadą "dobrego tonu" w kodowaniu jest używanie <section> tylko wtedy, gdy zawartość bloku mogłaby naturalnie znaleźć się w spisie treści dokumentu.