Nowe semantyczne znaczniki w HTML5

W świecie aplikacji internetowych, a w szczególności jeśli mowa o poprzednich wersjach HTML-a nie da się nie zauważyć chronicznej choroby, która powoduje, że projektanci stron internetowych umieszczają elementy w dodatkowych znacznikach div z identyfikatorami typu „banner”, „menu” czy „slidebar”. W gronie specjalistów od projektowania stron www, zjawisko te nazwano chorobą „Divitis„, która rozprzestrzeniła się jak zaraza z jednego programisty na drugiego.

Specyfikacja HTML5 zawiera lekarstwo na szerzącą się epidemie. Nowe znaczniki semantyczne przeznaczone do opisywania zawartej treści na stronie www, umożliwiają dzielenie strony na logiczne części. Warto z tych elementów korzystać.

Element <header>

Może być wykorzystywany w roli kontenera nagłówka strony, ale równie dobrze może się w nim znaleźć wstęp do artykułu lub innej sekcji. Na stronie może być dowolna liczba tych elementów – np. po jednym w każdym elemencie <section>.

Element <footer>

Powinien zawierać informacje o sekcji, w której się znajduje. Mogą pojawiać się w nim odnośniki do innych dokumentów oraz informacje o prawach autorskich. podobnie jak element <header>, może występować wielokrotnie w obrębie tej samej strony. Może stanowić zarówno stopkę całego bloga, jak również stopkę opublikowanego wpisu.

Element <nav>

Jest wykorzystywany do do definiowania głównych bloków nawigacji, łączy do innych stron lub części wewnątrz tej samej strony. Ma tworzyć główne elementy nawigacji strony, więc może występować w dowolnych miejscach z dużą grupą linków.

Element <section>

Wyznacza standardową sekcje dokumentu lub aplikacji. W tym elemencie najczęściej umieszczamy składniki wizualne. Dzięki temu początek i koniec każdego składnika są wyraźnie zaznaczone. Każdy element <section> powinien zawierać nagłówek h2 – h6. Jeśli nie przewidujesz nagłówka to lepszym rozwiązaniem będzie użycie elementu <div>.

Element <article>

Nie pomyl elementu <article> z elementem <section>, co często się zdarza. Element <article> zawiera automatyczny fragment treści strony, powinien się w nim znaleźć artykuł np. post blogu. W przypadku elementu <article> możliwe jest ich zagnieżdżanie, ale musisz mieć na uwadze, że zagnieżdżona zawartość powinna odwoływać się do treści w komponencie nadrzędnym. Tak samo jak w elemencie <section> powinien znajdować się nagłówek h2 – h6.

Element <aside>

Zawiera elementy w pewien sposób powiązane z treścią wokół niego. Mogą się w nim pojawiać wybrane cytaty, reklamy oraz elementy nawigacji. Najczęściej elementy <aside> występują w paskach bocznych i zawierają informacje typu, artykuły powiązane lub „klienci przy zakupie tego produktu, kupili również…”. Zasadniczo w elemencie <aside> można umieścić wszystko co nie jest powiązane z treścią główną, ale w ramach rozsądku.

Elementy <figure> i <figcaption>

Element <figure> stosuje się do oznaczania małych samodzielnych bloków. Natomiast element <figcaption> podaje się podpis do nadrzędnego elementu.

<figure class=”ImgBox”>
<img src=”img/image1″ alt=”moje zdjęcie” />
<figcaption class=”ImgPodpis”>Moje niesamowite zdjęcie</figcaption>
</figure>

Zastosowanie elementów <figure>, <figcaption> jest idealne, gdy trzeba dodać podpis pod obrazkiem albo kodem źródłowym.

Elementy <details> i <summary>

Elementy służą do prostego otwarcia i zamknięcia jego zawartości. Funkcję tę należy jednak traktować jako alternatywę, nie posiada ona możliwości animacji i nie da się sprawić, aby zamykało się jedno okno i otwierało inne bez użycia JavaScript.

Reklamy

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj /  Zmień )

Zdjęcie na Google+

Komentujesz korzystając z konta Google+. Wyloguj /  Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj /  Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj /  Zmień )

Connecting to %s