Satu section masih kosong dan satu lapis halaman belum ditimbang. Bagian penutup mengisi Masalah Umum dengan pertanyaan lazim yang bisa dibuka-tutup, menimbang ulang metadata head — canonical dan Open Graph — serta isi footer, lalu menguji seluruh halaman dari atas ke bawah.

Pertanyaan Lazim dengan details #

Isi section Masalah Umum dengan dua pertanyaan:

html 
<section id="masalah">
  <h2>Masalah Umum</h2>
  <p>Dua pertanyaan yang paling sering muncul:</p>
  <details>
    <summary>Mengapa nomor tugas berubah setelah satu baris dihapus?</summary>
    <p>Nomor dihitung dari posisi baris, bukan identitas tetap. Tandai tugas selesai bila jejaknya ingin dipertahankan, atau ekspor daftar sebelum menghapus.</p>
  </details>
  <details>
    <summary>Bagaimana membatalkan perintah yang sedang berjalan?</summary>
    <p>Tekan <kbd>Ctrl</kbd>+<kbd>C</kbd>. Data tersimpan setelah tiap perintah selesai, jadi pembatalan tidak merusak berkas data.</p>
  </details>
</section>

Mari kita bedah baris demi baris:

  1. h2 dan pengantar (baris 1-3): terpasang sejak Bagian 3; pengantarnya menjanjikan dua pertanyaan — dan memang ada dua.
  2. details dengan summary (baris 4-7): pertanyaan pada summary selalu tampil, jawaban tersembunyi sampai elemen diklik — interaktivitas tanpa satu baris JavaScript. Perilaku lengkapnya dibedah pada chapter Details dan Summary.
  3. Jawaban sebagai p (baris 6): hanya tampil saat details dibuka — halaman tetap ringkas bagi pembaca yang tidak membutuhkan jawabannya.
  4. Dua details berdiri sendiri (baris 4-11): keduanya boleh terbuka bersamaan. HTML modern menyediakan atribut name untuk mengikat beberapa details sebagai akordeon yang hanya membuka satu pada satu waktu; kita tidak memakainya karena kedua pertanyaan ini tidak saling bergantung.
  5. Dua kbd bertetangga (baris 10): Ctrl+C ditulis sebagai dua kbd dengan tanda plus di antaranya — dua tombol terpisah yang ditekan bersamaan.

Metadata yang Sudah Kita Tulis #

Seluruh metadata sudah tertulis sejak kerangka Bagian 1; saatnya menimbang isinya baris demi baris:

html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dokumentasi Tugas CLI v1.0</title>
  <meta name="description" content="Dokumentasi resmi Tugas CLI v1.0, alat pencatatan tugas di terminal berbahasa Indonesia: instalasi, penggunaan, perintah, konfigurasi, dan masalah umum.">
  <link rel="canonical" href="https://tugas-cli.example.com/dokumentasi/">
  <meta property="og:title" content="Dokumentasi Tugas CLI v1.0">
  <meta property="og:description" content="Panduan memakai Tugas, alat pencatatan tugas di terminal: instalasi, daftar perintah, konfigurasi, dan pemecahan masalah.">
  <meta property="og:type" content="article">
</head>

Empat keputusan pada blok ini:

  1. title (baris 6): “Dokumentasi Tugas CLI v1.0”. Versi dicantumkan karena tab browser, bookmark, dan hasil pencarian kerap menyimpan dokumentasi versi lama dan baru berdampingan — versi pada judul membedakan keduanya sejak pandangan pertama. Perannya dibedah pada chapter Title dan Description.
  2. description (baris 7): cuplikan yang tampil di bawah judul pada hasil pencarian; isinya merangkum alat, bahasanya, dan isi halaman dalam satu kalimat.
  3. canonical (baris 8): alamat resmi tunggal halaman. Dokumentasi kerap diakses lewat alamat yang bervariasi — dengan parameter atau dari cermin — dan canonical menyatakan alamat mana yang dihitung. Mekanismenya dibedah pada chapter Canonical URL; nilainya di sini fiktif, seperti seluruh produknya.
  4. Open Graph (baris 9-11): og:title, og:description, dan og:type merangkai kartu tautan saat halaman dibagikan ke media sosial — dibedah pada chapter Open Graph. Nilai og:type adalah article karena isinya artikel dokumentasi, bukan beranda situs.

