Elemen ini dapat kita gunakan untuk:
- Sebuah header dan footer utama yang muncul pada awal dan akhir di sebuah halaman (<body>).
- Header digunakan sebagai pengantar atau pembuka konten dalam sebuah elemen <article> atau <section>.
- Footer digunakan sebagai catatan kaki pada sebuah elemen <article> atau <section>.
Pada contoh dibawah ini elemen <header> digunakan untuk menampilkan nama situs dan navigasi utama.
- <header>
- <h1>Bandung</h1>
- <p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi tersebut.</p>
- <nav>
- <ul>
- <li><a href="#sejarah">Sejarah</a></li>
- <li><a href="#geografis">Geografis</a></li>
- <li><a href="#wisata">Wisata</a></li>
- </ul>
- </nav>
- </header>
Dan elemen <footer> digunakan sebagai informasi hak cipta.
- <article>
- <header>
- <h1>Judul Artikel</h1>
- <h2>Oleh: Dicoding Indonesia</h2>
- </header>
- <p>....... Konten artikel dimulai dari sini ......</p>
- <footer>
- <p>Bagikan artikel ini melalui</p>
- <ul>
- <li>Twitter</li>
- <li>Facebook</li>
- <li>......</li>
- </ul>
- </footer>
- </article>
Perlu kita ketahui bahwa elemen <header> dan <footer> tidak boleh ditulis di dalam elemen <header> dan <footer> lainnya (bertumpuk/nested).
Nav
Elemen <nav> digunakan untuk menampung sebuah navigasi yang sifatnya penting (major), contohnya navigasi utama pada sebuah website.
Tapi tidak menjamin pada sebuah website hanya ada satu navigasi. Contohnya, sebuah akhir artikel pada blog terdapat tautan navigasi menuju artikel yang dianggap relevan dengan artikel yang telah kita baca. Navigasi tersebut tidak dianggap sebagai navigasi yang penting, sehingga kita tidak perlu menggunakan elemen <nav> untuk menampilkannya.
Pada pembahasan header dan footer, kita sudah melihat contoh penggunaan dari elemen <nav> yang diletakkan pada elemen <header>.
- <nav>
- <ul>
- <li><a href="#sejarah">Sejarah</a></li>
- <li><a href="#geografis">Geografis</a></li>
- <li><a href="#wisata">Wisata</a></li>
- </ul>
- </nav>
Sebuah navigation pada dasarnya sangat berguna untuk aksesibilitas website kita. Contohnya ketika pengguna website kita menggunakan screen reader dalam mengunjungi website, pengguna akan mudah mencari bagian yang dia inginkan tanpa harus menelusuri seluruh konten website