znaczniki semantyczne podziału strony
Konstruowanie strony za pomocą znacznika <div> pozwala zdefiniować dowolny układ strony. Za jego pomocą można podzielić stronę internetową na odpowiednie fragmenty i przydzielić im określone funkcje. Duża ilość tych znaczników powoduje, że kod staje się mniej czytelny.
W specyfikacji HTML5 została wprowadzona nowa grupa poleceń, których zadaniem jest dokładne precyzowanie fragmentów tworzonego dokumentu.
Są to znaczniki <header> <nav> <article> <section> <aside> <footer>, przeznaczone do opisywania zawartej na stronie treści.
Wymienione znaczniki są elementami semantycznymi, które same nic nie robią, ale „mówią” przeglądarkom, jaką rolę w układzie dokumentu odgrywa określony fragment.
Za ich pomocą można nadać stronie zrozumiałą i logiczną strukturę.
znacznik <header>
Znacznik <header> powinien zawierać część nagłówkową strony lub sekcji.
Często jest to złożony element, w którym występują śródtytuły, część nawigacyjna, formularz wyszukiwarki lub logo.
Może być umieszczany w innych elementach, może też zawierać inne elementy.
Każda sekcja strony lub każdy artykuł może posiadać swój własny nagłówek.
Dlatego warto jest definiować dla każdego nagłówka dodatkowy atrybut w postaci identyfikatora id.
Ułatwi on później zlokalizowanie wybranego elementu, a także definiowanie stylów w kaskadowym arkuszu stylów.
Znaczniki muszą występować w odpowiedniej kolejności. Nagłówek <H2> musi być poprzedzony nagłówkiem <H1>,
podobnie <H3> nagłówkiem <H2>.
przykład:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kontynenty</title>
</head>
<body>
<header>
<h1>Europa</h1>
</header>
<p>
Opis kontynentu.....
</p>
</body>
</html>
znacznik <nav>
Znacznik <nav> stosowany jest przy tworzeniu menu strony.
W tworzonym dokumencie może ich wystąpić wiele.
Może być umieszczany w innych elementach, może też zawierać inne elementy (najczęściej znaczniki listy, z których powstaje menu).
przykład:
<header>
<h2>Kontynenty</h2>
<nav>
<ul>
<li>Europa</li>
<li>Afryka</li>
<li>Azja</li>
<li>Australia</li>
</ul>
</nav>
</header>
znacznik <section>
Sekcje są logicznymi częściami strony. Tworzy się je za pomocą znacznika <section>.
Sekcja powinna zawierać treści o określonej tematyce i służyć do ich grupowania.
W treści powinien wystąpić tytuł, mogą się też pojawić śródtytuły.
Jest to uniwersalny znacznik, który powinien być używany, gdy inne znaczniki nie pasują w danym miejscu konstruowanej strony.
Może być umieszczany w innych elementach, może też zawierać inne elementy.
Sekcja może składać się z wielu akapitów, ale jej tematyka powinna być spójna. Nie powinna być stosowana jako pojemnik na elementy różnego rodzaju.
przykład:
<header>
<h1>Podróż dookoła świata</h1>
</header>
<section>
<h2>Europa</h2>
<p>Europa… </p>
<h2>Afryka</h2>
<p>Afryka… </p>
</section>
znacznik <article>
Znacznik <article> powinien być stosowany do treści, które stanowią spójną całość, niezależną od innych treści,
i mogą być samodzielną częścią dokumentu, np. komentarzem pod artykułem, wpisem na blogu.
W artykule powinna być umieszczana właściwa treść strony.
W dokumencie może pojawić się więcej niż jeden taki znacznik.
Może on być umieszczony w innym znaczniku <article>, może też zawierać inne elementy.
Każdy artykuł powinien posiadać nagłówek, treść i stopkę.
przykład:
<article id="wpis">
<header>
<h2>tytuł artukułu</h2>
<p>opis artykułu</p>
</header>
<p>
pierwszy akapit
</p>
<p>
drugi akapit
</p>
<footer>
<p>stopka artykułu</p>
</footer>
</article>
znacznik <aside>
Znacznik <aside> oznacza zamknięty fragment, zawierający różne treści,
który został odseparowany od głównej zawartości strony, ale może odwoływać się do tejże zawartości.
Może być używany do tworzenia panelu bocznego, który zawiera treść uzupełniającą, np. cytat, dygresję lub przypis.
Może być umieszczany w innych elementach, ale sam może też zawierać inne elementy.
przykład:
<article>
<h2>Grecja</h2>
<p>Zwiedzając Europę, planujemy odwiedzić Grecję z jej pięknym położeniem i ciekawą historią.</p>
<aside>
<h3>Porada</h3>
<p>Gdy odwiedzasz Grecję, uważaj na upały.</p>
</aside>
</article>
znacznik <footer>
Znacznik <footer> powinien reprezentować stopkę dokumentu lub sekcji.
Element ten najczęściej zawiera informacje dotyczące dokumentu, np. informację o prawach autorskich, dane kontaktowe, grupę odnośników lub elementy nawigacyjne.
Może być umieszczany w innych elementach, ale może też zawierać inne elementy.
Ponieważ stopek może być wiele, podobnie jak dla innych znaczników, dla tworzonej stopki można zdefiniować atrybut identyfikatora id.
przykład:
<footer id="stopka_s">
<p> kontakt: rrogacz@technikum.pl, autor: Ryszard Rogacz</p>
</footer>
przykład strony zbudowanej za pomocą znaczników semantycznych
Za pomocą zdefiniowanych w HTML5, omówionych powyżej, nowych znaczników można zbudować stronę internetową o przejrzystej strukturze.
Utworzymy następujący kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Układ</title>
</head>
<body>
<div>
<header>
<p>znacznik header</p>
</header>
<nav>
<p>znacznik nav</p>
</nav>
<section>
<h2>znacznik section1</h2>
<article>
<h3>nagłówek article1</h3>
<p>znacznik article</p>
</article>
</section>
<section>
<h2>znacznik section2</h2>
<article>
<h3>nagłówek article2</h3>
<p>znacznik article</p>
</article>
</section>
<footer>
<p>znacznik footer</p>
</footer>
</div>
</body>
</html>
Kod ten generuje następującą stronę:
Po dołączeniu zewnętrznego arkusza stylów nasza strona przyjmuje następujący wygląd:
