Element section języka HTML 5

20 czerwca 2012
1 gwiadka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek

Jesteśmy grupą kumpli używających języka HTML 5 i piszących o tym języku. Otrzymujemy sporo pytań na temat elementu section, dzięki czemu sami też zdaliśmy sobie sprawę, że cały czas używaliśmy go w sposób niewłaściwy.

Nasz błąd polegał na tym, że elementu section używaliśmy do formatowania znajdującej się w nim treści lub oddzielania treści głównej od elementów nawigacyjnego (nav), nagłówka (header), stopki (footer) itd. Jednak do tego służy element div, a nie section .

Oto co mówi specyfikacja na temat elementu section

Element section reprezentuje sekcję dokumentu lub aplikacji i nie powinien być używany w roli ogólnego kontenera. Jeżeli jest potrzebny jakiś element do celów sformatowania treści lub zastosowania skryptów, zaleca się używanie elementu div.

Element section to porcja treści, która mogłaby być przechowywana jako jeden rekord w bazie danych. Spójrz na poniższy przykład, a przy okazji zauważ, że nagłówek jest wewnątrz elementu section, a nie przed nim:

<section>
<h1>Dowolny nagłówek</h1>
pozostała treść
</section>

Elementu section nie powinno się używać (z nielicznymi wyjątkami) jeżeli nie ma dla niego naturalnego nagłówka. Sprawdź swój kod w narzędziu do wyświetlania struktury dokumentów HTML5. Jeżeli zdarzy się, że będą widoczne „niezatytułowane sekcje” (ang. untitled section), to znaczy, że coś jest nie tak. Natomiast elementy nav i aside nie muszą mieć nagłówków.

Element section jest również najogólniejszym z elementów strukturalnych. Przed jego użyciem należy się zastanowić, czy w danym miejscu nie byłby lepszy element article, którego definicja jest następująca:

element stanowiący niezależną część dokumentu, strony, aplikacji czy też witryny internetowej. Może to być post na forum, artykuł w czasopiśmie lub gazecie, komponent logowania na stronie internetowej, komentarz wysłany przez użytkownika, interaktywny widżet, czy też jakaś inna treść.

Zawartość główna

W języku HTML 5 dostępne są elementy do oznaczania takich fragmentów treści, jak nawigacja, branding, prawa autorskie. Dlatego też może wydawać się dziwne, że nie można specjalnie oznakować najważniejszej części strony, czyli jej treści głównej.

Ale co by to dało? Jeżeli chcesz sformatować treść, użyj elementu div. Aplikacje typu czytniki ekranu bez trudu znajdą treść główną, ponieważ jest to pierwsza rzecz na stronie, która nie jest nagłówkiem, nawigacją czy też stopką.

Podstawowe zasady używania elementu section

Co prawda zawsze są jakieś wyjątki, ale zasady te powinny się sprawdzić w 99 % podanych poniżej przypadków:

  • Nie używaj elementu section do formatowania lub jako punktu zaczepienia dla skryptów — od tego jest element div.
  • Nie używaj tego elementu, jeżeli bardziej odpowiednie są elementy article, aside lub nav.
  • Elementu section używaj wyłącznie, gdy na jego początku naturalnie pasuje jakiś nagłówek.
  • Oto co zaleca poprawiona wersja specyfikacji (z dnia 16 września):

Zachęca się twórców stron do używania elementu article zamiast section, gdy treść, która będzie w nim zawarta może być udostępniana w kanałach typu RSS.

Ponieważ posty i komentarze na blogach są często udostępniane na zewnątrz (na innych blogach, jako linki na Twitterze, poprzez reddit itd.) powinny one być oznaczane jako artykuły (article).

Kieruję podziękowania dla Lachlana Hunta z Opery za sprawdzenie warstwy merytorycznej tego artykułu.

Autor: Bruce Lawson

Źródło: http://html5doctor.com/the-section-element/

Tłumaczenie: Mariusz Zdziech

Treść tej strony dostępna jest na zasadach licencji CC BY-NC 2.0 UK

Dyskusja

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *