Bagian Kepala dan Kaki
Dengan menggunakan elemen header dan footer, bagian kepala dan kaki dapat ditentukan. Untuk menentukan bagian kepala, elemen head digunakan. Namun, ini tidak selalu berarti bagian kepala seluruh halaman. Dengan head, Anda juga dapat menandai bagian kepala elemen lain seperti sejumlah sektor dan artikel.
Perhatian: Jangan tertukar header dengan elemen head yang dikenal, di mana bagian kepala dokumen HTML didefinisikan, termasuk judul dokumen, pemanggilan stylesheet dan JavaScript.
Untuk dokumen lengkap, penggunaan header akan tampak seperti ini:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Jika diterapkan pada elemen section, akan terlihat seperti ini:
<section>
<header>
<h1> Membuat Web-Apps (Bagian 09): jQuery mobile (1)</h1>
<p> jQuery tanpa ragu merupakan salah satu framework JavaScript yang paling terkenal.</p>
</header>
<p>
Oleh karena itu, jQuery sudah digunakan ribuan kali di "situs web" klasik. Khususnya untuk penggunaan di Web-Apps, framework saudara jQuery mobile (jQM) telah dirancang. Framework ini membantu Anda untuk dengan mudah membuat Web-App Anda terlihat seperti aplikasi sungguhan dalam sekejap. Alasan yang cukup bagus untuk meninjau jQM secara menyeluruh.
</p>
<footer>
<p>Hak cipta oleh PSD-Tutorials.de</p>
</footer>
</section>Pastikan bahwa footer dan header tidak boleh mengandung elemen header dan footer tambahan.
Mengelompokkan Judul
Dalam konteks sektor, judul-judul menjadi penting. Judul-judul ini dapat berupa elemen klasik h1 hingga h6. Selain itu, dalam HTML5, elemen hgroup juga diizinkan. Dalam elemen hgroup ini, beberapa judul dapat dimasukkan.
Pertama, perhatikan dokumen HTML klasik di mana struktur "biasa" didefinisikan melalui elemen hx.
<h1>
Buku
</h1>
<h2>
Bab 1
</h2>
<h2>
Bab 2
</h2>
<h3>
Subbab 2.1
</h3>
<h3>
Subbab 2.2
</h3>
<h2>
Bab 3
</h2>
Definisi ini menghasilkan struktur berikut:
Buku
Bab 1
Bab 2
Subbab 2.1
Subbab 2.2
Bab 3
Namun, judul-judul tidak akan menjorok di browser.
hgroup menarik terutama dalam konteks teks jurnalistik. Tekstual biasanya terdiri dari judul ganda, yang terdiri dari baris utama dan baris atap atau bawah. Contoh akan menggambarkan aspek ini.
<hgroup> <h1>Cloud OS</h1> <h2>Web sebagai Sistem Operasi</h2> </hgroup> <p>Di sini dimulai konten artikel …</p>
Pada contoh ini, jelas bahwa baris bawah tidak menandai bagian sendiri dalam artikel. Sebaliknya, ini adalah bagian dari judul artikel. Hal seperti itu dapat dirangkum dengan elemen hgroup.
Dalam hgroup, elemen h1 hingga h6 diizinkan.
Konsep Outline
Dalam HTML5, terdapat konsep Outline di mana terjadi interaksi antara elemen section dengan berbagai elemen hx. Dalam konsep ini, seperti biasa, judul-judul dipecah ke dalam beberapa tingkat menggunakan elemen h1 hingga h6. Di sini, h1 mewakili tingkat tertinggi, sedangkan h6 merupakan tingkat terendah. Jadi, tidak ada perubahan dibanding sebelumnya. Kini elemen hx dapat didefinisikan dalam elemen section. Dan setiap kali ini terjadi, hitungan dimulai kembali, tetapi selalu turun satu tingkat.
Konsep Outline terlihat rumit dalam spesifikasi HTML5, namun ide di baliknya cukup sederhana. Secara efektif, itu dapat digunakan untuk mendefinisikan ringkasan isi yang membuat struktur dokumen dapat dibaca oleh mesin.
Juga, sebuah contoh:
<h1>
Bab 1
</h1>
<section>
<h1>
Bab 2
</h1>
<section>
<h1>
Bab 3
</h1>
</section>
</section>
Dengan konsep outline HTML5, struktur berikut terbentuk:
1. Bab 1
- Bab 2
- Bab 3
- Bab 3
Contoh lain akan menjelaskan efeknya. Di sini juga, awalnya dokumen:
<section>
<h1>Instalasi dan Konfigurasi</h1>
<section>
<h2>Instalasi</h2>
<p>Semua hal tentang instalasi
</section> <section>
<h2>Konfigurasi</h2>
<p>Di sini kamu akan menemukan semua tentang konfigurasi
</section>
<aside>
<p>Buku-buku menarik tentang topik ini...
</aside>
</section>
<footer>
<p>(c) oleh PSD-Tutorials.de
</footer>
</section>
Struktur hasilnya terlihat seperti ini:
1. Section (Instalasi dan Konfigurasi)
1.1 Section (Instalasi)
1.2 Section (Konfigurasi)
1.3 Section (aside)
- Section (footer)
Dan contoh lain lagi:
<body>
<h1>Instalasi dan Konfigurasi</h1>
<h2>Instalasi</h2>
<p>Semua tentang tema instalasi
...lebih banyak konten...
<section>
<h3>Prasyarat</h3>
<p>Semua tentang prasyarat instalasi
...lebih banyak konten...
<h3>Persiapan</h3>
<p>Semua tentang persiapan
...lebih banyak konten...
<h2>Konfigurasi</h2>
<p>Semua tentang konfigurasi
...lebih banyak konten...
</section>
</body>
Struktur hasilnya terlihat seperti ini:
1. Instalasi dan Konfigurasi
1.1 Instalasi
1.1.1 Prasyarat
1.1.2 Persiapan
1.2 Konfigurasi
Penghitungan internal dimulai kembali dari 1 setiap kali. Hanya elemen-elemen berikut yang terpengaruh oleh konsep Outline:
• article
• aside
• nav
• section
Namun, elemen-elemen header dan footer tetap dikecualikan.
Harap diperhatikan bahwa konsep Outline saat ini masih belum didukung oleh browser. 
Namun, hanya masalah waktu sampai para produsen browser bertindak di sini. Keuntungan dari konsep Outline akan sangat besar. Pikirkanlah tentang daftar navigasi yang dihasilkan secara otomatis. Namun demikian, meskipun struktur seperti yang disebutkan saat ini diabaikan oleh browser, sebaiknya mulai sekarang Anda mencoba untuk menyusun dokumen Anda dengan logis. Dengan begitu, Anda juga akan mendapatkan sejumlah kepastian masa depan untuk situs web Anda.