Footer sudah tertulis sejak Bagian 1; dua detailnya layak ditimbang:

html 
<footer>
  <p>Dokumentasi Tugas CLI v1.0 — diperbarui <time datetime="2026-10-17">17 Oktober 2026</time>. Baca <a href="https://tugas-cli.example.com/rilis/">catatan rilis</a> untuk rincian tiap versi.</p>
</footer>

Tiga keputusan pada blok ini:

  1. Versi dan time (baris 2): tanggal pembaruan ditandai time dengan datetime="2026-10-17" — mesin membaca tanggalnya, manusia membaca tulisannya. Format nilainya dibedah pada chapter Time. Dokumentasi yang tidak bertanggal membuat pembaca ragu apakah isinya masih berlaku.
  2. Tautan keluar (baris 2): catatan rilis ditulis sebagai tautan absolut lengkap dengan domainnya, karena tujuannya berada di luar halaman ini.
  3. footer di luar main (baris 1 dan 3): penutup seluruh dokumen — bukan bagian isi dokumentasi — sehingga tempatnya setelah main ditutup.

Uji Akhir #

Sebelum menyerahkan berkas, jalankan dua ujian.

Ujian pertama: validator W3C, seperti pada chapter HTML Validator.

Ujian kedua: daftar periksa navigasi dan struktur:

  1. Lima tautan daftar isi menggulir ke bagian yang tepat — dari #instalasi sampai #masalah.
  2. Nilai id seluruh section unik — tidak ada fragment yang diam di tempat.
  3. Jenjang heading berurutan tanpa lompatan: h1 ke h2 ke h3.
  4. Kedua pertanyaan lazim terbuka dengan klik dan tertutup kembali dengan klik yang sama.

Hasil Akhir pada Browser #

Halaman kini utuh: nama alat, kotak pencarian, dan daftar isi di atas; pengantar; instalasi dengan blok perintahnya; penggunaan dengan balasan terminalnya; enam uraian perintah beserta tabel ringkasannya; konfigurasi dengan daftar opsi dan tabel variabel; dua pertanyaan lazim yang terlipat rapi; footer bertanggal di bawah. Total 123 baris dalam satu berkas — cukup kecil untuk dibaca ulang dalam satu duduk, cukup lengkap sebagai pola dokumentasi produk Anda sendiri: menambah perintah baru cukup dengan satu h3, satu paragraf, dan satu baris tr.

Jalankan ujian keduanya langsung pada demo berikut — klik kelima tautan daftar isi (fragment menggulir ke bagian yang tepat), lalu buka dan tutup kedua pertanyaan lazimnya:

Tautan “catatan rilis” pada footer demo mengarah ke domain fiktif yang tidak diresolusi — bila diklik, iframe berganti halaman galat; muat ulang halaman untuk mengembalikan demo. Lompatan daftar isi dan pertanyaan lazim bekerja penuh, dengan satu elemen <base> tambahan agar fragment tetap menggulir di dalam iframe.

Ringkasan Bagian 6 #

  • FAQ memakai details dan summary — interaktif tanpa JavaScript; akordeon dengan atribut name hanya untuk pertanyaan yang saling bergantung.
  • Metadata lengkap: title berlabel versi, description, canonical, dan Open Graph bertipe article.
  • Footer menandai tanggal dengan time ber-datetime; hasil akhir lolos validator dan seluruh fragment daftar isi berfungsi.

Proyek selesai. Berkas lengkap dapat diunduh dari halaman overview proyek.