Tutaj na początku samouczka ponownie zwrócono uwagę, że nie należy spodziewać się cudów od przedstawionych elementów. Pod względem wizualnym nie prezentują się one zbyt atrakcyjnie. Są jednak interesujące w kontekście tego, że umożliwiają logiczne i semantyczne strukturyzowanie dokumentów..
Obszary nawigacyjne
Przy użyciu elementu nav można semantycznie oznaczyć paski nawigacyjne lub inne obszary przeznaczone na dodatkowe elementy. Ten element służy głównie do oznaczania hiperłączy do innych stron lub dodatkowych informacji.
Przykład:
<nav> <a href="index.html">Strona główna</a> <a href="html5.html">Nauka HTML5</a> <a href="css.html">CSS</a> <a href="cms.html">Joomla!</a> <a href="wordpress.html">Wordpress</a> </nav>
Wewnątrz elementu nav można używać różnych elementów. Nadal można zdefiniować nawigację za pomocą list. Jednak inne elementy można również łatwo umieścić wewnątrz elementu nav. Element nav może również występować wiele razy w jednym dokumencie.
Podanie szczegółów
Kolejnym interesującym elementem jest details. Za jego pomocą można – jak sugeruje nazwa elementu – podać dodatkowe informacje na temat treści. Należy zauważyć, że element details staje się naprawdę interesujący dopiero w połączeniu z elementem summary. Więcej na ten temat można przeczytać w kolejnych informacjach.
Najpierw przykład użycia elementu details:
<article>
<details>
<summary>Odnośniki do artykułu...</summary>
<ul>
<li><a href="odnosniki1.html">Link 1</a></li>
<li><a href="odnosniki2.html">Link 2</a></li>
<li><a href="odnosniki3.html">Link 3</a></li>
</ul>
</details>
<details>
<summary>Informacje źródłowe do artykułu ...</summary>
<ul>
<li><a href="zrodlo1.html">Link 4</a></li>
<li><a href="zrodlo2.html">Link 5</a></li>
<li><a href="zrodlo3.html"">Link 6</a></li>
</ul>
</details>
</article>
Zawartość elementu details pozostaje ukryta przed odwiedzającym, dopóki nie kliknie na element summary znajdujący się wewnątrz elementu details.
Może to być interesujące na przykład w kontekście odtwarzacza wideo. Przykład na to:
<video id="film" width="320" height="180" autoplay>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>
<details open>
<summary>Pokaż/ukryj kontrolki odtwarzacza wideo</summary>
<p>
<button id="start" onClick="start()">Start/Pauza</button>
<button id="mute" onClick="mute()">Wycisz</button>
<button id="louder" onClick="louder()">Głośniej</button>
<button id="quieter" onClick="quieter()">Ciszej</button>
</p>
</details>
Po otwarciu strony widoczne jest początkowo tylko okno odtwarzacza.
Jeśli odwiedzający kliknie jednak na link Pokaż/Ukryj, zostaną wyświetlone zawartości zdefiniowane wewnątrz summary.
Według specyfikacji przeglądarki, jeśli nie zostanie znaleziony element summary, wyświetlany jest domyślna zawartość.
Interesujące jest również atrybut open dla details.
<details open> … </details>
Jeśli ten atrybut jest ustawiony, zawartość elementu summary jest widoczna przy wczytywaniu strony.
Podsumowanie
Teraz jeszcze raz bardziej szczegółowe spojrzenie na element summary.
<article>
<details>
<summary>Odnośniki do artykułu...</summary>
<ul>
<li><a href="odnosniki1.html">Link 1</a></li>
<li><a href="odnosniki2.html">Link 2</a></li>
<li><a href="odnosniki3.html">Link 3</a></li>
</ul>
</details>
<details>
<summary>Informacje źródłowe do artykułu ...</summary>
<ul>
<li><a href="zrodlo1.html">Link 4</a></li>
<li><a href="zrodlo2.html">Link 5</a></li>
<li><a href="zrodlo3.html"">Link 6</a></li>
</ul>
</details>
</article>
Wewnątrz znacznika summary definiuje się zawartość, która jeszcze nie jest otwarta, we współpracy z details. Dzięki summary można dodawać dodatkowe informacje, które są wyświetlane dopiero w razie potrzeby.
Oczywiście można również łatwo zrealizować obszary rozwijalne i składane za pomocą JavaScript. Jednak jeśli JavaScript jest wyłączony w przeglądarce, aplikacja nie będzie działać. Dlatego szerokie wsparcie dla znaczników details i summary byłoby pożądane.
Obrzeża i marginesy
Dodatkowe informacje, marginesy, odnośniki krzyżowe itp. możemy oznaczyć w HTML5 za pomocą znacznika aside. Zaznaczona tym sposobem zawartość znajduje się w kontekście całego dokumentu, ale nie jest mu bezpośrednio przypisana.
Zauważ, że specyfikacja HTML5 nie określa, jakie wymiary ma mieć obszar oznaczony poprzez znacznik aside. Dlatego zawartość aside może być np. marginesem, ale także paskiem bocznym.
Poniższy przykład przedstawia definicję obszaru aside.
<body>
<header>
<h1>PSD-Tutorials.de</h1>
</header>
<article>
<h2>Tworzenie aplikacji internetowych (Część 10): jQuery mobile (2)</h2>
<p>W tym samouczku zostanie stworzona pierwsza prawdziwa strona jQM. Wymaga to podstawowej struktury HTML, którą już poznaliście.</p>
<aside>
<h3>Więcej informacji</h3>
<ul>
<li><a href="#/fn1">Więcej informacji można znaleźć tutaj…</a></li>
</ul>
</aside>
</article>
<aside>
<nav>
<h2>Nawigacja</h2>
<ul>
<li><a href="#">Strona główna</a></li>
<li><a href="# ">Kontakt</a></li>
</ul>
</nav>
</aside>
</body>Dodawanie daty
Określone daty mogą być oznaczone specjalnie przy użyciu nowego elementu time. Ciekawą cechą tego elementu jest to, że datę można odczytać zarówno dla ludzi, jak i maszyn.
Dla ludzi daty wpisuje się w znacznik
<p>Spotkamy się dnia <time datetime="2014-04-15 19:00">15 kwietnia o 19:00</time>. </p>
Chciałbym jeszcze raz podkreślić, że w obecnych przeglądarkach nie ma początkowo żadnych zmian wizualnych, ale jest to tylko dla celów odczytu maszynowego.
Wyróżnienie tekstu
Z użyciem elementu mark istnieje możliwość wyróżnienia słów lub całych fragmentów tekstu wizualnie. W specyfikacji HTML5 wyraźnie wskazuje się, że element ten powinien być używany tylko w kontekście zawartości tekstowej. Ponadto musi on mieć określony związek z kontekstem.
Przykład:
<p>W tym samouczku zostanie stworzona pierwsza prawdziwa strona jQM. Wymaga to <mark>podstawowej struktury HTML</mark>, którą już poznaliście.</p>
Jak zostanie zaimplementowane wyróżnienie przez przeglądarki nie jest określone.
Google Chrome i Firefox używają jednak oba tła w kolorze żółtym.
Oznaczenia dialogów
W HTML5 myślano również o osobnym oznakowaniu dialogów. Służy temu element dialog. Na razie element dialog jest obsługiwany wyłącznie przez przeglądarki Safari i Google Canary, czyli wersję deweloperską przeglądarki.
Poniżej znajduje się również przykład:
<dialog id="dialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p>To jest zawartość okna dialogowego.</p>
<button id="hide">Zamknij</button>
</dialog>
<button id="show">Pokaż zawartość</button>
</div>
<script type="text/JavaScript">
(function() {
var dialog = document.getElementById('dialog');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('hide').onclick = function() {
dialog.close();
};
})();
</script>
Po kliknięciu przycisku, dialog staje się widoczny. Aby całość działała, w poprzednim przykładzie użyto kombinacji HTML5, CSS i JavaScript.
