Struktur Dokumentasi

Kerangka dulu, isi kemudian. Bagian ini menyiapkan seluruh wadah dokumentasi: head dengan metadata terlengkap yang pernah kita rangkai, header berisi nama alat dan lencana versi, main dengan judul beserta pengantar, lima section kosong siap diisi, dan footer penutup. Setelah bagian ini selesai, lima bagian berikutnya tinggal mengisi tempat yang sudah disiapkan.

Kerangka Halaman #

Kode berikut adalah titik awal proyek. Simpan sebagai index.html di dalam folder src/, lalu buka di browser:

<!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>
<body>
  <header>
    <p><strong>tugas</strong> <span>v1.0</span> — pencatat tugas di terminal, berbahasa Indonesia.</p>
    <!-- form pencarian dan daftar isi ditambahkan pada Bagian 2 -->
  </header>
  <main>
    <h1>Dokumentasi Tugas CLI</h1>
    <p><code>tugas</code> adalah alat pencatatan tugas baris perintah untuk pekerjaan sehari-hari: catat tugas saat terlintas, tinjau daftar saat mulai bekerja, tandai selesai saat tuntas, dan ekspor arsip bila diperlukan. Halaman ini merangkum seluruh hal yang perlu diketahui untuk memakai versi 1.0 — dari pemasangan sampai pemecahan masalah.</p>
    <section id="instalasi">
      <!-- pengantar ditambahkan pada Bagian 3, contoh kode Bagian 4 -->
    </section>
    <section id="penggunaan">
      <!-- pengantar ditambahkan pada Bagian 3, contoh kode Bagian 4 -->
    </section>
    <section id="perintah">
      <!-- heading diisi pada Bagian 3, tabel pada Bagian 5 -->
    </section>
    <section id="konfigurasi">
      <!-- diisi pada Bagian 5 -->
    </section>
    <section id="masalah">
      <!-- diisi pada Bagian 6 -->
    </section>
  </main>
  <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>
</body>
</html>

Mari kita bedah baris demi baris:

1. Blok head (baris 1-12): charset, viewport, title, description, canonical, dan tiga tag Open Graph — delapan baris metadata. Tiap jenisnya sudah dibedah pada bab-bab Section Metadata dan SEO; Bagian 6 menimbangnya ulang dalam konteks dokumentasi.
2. Nama alat dan lencana versi (baris 15): nama alat ditebalkan dengan strong, versi ditandai span. Keduanya sengaja bukan heading — satu-satunya h1 disimpan untuk judul dokumentasi di dalam main, dan span dipilih karena lencana versi hanya membutuhkan penanda tanpa makna tambahan.
3. Komentar penanda (baris 16): <!-- ... --> tidak pernah tampil di browser; ia menandai tempat untuk form pencarian dan nav yang kita tulis pada Bagian 2.
4. Judul dan pengantar (baris 19-20): satu h1 untuk seluruh halaman plus paragraf pembuka yang menjelaskan apa itu Tugas dan apa isi halamannya — konteks bagi pembaca yang baru sekali pandang.
5. Lima section kosong (baris 21-35): satu per topik, id terpasang sejak awal, dan komentar di dalamnya mencatat bagian mana yang akan mengisi. Navigasi Bagian 2 akan bergantung pada kelima id ini.
6. Blok footer (baris 37-39): versi, tanggal pembaruan bertanda time, dan tautan catatan rilis — detailnya ditinjau pada Bagian 6.

Section per Topik #

Dokumentasi adalah dokumen panjang yang jarang dibaca berurutan, dan bentuk strukturnya menentukan pengalaman itu. Pilihan kita: satu section untuk satu topik — instalasi, penggunaan, perintah, konfigurasi, masalah. Tiga alasan menopangnya.

Pertama, pembaca dokumentasi datang dengan kebutuhan spesifik: yang baru memasang alat langsung mencari Instalasi, yang sudah mahir melompat ke tabel Perintah. Section per topik memberi tiap jenis pembaca raknya sendiri tanpa menyaring isi yang tidak relevan. Kedua, tiap section membawa h2 sendiri, sehingga kerangka heading halaman sekaligus menjadi daftar isinya. Ketiga, pemeliharaan: dokumentasi bertambah topik baru cukup dengan menyalin satu blok section ber-id dan memasang h2-nya — daftar isi menyusul di Bagian 2.

Pola Halaman Dokumentasi #

Coba bandingkan dengan dokumentasi yang biasa kita baca sehari-hari. Situs dokumentasi besar memakai sidebar: kolom navigasi tetap di sisi kiri yang memuat pohon konten bertingkat dan tampil terus di tiap halaman. Pola itu kuat untuk dokumentasi multi-halaman karena pembaca bisa berpindah jauh dari mana pun.

Proyek kita hanya satu berkas, jadi memilih pola daftar isi di atas: nav ringkas pada header berisi lima tautan. Pohon konten kita memang hanya satu tingkat — lima bagian tanpa anak — sehingga sidebar hanya akan memakan tempat tanpa menambah apa pun. Daftar isi di atas sudah cukup: satu klik, halaman menggulir ke bagiannya. Bila kelak dokumentasi bertingkat dan terbagi banyak berkas, itulah saatnya pindah ke sidebar.

Hasil pada Browser #

Judul tab menampilkan “Dokumentasi Tugas CLI v1.0” dari title. Di halaman tampak nama alat beserta lencana versinya, judul dokumentasi, paragraf pengantar, dan lima area kosong; footer menutup bagian bawah. Belum ada satu tautan pun yang bisa diklik — memang belum ada isinya. Kerangka ini tetap valid dan siap diisi.

Inilah keadaan halaman pada akhir Bagian 1 — lima section kosong berdiri berurutan dan menunggu diisi; satu-satunya tautan hidup di seluruh halaman ada di footer:

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.

Ringkasan Bagian 1 #

• Kerangka lengkap: head delapan baris metadata, header dengan nama alat dan lencana versi, main dengan judul, pengantar, dan lima section kosong, ditutup footer.
• Satu section per topik memilah kebutuhan pembaca, menjadikan kerangka heading sebagai daftar isi, dan memudahkan pemeliharaan.
• Lima id terpasang sejak awal dan unik — fondasi navigasi fragment pada Bagian 2.

Bagian berikutnya melengkapi header dengan form pencarian dan nav daftar isi.