Bagian pertama membangun fondasi halaman dokumentasi: kerangka dokumen yang valid dan semantik. Kerangka yang benar membuat browser merender halaman dalam mode standar, memudahkan mesin pencari memahami isi halaman, dan menyederhanakan tahap berikutnya karena kita tinggal mengisi wadah yang tersedia. Kita mulai dari head yang lengkap, lalu menyusun wilayah body: header identitas, main yang dibagi menjadi dua kolom konsep — nav sidebar dan article konten — serta footer penutup. Seluruh materinya berasal dari section Struktur Dokumen dan Semantic HTML; kini konsep tersebut dipakai pada kasus dokumentasi yang nyata.

Peran Setiap Bagian Kerangka #

Sebelum menulis kode, kita petakan dulu unsur yang menyusun kerangka halaman dokumentasi beserta perannya:

UnsurPeran pada halaman dokumentasi
<!doctype html> dan <html lang="id">Menyatakan dokumen HTML modern yang berbahasa Indonesia
meta charset, viewport, description, titleMetadata wajib: pengodean, skala ponsel, ringkasan pencarian, judul tab
headerIdentitas situs: logo, nama dokumentasi, dan tagline
main berisi nav dan articleDua kolom konsep: daftar topik di kiri, isi dokumentasi di kanan
footerPenutup: pihak yang mengelola dokumentasi

Kata “dua kolom konsep” perlu digarisbawahi. Tanpa CSS, browser menumpuk nav dan article secara vertikal seperti elemen lain; penyandingan keduanya baru terjadi pada Bagian 3 lewat grid. Pada tahap ini yang penting adalah urutan dan makna: nav ditulis sebelum article agar pembaca layar menemukan peta topik lebih dulu.

Membangun Kerangka Halaman #

File berikut adalah hasil utuh tahap ini. Simpan sebagai dokumentasi.html, atau unduh melalui tautan pada header code block:

html dokumentasi.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Dokumentasi CatatKu: panduan penggunaan aplikasi pencatat ringan dari Komunitas Belajar Web.">
  <title>Dokumentasi CatatKu</title>
</head>
<body>
  <header>
    <img src="../assets/logo-docs.svg" alt="Logo Dokumentasi CatatKu" width="48" height="48">
    <div>
      <h1>Dokumentasi CatatKu</h1>
      <p>Panduan pengguna aplikasi pencatat ringan</p>
    </div>
  </header>
  <main>
    <nav aria-label="Daftar topik">
      <!-- Daftar topik ditambahkan pada Bagian 2 -->
    </nav>
    <article>
      <!-- Isi dokumentasi ditambahkan pada Bagian 2 -->
    </article>
  </main>
  <footer>
    <p>Dokumentasi CatatKu — dikelola oleh Komunitas Belajar Web.</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Header biru berisi logo ikon dokumen, judul "Dokumentasi CatatKu", dan tagline
  - Wilayah kosong di tengah halaman karena nav dan article belum berisi konten
  - Baris "Dokumentasi CatatKu — dikelola oleh Komunitas Belajar Web." di dasar halaman
  - Teks "Dokumentasi CatatKu" pada tab browser

Mari kita telaah peran setiap bagian kode di atas:

  1. Baris 1-2: deklarasi doctype dan <html lang="id"> menempatkan browser pada mode standar serta menyatakan bahasa kontennya.
  2. Baris 4-7: empat metadata wajib proyek — charset, viewport, description, dan title — menempati head sebelum elemen apa pun.
  3. Baris 10-16: header memuat logo sebagai img beratribut alt, width, dan height, lalu div pembungkus nama dokumentasi dan tagline.
  4. Baris 17-24: main menampung dua wadah utama. Nav membawa aria-label="Daftar topik" agar pembaca layar menyebut nav ini dengan nama yang jelas, sedangkan article menunggu isi dokumentasi.
  5. Baris 25-27: footer menutup halaman dengan kalimat kepemilikan dokumentasi.

Pemeriksaan Hasil Tahap Ini #

  1. Buka dokumentasi.html di browser, lalu pastikan header, wilayah kosong main, dan footer tampil berurutan dari atas ke bawah.
  2. Periksa judul pada tab browser; teksnya harus sama dengan isi elemen title.
  3. Pastikan logo tampil; bila gambar gagal dimuat, cek posisi file pada pohon folder di overview proyek.
  4. Buka tests/cek-struktur.html, lalu centang butir-butir kerangka yang telah dipenuhi oleh file ini.

Kerangka telah berdiri, tetapi nav dan article masih kosong. Bagian berikutnya mengisinya dengan daftar topik, breadcrumb, dan isi dokumentasi yang sebenarnya.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

dokumentasi.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Dokumentasi CatatKu: panduan penggunaan aplikasi pencatat ringan dari Komunitas Belajar Web.">
  <title>Dokumentasi CatatKu</title>
</head>
<body>
  <header>
    <img src="../assets/logo-docs.svg" alt="Logo Dokumentasi CatatKu" width="48" height="48">
    <div>
      <h1>Dokumentasi CatatKu</h1>
      <p>Panduan pengguna aplikasi pencatat ringan</p>
    </div>
  </header>
  <main>
    <nav aria-label="Daftar topik">
      <!-- Daftar topik ditambahkan pada Bagian 2 -->
    </nav>
    <article>
      <!-- Isi dokumentasi ditambahkan pada Bagian 2 -->
    </article>
  </main>
  <footer>
    <p>Dokumentasi CatatKu — dikelola oleh Komunitas Belajar Web.</p>
  </footer>
</body>
</html>