Znaczniki blokowe HTML5: header, nav, main, article, section, aside, footer, div
PROMOCJA WAKACJE 2024 – RABATY nawet do 66% …
Wydawnictwo Cyfrowe poswojsku.pl - cyberbezpieczeństwo, AI, RODO - ebooki:
Twoje bezpieczeństwo w świecie cyber i sztucznej inteligencji Część 1 Wprowadzenie
Twoje bezpieczeństwo w świecie cyber i sztucznej inteligencji Część 2 Cyberhigiena
Twoje bezpieczeństwo w świecie cyber i sztucznej inteligencji Część 3 Dziecko i Ty
AI w EDUKACJI Część I Praktyczny poradnik nie tylko dla nauczycieli
AI w EDUKACJI Część II Praktyczne pomysły na kreatywną naukę
Znaczniki blokowe HTML5 sekcja body: header, nav, main, article, section, aside, footer, div
Dawno, dawno temu, gdy dinozaury chodziły po ziemi, tworzenie bloków na stronach www było trywialnie proste. Istniał jeden podstawowy znacznik <div> </div>, za pomocą którego tworzone były struktury blokowe wewnątrz znacznika <body> </body>. Obecnie elementy blokowe możemy zrobić za pomocą dużo większej liczby znaczników. Znaczniki blokowe HTML5 sekcja body: header, nav, main, article, section, aside, footer, div Najczęstsze, zalecane, ułożenie elementów blokowych strony HTML5:
PODSTAWOWE ZNACZNIKI HTML5 (sekcja <body>)
ZNACZNIK HEADER
W HTML4 nagłówek opisany był jako:
<div id="header"> Treść nagłówka </div>
W HTML5 nagłówek to po prostu header:
<header> Treść nagłówka </header>
Znacznika <header> należy używać przede wszystkim jako nagłówka całej strony, a nie jako nagłówka pojedynczych elementów blokowych. W <header> znacznika umieścić można nagłówki H1-H6, logo strony, nawigację, itp.
Wspomnieliśmy, że znacznik <header> powinien zawierać informacje, które będą pomocne pod względem wprowadzenia do treści właściwej albo jeśli chodzi o nawigację. Przyjrzyjmy się teraz znacznikowi <nav>.
ZNACZNIK NAV
Stare podejście w HTML4:
<div id="nav"> </div>
W HTML5 należy napisać:
<nav> Nawigacja </nav>
Znacznik <nav> stosujemy tam, gdzie prezentujemy odnośniki do innych podstron, czyli zwykle jest to menu strony. Znacznik <nav> służy do wskazania głównych bloków nawigacyjnych. Dosyć często używany jest on także jak nawigacja w innych sekcjach poza <header>.
Jeżeli na stronie mamy menu z linkami do podstron oraz stopkę strony, w której umieścimy różne linki, to znacznika <nav> nie należy używać w drugim wypadku.
ZNACZNIK MAIN
<main> powinien zawierać w sobie główną treść dokumentu, zwykle bezpośrednio związana z tytułem i oczekiwaną zawartością strony. Znacznikiem MAIN nie obejmujemy żadnych stałych elementów powtarzających się w całym serwisie: menu nawigacyjnego, logo serwisu, bannerów, formularzy wyszukiwania, itp.
<main> może zawierać linki nawigujące do podsekcji głównej zawartości dokumentu, które nie powtarzają się na innych stronach. Na danej stronie www nie można umieścić więcej niż jednego elementu <main>. Nie można <main> umieszczać wewnątrz: ARTICLE, ASIDE, FOOTER, HEADER, NAV.
ZNACZNIKI: ARTICLE, SECTION I DIV
Każdy z tych znaczników tworzy kontener na wybranych fragmentach strony. Znacznik <article> to specjalny typ sekcji znacznika <section>. Obydwa są nowością w HTML5, natomiast znacznik <div>, który w HTML4 jako jedyny tworzył kontenery, w HTML5 nadal ma zastosowanie jako kontener. Różnice leżą w semantyce elementów:
<section> jest kontenerem - blokiem - zawierający ogólną treść strony, jest to ogólna sekcja strony www. Może być użyta w połączeniu z elementami: h1- h6 - celem wskazania struktury dokumentu.
<article> to główna treść strony www, niezależny, samodzielny blok zawierający treść główną strony, czyli taką po którą przybył internauta,
<div> to blok zawierający dowolną treść i jako jedyny z trzech wymienionych działa we wszystkich nawet najstarszych przeglądarkach, dlatego wielu twórców stron internetowych w dalszym ciągu używa tylko i wyłącznie div’a, co jest błędem z punktu widzenia zaleceń W3C.
ZNACZNIK ASIDE
<aside> to sekcja, w której umieszcza się treść powiązaną ze znacznikiem, w którym występuje, ale nie jest on wymagany, aby zrozumieć treść główną zadeklarowaną w znaczniku głównym. Najczęściej umieszcza się w tym znaczniku przypisy oraz reklamy.
ZNACZNIK FOOTER
W HTML4 pisaliśmy:
<div id="footer"> </div>
W HTML5 jest zapis:
<footer> Treść </footer>
<footer> to stopka elementu, w którym został użyty znacznik. Strona może zawierać więcej niż jeden znacznik footer, ale każdy musi być w innej sekcji (to znaczy musi być włożony do innego znacznika)
ZAMYKANIE ZNACZNIKÓW
Pamiętaj, że każdy z wymienionych znaczników musi być zamknięty.
<header> Treść nagłówka </header>
<nav> Elementy nawigacyjne </nav>
<section> Treść sekcji </section>
<main> Główna zawartość </main>
<article> Treść artykułu </article>
<div> Zawartość bloku </div>
<footer> Treść stopki </footer>
PODSUMUJMY:
Zalecane ułożenie elementów blokowych strony HTML5
Pamiętaj, że jest to jedna z popularniejszych struktur strony HTML5, ale nie jedyna.
Zobacz w menu podobne artykuły do: Znaczniki blokowe HTML5 sekcja body: header, nav, main, article, section, aside, footer, div
poswojsku.pl