Di sini, pada awal tutorial, perlu ditekankan lagi bahwa Anda tidak boleh mengharapkan keajaiban dari elemen-elemen yang disajikan. Secara visual, elemen-elemen ini memang masih belum menarik. Namun tentu saja, hal ini menarik karena Anda dapat menggunakan elemen-elemen tersebut untuk mengatur struktur dokumen secara logis dan semantik.
Area Navigasi
Dengan menggunakan elemen nav, Anda dapat memberikan tanda semantik pada bilah navigasi atau area lain untuk elemen tambahan. Elemen ini dirancang terutama untuk menandai hyperlink ke halaman lain atau informasi tambahan.
Contoh:
<nav> <a href="index.html">Beranda</a> <a href="html5.html">Belajar HTML5</a> <a href="css.html">CSS</a> <a href="cms.html">Joomla!</a> <a href="wordpress.html">Wordpress</a> </nav>
Dalam nav, Anda dapat menggunakan elemen-elemen apa pun. Anda masih dapat menentukan navigasi menggunakan daftar. Namun elemen lain juga dapat dengan mudah digunakan di dalam nav. Juga, nav dapat muncul beberapa kali dalam satu dokumen.
Menentukan Rincian
Sebuah elemen menarik lainnya adalah details. Dengan demikian, Anda dapat memberikan informasi tambahan tentang suatu konten, seperti yang sudah dapat ditebak dari nama elemennya. Perhatikan bahwa elemen details menjadi benar-benar menarik ketika digunakan bersama dengan elemen summary. Lebih lanjut tentang elemen ini kemudian di bagian berikut.
Contoh penggunaan details:
<article>
<details>
<summary>Referensi untuk artikel...</summary>
<ul>
<li><a href="referensi1.html">Tautan 1</a></li>
<li><a href="referensi2.html">Tautan 2</a></li>
<li><a href="referensi3.html">Tautan 3</a></li>
</ul>
</details>
<details>
<summary>Sumber artikel...</summary>
<ul>
<li><a href="sumber1.html">Tautan 4</a></li>
<li><a href="sumber2.html">Tautan 5</a></li>
<li><a href="sumber3.html"">Tautan 6</a></li>
</ul>
</details>
</article>
Isi dari elemen details akan tetap tersembunyi dari pengunjung sampai mereka mengklik elemen summary yang terdapat di dalamnya.
Ini dapat menarik terutama dalam konteks pemutar video. Berikut adalah contoh:
<video id="video" 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>Sembunyikan/Tampilkan kontrol pemutar video</summary>
<p>
<button id="start" onClick="start()">Mulai/Jeda</button>
<button id="mute" onClick="mute()">Bisukan</button>
<button id="volume-up" onClick="volumeUp()">Suara Lebih Kencang</button>
<button id="volume-down" onClick="volumeDown()">Suara Lebih Pelan</button>
</p>
</details>
Saat halaman dimuat, hanya jendela pemutar yang terlihat.
Jika pengunjung mengklik tautan Sembunyikan/Tampilkan, konten yang ditentukan dalam summary akan ditampilkan.
Menurut spesifikasi, jika tidak ada elemen summary yang ditemukan, browser akan menampilkan konten standar.
Menariknya, atribut open untuk details juga ada.
<details open> … </details>
Jika atribut ini disetel, konten elemen summary akan langsung terlihat saat halaman dimuat.
Ringkasan
Sekarang mari kita lihat elemen summary dengan lebih detail sekali lagi.
<article>
<details>
<summary>Referensi untuk artikel...</summary>
<ul>
<li><a href="referensi1.html">Tautan 1</a></li>
<li><a href="referensi2.html">Tautan 2</a></li>
<li><a href="referensi3.html">Tautan 3</a></li>
</ul>
</details>
<details>
<summary>Sumber artikel...</summary>
<ul>
<li><a href="sumber1.html">Tautan 4</a></li>
<li><a href="sumber2.html">Tautan 5</a></li>
<li><a href="sumber3.html"">Tautan 6</a></li>
</ul>
</details>
</article>
Dalam summary, konten yang belum terbuka didefinisikan dalam kaitannya dengan details. Berkat summary, informasi tambahan dapat disertakan yang baru akan ditampilkan saat diperlukan.
Meskipun area yang dapat dibuka dan ditutup bisa diimplementasikan dengan mudah menggunakan JavaScript, tetapi jika JavaScript dinonaktifkan di browser, aplikasinya tidak akan berfungsi. Oleh karena itu, dukungan luas segera dari details dan summary diharapkan.
Area Pinggiran dan Marginalia
Informasi tambahan, marginalia, referensi silang, dan sebagainya dapat diberi tanda dengan menggunakan elemen aside di HTML5. Isi yang ditandai olehnya berada dalam konteks dengan dokumen keseluruhan, namun tidak terkait langsung dengannya.
Harap diperhatikan bahwa spesifikasi HTML5 tidak menentukan dimensi yang harus digunakan untuk area yang ditandai dengan aside. Oleh karena itu, isi aside dapat ditampilkan sebagai marginalia atau sidebar, misalnya.
Contoh berikut ini menunjukkan definisi area aside.
<body>
<header>
<h1>PSD-Tutorials.de</h1>
</header>
<article>
<h2>Membuat Aplikasi Web (Bagian 10): jQuery mobile (2)</h2>
<p>Dalam tutorial ini, halaman jQM pertama akan dibuat. Syaratnya adalah kerangka dasar HTML yang sudah Anda pelajari sebelumnya.</p>
<aside>
<h3>Lebih Lanjut</h3>
<ul>
<li><a href="#/fn1">Informasi lebih lanjut ada di sini…</a></li>
</ul>
</aside>
</article>
<aside>
<nav>
<h2>Navigasi</h2>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="# ">Kontak</a></li>
</ul>
</nav>
</aside>
</body>Menambahkan Penandaan Waktu
Penandaan waktu dapat diatur dengan elemen time baru. Keistimewaan elemen ini adalah waktu yang ditampilkan dapat dibaca oleh manusia maupun mesin.
Untuk manusia, waktu ditulis di dalam elemen time. Untuk memberi kesempatan bagi browser membaca informasi waktu, atribut datetime dari elemen time digunakan.
<p>Kita bertemu pada <time datetime="2014-04-15 19:00">15 April pukul 19.00</time>. </p>
Sekali lagi, perlu diingat di sini bahwa pada browser saat ini, ini belum memiliki efek visual, tetapi hanya dimaksudkan untuk membuat penandaan waktu dapat dibaca oleh mesin.
Mengutip Teks
Dengan elemen mark, Anda dapat menyorot kata atau paragraf secara visual. Dalam spesifikasi HTML5, dijelaskan bahwa elemen ini hanya boleh digunakan dalam konten teks. Selain itu, elemen ini harus memiliki hubungan tertentu dengan konteksnya.
Contoh:
<p>Dalam tutorial ini, halaman jQM pertama akan dibuat. Syaratnya adalah <mark>kerangka dasar HTML</mark>, yang sudah Anda pelajari sebelumnya.</p>
Cara browser menampilkan penyorotan tidak diatur secara resmi.
Google Chrome dan Firefox, namun keduanya menggunakan latar belakang warna kuning.
Mencatat Dialog
Pengaturan dialog juga dipikirkan dalam HTML5. Untuk itu, ada elemen dialog. Saat ini, elemen dialog hanya didukung oleh Safari dan Google Canary, versi pengembangan browser.
Berikut contohnya:
<dialog id="dialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p>Ini adalah konten dialog.</p>
<button id="hide">Tutup</button>
</dialog>
<button id="show">Tampilkan konten</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>
Saat tombol diklik, dialog akan muncul. Agar hal ini berfungsi, di contoh sebelumnya digunakan kombinasi HTML5, CSS, dan JavaScript.
