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 Internetowej, 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 internetowej 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.
Komentarze
Prześlij komentarz