Przejdź do treści

HTML5 - HTML

Sekcja <section>

Jak podzielić tematycznie obszerniejsze fragmenty dokumentu HTML5?

<section>...</section>

Sekcja dokumentu lub aplikacji to tematyczna grupa treści, zwykle zawierająca nagłówek. Przykładami sekcji mogą być: rozdziały książki lub pracy badawczej, przełączane zakładki okna dialogowego. Strona domowa może zostać podzielona na przykładowe sekcje: wprowadzenie, lista nowości, informacje kontaktowe. Treść sekcji może być dodatkowo podzielona na podsekcje - poprzez umieszczenie w elementach głównych sekcji dodatkowych znaczników SECTION. W takim przypadku mamy do czynienia z podrozdziałami. Nie ma żadnego ograniczenia co do liczby możliwych zagnieżdżeń podsekcji (w HTML 4.01 takim ograniczeniem był maksymalny poziom nagłówków tytułowych - H6).

Podział treści na sekcje jest niezwykle przydatny czytelnikowi. Akapity w obszernym tekście ułatwiają odbiór treści. Łatwiej jest oderwać na chwilę wzrok, po przeczytaniu całego akapitu, a potem szybko odnaleźć miejsce, gdzie skończyliśmy czytać. Przede wszystkim jednak każdy akapit zawiera tekst o nieco innej tematyce niż poprzedni. Natomiast sekcje składają się zwykle z akapitów, ale zawierają treść, której tematyka różni się dużo bardziej od poprzedniej sekcji niż tekst w kolejnych akapitach. Dodatkowo sekcje umożliwiają hierarchiczny podział treści w postaci rozdziałów, podrozdziałów itd. Koniec rozdziału (sekcji) książki jest dobrym miejsce na zakończenie czytania na dziś i powrócenie do niego następnego dnia.

Dobrym wyznacznikiem, gdzie powinno się wstawić znacznik sekcji, jest zadanie sobie pytania, czy do tego fragmentu strony potencjalnie ktoś chciałby wstawić odsyłacz do etykiety. Dlatego takie sekcje dobrze jest dodatkowo opatrzyć identyfikatorem, do którego będzie się można potem odnosić:

<section id="moja-sekcja">
	<h1>Moja sekcja</h1>
	...
</section>

(...)

Przejdź do: <a href="#moja-sekcja">Moja sekcja</a>

Sekcja nie powinna być używana jako ogólny pojemnik na elementy. Jeżeli istnieje potrzeba, aby zmienić wygląd kilku następujących po sobie elementów, należy do tego użyć znacznika DIV, który w odróżnieniu od SECTION, nie niesie ze sobą żadnego znaczenia semantycznego. W takim przypadku nadużywanie sekcji nie jest poprawne, gdyż zaburza strukturę automatycznego spisu treści dokumentu (zobacz: "Sekcje / Nagłówki sekcji" w rozdziale "Nowe elementy HTML5"). Ponadto znacznik SECTION został przeznaczony do tworzenia ogólnych sekcji dokumentu. Lepiej jest używać znaczników, które jak najbardziej szczegółowo opisują znaczenie treści. Dlatego jeżeli to tylko możliwe, zamiast SECTION należy używać znacznika ARTICLE.

Przykład <section>

Poniższy przykład może być częścią większego artykułu, opisującego komputery:

<section>
	<h2>Komputer stacjonarny</h2>
	<p>Najlepszy wybór dla osób, które korzystają z komputera w jednym miejscu. Wymaga stabilnego biurka i wolnej przestrzeni. W zamian oferuje bardzo dobre osiągi sprzętowe i ergonomiczną pracę.</p>
</section>
<section>
	<h2>Laptop</h2>
	<p>Zwany również notebookiem. Przydatny dla osób, które komputera używają głównie do pisania, a przy tym czasami pracują w różnych miejscach albo nie mają zbyt dużo wolnego miejsca w pomieszczeniu. Zapewnia przyzwoite osiągi sprzętowe.</p>
</section>

Tak przedstawione bloki tekstu są raczej zbyt obszerne, aby wstawić je w formie listy opisowej. Opisują nie tylko definicję terminów, ale również typowe sposoby użytkowania oraz główne zalety.
Z drugiej strony opisy są raczej za mało kompletne, aby zamiast znaczników SECTION użyć ARTICLE. Tak wyrwane z kontekstu sekcje, samodzielnie nie stanowiłyby raczej zbyt wartościowej treści.
Widzimy jednak, że bez wątpienia przykład ten grupuje tematycznie odmienne bloki tekstu, które przy tym zawierają nawet jawne nagłówki. Dlatego użycie tutaj znacznika DIV nie byłoby prawidłowe.

Pytania i odpowiedzi

Jak zrobić sekcję w HTML?

Sekcja dokumentu to tematyczna grupa treści, zwykle zawierająca nagłówek. Aby wstawić najprostszą sekcję w pliku HTML5, wystarczy objąć jej zawartość znacznikiem <section>...</section>.

Kiedy DIV a kiedy SECTION?

Znacznika DIV używamy, kiedy chcemy zmienić wygląd treści lub elementów, które się wewnątrz niego znajdują. Jego zawartość nie musi być w żaden sposób wewnętrznie powiązana ze sobą tematycznie. Natomiast element SECTION tworzy nową sekcję w dokumencie, czyli odrębny tematycznie rozdział na stronie. Stosuj go zawsze, kiedy chcesz przekazać dodatkowe znaczenie semantyczne do objętej nim zawartości.

Jak nazwać sekcje w HTML?

Aby zatytułować sekcję, należy zaraz na jej początku wstawić dowolny znacznik tytułu nagłówkowego: H1, H2, H3, H4, H5 lub H6.

Czy DIV to znacznik sekcji?

Nie, element DIV nie jest sekcją. W języku HTML5 jedynymi znacznikami, które tworzą nową sekcję, są: ARTICLE, ASIDE, NAV, SECTION.

Komentarze

Zobacz więcej komentarzy

Facebook