Nowe atrybuty i znaczniki strukturalne w HTML5
Każdy, kto prowadzi stronę internetową, na której publikuje treści, zdecydowanie potrzebuje zastosowania struktury, którą dostarcza nam nowy standard HTML5. Na każdym blogu znajdziemy nagłówki, stopki, jak również różnorodne elementy nawigacyjne takie jak lista wpisów na blogu czy wpisy archiwalne, a także oczywiście artykuły czy inaczej mówiąc wpisy. W poniższym artykule opiszę znaczniki HTML5, których użyłem do stworzenia szkieletu strony blog-a firmowego.
Będziemy mieli do czynienia ze standardowym schematem strony, a nowością jest to, że zamiast implementować stronę blog-a przy użyciu znaczników DIV, użyjemy do tego odpowiednich znaczników opisujących poszczególne sekcje strony internetowej.
Jak widać na poniższym schemacie, nasza strona, którą chcemy stworzyć posiada typowe elementy tworzące strukturę blog-a, schemat zawiera nagłówek, pod którym znajduje się poziomy pasek nawigacji. Nasza sekcja główna zawiera artykuły, które zawierają nagłówek i stopkę, a także akapit tekstu albo treść wtrąconą. Nasz schemat zawiera również pasek boczny, który może zawierać dodatkowe elementy nawigacji. Ostatnim elementem naszej strony jest stopka z danymi kontaktowymi czy prawami autorskimi.
Zacznijmy od deklaracji typu dokumentu
W sytuacji kiedy chcemy użyć nowego standardu i nowych elementów HTML5, musimy zamieścić informacje o użytych znacznikach czytelnych dla przeglądarki i usług weryfikujących poprawność kodu. Podczas tworzenia nowego dokumentu musimy umieścić w nim prosty szablon HTML5.
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tytuł strony głównej</title>
</head>
<body>
</body>
</html>
Taki zapis deklaracji w zupełności wystarczy, by wskazać, że jest to dokument HTML5. Nowa deklaracja jest o wiele prostsza i łatwiej ją zapamiętać od poprzednich dłuższych i trudniejszych deklaracji poprzednich wersji języka znaczników.
Deklaracja typu dokumentu ma dwojaki cel:
- Po pierwsze, na podstawie deklaracji usługi weryfikacyjne poprawność kodu wybierają odpowiednie reguły, które musi użyć podczas działania usługi.
- Po drugie, typ deklaracji dokumentu wymusza na przeglądarce Internet Explorer 6, 7, 8 przejście w tryb standardowy.
Deklaracja typu dokumentu HTML5 spełnia obydwa wymagania i jest rozpoznawana nawet przez Internet Explorer 6.
Znacznik nagłówka <header>
Znacznik nagłówka nie należy mylić z nagłówkami h1, h2, h3. Nagłówek mogą zawierać dowolną treść, zaczynając od grafik typu logo, a kończąc na wyszukiwarce. Ja w prezentowanym schemacie, wykorzystam nagłówek do prezentacji tytułu blog-a i tytułów artykułu.
<header id="tytul" class="tytul-bloga">
<h1>Tytuł naszej strony głównej</h1>
</header>Podczas organizowania naszej strony internetowej musimy pamiętać, że każda z naszych sekcji czy artykuły mogą posiadać swoje własne nagłówki. Jedynie o czy musimy pamiętać, to że definiowany w nagłówku dodatkowy atrybut ID musi być inny żeby prawidłowo i jednoznacznie zdefiniować konkretny element.
Znacznik stopki <footer>
Znacznik footer wskazuje stopkę dokumentu lub sekcji sąsiadującej. Stopki na stronach internetowych były tworzone już wcześniej, służyły zwykle do publikowania takich informacji jak prawa autorskie czy dane właściciela strony. Specyfikacja HTML5 stanowi, że na naszej stronie internetowej może występować wiele stopek, które można tworzyć także w poszczególnych artykułach publikowanych na blogu.
Ze względu na to, że stopek na stronie może być więcej niż jedna, warto zdefiniować atrybut identyfikatora, tak samo jak uczyniliśmy to dla nagłówka, pomoże nam to jednoznacznie wskazać tę konkretną stopkę, gdy przyjdzie nam do określenia stylu dla elementu stopki.
<footer id="stopka" class="stopka-bloga">
<p>© 2014 krysgraf</p>
</footer>Nasza stopka zawiera jedynie datę praw autorskich, ale podobnie jak nagłówek, stopki na stronie mogą zawierać inne elementy, jak chociażby elementy nawigacji czy logo firmy.
Znacznik nawigacja <nav>
Jednym z kluczy do tego, by witryna internetowa zyskała powodzenie jest element odpowiedniego mechanizmu nawigacji. Jeżeli znalezienie odpowiednich informacji, które interesują użytkownika, okazują się zbyt trudne, użytkownik po prostu opuści stronę i przestanie korzystać z niej. Dlatego twórcy specyfikacji HTML5 doszli do wniosku, że należy zdefiniować odpowiedni znacznik dla danego elementu.
Sekcję nawigacji możemy dodać np. do naszego nagłówka tworzonego dokumentu. W sekcji nawigacji możemy umieścić łącza do strony głównej naszego bloga, czy do listy artykułów zamieszczonych na naszym blogu, a także do strony z danymi kontaktowymi
<header id="tytul" class="tytul-bloga">
<h1>Tytuł naszej strony głównej</h1>
<nav>
<ul>
<li><a href="/">Strona główna</a></li>
<li><a href="blog">Nasz blog</a></li>
<li><a href="kontakt>Kontakt</a></li>
</ul>
</nav>
</header>Podobnie jak w przypadku naszego nagłówka, strona internetowa może posiadać wiele stopek, które mogą zawierać elementy nawigacji. Częstą praktyką przy tworzeniu stron internetowych jest umieszczanie nawigacji w nagłówku i stopce, a więc warto też jednoznacznie je zdefiniować. Element stopki może zawierać łącza do innych elementów naszej strony niż nawigacja w nagłówku, w naszym przypadku umieścimy linki do strony głównej, do zakładki o nas i polityki prywatności. Wszystkie nasze elementy zostaną zdefiniowane w postaci kolejnej nieuporządkowanej listy.
<footer id="stopka" class="stopka-bloga">
<p>© 2014 krysgraf</p>
<nav>
<ul>
<li><a href="/">Strona główna</a></li>
<li><a href="o-nas">O nas</a></li>
<li><a href="polityka-prywatnosci>Polityka Prywatności</a></li>
</ul>
</nav>
</footer>Sekcje i artykuły
Sekcja to logiczne części strony internetowej. Aby wyznaczyć sekcję należy użyć elementu section, który ma na celu zastąpienie często nadużywanego elementu div do tworzenia logicznych sekcji strony.
<section id=''sekcja-strony">
</section>Jednak z sekcjami też nie należy przesadzać. Sekcje służą do logicznego grupowania publikowanych treści. W naszym przykładzie utworzymy sekcję, która będzie przechowywać wszystkie wpisy zamieszczone na naszym blogu. Z kolei musimy pamiętać o tym ze poszczególne wpisy nie powinny być umieszczone w oddzielnych sekcjach, do tego celu należy użyć bardziej odpowiedniego znacznika.
Znacznik artykułu
W celu opisywania własnej treści został stworzony znacznik article. W momencie tworzenia strony internetowej możemy definiować wiele różnorodnych elementów, takich jak nagłówki, stopki, elementy nawigacji, reklamy, listy wpisów na blogu i zakładki, łatwo jest zapomnieć o tym, że użytkowników interesuje w pierwszej kolejności treść publikowanych artykułów. Treść tę opisuje właśnie znacznik article.
<article class="wpis">
<header>
<h1>Tytuł artykułu</h1>
<time datetime="2014-10-02">2 września 2014r</time>
</header>
<p>Akapit naszego wpisu na stronie internetowej</p>
<footer>
<p><a href="komentarze:>10 komentarzy</a></p>
</footer>
</article>Czym się różni artykuł od sekcji?
Sekcja to logiczna część dokumentu. z kolei artykuł to rzeczywista treść, konkretny artykuł w magazynie, wpis na blogu czy pojedyncza informacja.
Nowe znaczniki <article> i <section> opisują swoją rzeczywistą zawartość. W sekcji może znajdować się wiele artykułów i odwrotnie , w artykule może znajdować się wiele sekcji. W sekcji znajduje się wiele artykułów, z kolei każdy artykuł może być podzielony na mniejsze sekcje. Sekcja to bardziej ogólny element, za pomocą którego można wyznaczyć logiczne grupy innych elementów.
Wtrącenia i paski boczne
Jeżeli chcemy nadać naszej treści głównej dodatkowego znaczenia, który wzbogaci nasz artykuł o cytaty, diagramy albo łącza związane z naszą treścią, należy je zdefiniować za pomocą znacznika aside.
<aside>
<p>Cytat w naszym artykule.</p>
</aside>W elemencie aside zostało zdefiniowane wtrącenie. Elementy wtrącenia należy zagnieżdżać w artykułach, ponieważ wtrącenie jest ściśle związane z tematem artykułu.
Teraz należy już tylko utworzyć sekcję z paskiem bocznym.
Wtrącenie to nie to samo co pasek boczny
W większości serwisów blogowych po prawej stronie znajduje się pasek boczny, który zawiera łącza do innych artykułów na blogu. zastosowanie znacznika aside do zdefiniowania paska bocznego było by w tym przypadku błędem. Oczywiście na siłę można by było wykonać taki zabieg, ale było by to wbrew specyfikacji. Znacznik aside przeznaczony jest do definiowania treści powiązanych z artykułem i stanowi odpowiednie miejsce do prezentowania łączy powiązanych z treścią główną, haseł czy cytaty.
W celu prawidłowego oznaczenia paska bocznego, który będzie zawierał nasze pozostałe wpisy wykorzystamy do tego znacznik section wraz ze znacznikiem nav.
<section id="pasek-boczny">
<nav>
<h3>Pozostałe wpisy</h3>
<ul>
<li><a href="tytul-artykulu">Tytuł artykułu</a></li>
</ul>
</nav>
</section>W ten sposób zdefiniowaliśmy kompletną strukturę bloga. Jedyne co nam zostało to zdefiniowanie odpowiednich stylów dla elementów wyznaczających tę strukturę, ale na to poświęcimy już inny artykuł.
Podsumowanie
Nowy standard HTML5 daje nam do dyspozycji grupę znaczników, które pozwalają na dokładniejsze opisanie struktury naszej strony internetowej. Dokładniejsze opisanie elementów przyczyniło się do tego, że pozbywamy się z naszej strony www tz. choroby div-iksowania. Oczywiście nowy standard HTML5 wprowadza do dokumentów więcej rozwiązań i grup znaczników, ale na to poświęcony zostanie inny artykuł.