Merancang Struktur Halaman

Semua elemen teknis HTML telah kita pelajari satu per satu: heading, paragraf, list, tabel, form, hingga elemen semantik seperti header, main, dan article. Menguasai potongan-potongan itu belum membuat halaman utuh tersusun dengan sendirinya. Halaman yang baik berangkat dari perencanaan, bukan dari menulis tag sambil berimprovisasi. Pada Chapter ini kita berlatih berpikir arsitektural: menyusun inventaris konten, mengelompokkan informasi, menggambar wireframe level HTML, lalu menerjemahkannya menjadi struktur semantik yang siap ditulis.

Inventaris Konten sebagai Titik Awal #

Perancangan dimulai sebelum editor terbuka: kita menuliskan semua konten yang perlu tampil di halaman. Daftar ini disebut inventaris konten. Dengan inventaris, keputusan struktur didasarkan pada kebutuhan konten yang nyata, bukan pada tebakan.

Misalnya Budi ingin membuat halaman profil dirinya. Inventaris kontennya berisi:

• Nama lengkap beserta peran profesional
• Foto profil (foto-budi.jpg, file yang perlu disediakan sendiri)
• Satu kalimat perkenalan
• Daftar keahlian
• Dua karya terpilih beserta keterangan singkat
• Alamat email [email protected]

Daftar semacam ini sengaja dibuat kasar: tugasnya memastikan tidak ada konten yang terlupa ketika struktur mulai disusun.

Mengelompokkan Informasi #

Inventaris yang panjang dikelompokkan agar tidak tampil datar. Kelompok dibentuk dari kemiripan peran: konten yang menjawab pertanyaan yang sama diletakkan berdekatan. Pengelompokan halaman profil Budi menjadi:

Aturan praktisnya: satu kelompok konten menjadi satu wilayah di halaman. Pengunjung yang mencari cara menghubungi Budi cukup melihat ke satu tempat.

Wireframe Level HTML #

Wireframe adalah sketsa blok halaman tanpa detail visual. Pada level HTML, setiap blok berlabel perannya, bukan tampilannya — ukuran, warna, dan posisi visual adalah pekerjaan CSS. Sketsa halaman profil Budi menjadi:

+----------------------------+
| IDENTITAS        (header)  |
+----------------------------+
| RINGKASAN                  |
+----------------------------+
| RINCIAN          (main)    |
|  - Keahlian                |
|  - Karya terpilih          |
+----------------------------+
| KONTAK           (aside)   |
+----------------------------+
| Hak cipta        (footer)  |
+----------------------------+

Sketsa seperti ini cepat digambar dan langsung menunjukkan elemen semantik mana yang layak memayungi setiap blok.

Alur Perancangan dalam Satu Diagram #

Langkah-langkah di atas merangkum menjadi alur berikut:

Urutannya sebagai teks: inventaris konten, pengelompokan informasi, urutan kelompok mengikuti alur baca, wireframe tanpa visual, pemetaan ke elemen semantik, lalu penulisan markup dan validasi. Bila validasi menuntut perbaikan, kita kembali ke langkah pemetaan — alur ini berputar, bukan garis lurus sekali jalan.

Urutan Heading Mengikuti Struktur #

Struktur halaman juga terlihat dari urutan heading-nya. Heading yang berjenjang mengikuti pengelompokan: satu h1 untuk judul halaman, h2 untuk tiap kelompok, dan h3 untuk rincian di dalamnya. Kerangka heading halaman profil Budi menjadi:

h1  Budi Santoso — Pengembang Web
    h2  Ringkasan
    h2  Keahlian
    h2  Karya Terpilih
        h3  Aplikasi Kasir Sederhana
        h3  Situs Katalog Bunga
    h2  Kontak

Uji cepatnya: baca hanya baris heading dari atas ke bawah. Bila daftar itu terbaca seperti daftar isi yang masuk akal, urutan heading telah mengikuti struktur; bila ada loncatan, ada kelompok yang meleset.

Contoh Lengkap: dari Daftar Konten ke Markup #

Kini kita terjemahkan seluruh perencanaan menjadi satu file. Simpan sebagai profil-budi.html; gambar foto-budi.jpg perlu disediakan sendiri di folder yang sama:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Budi Santoso</title>
</head>
<body>
  <header>
    <img src="foto-budi.jpg" alt="Foto profil Budi Santoso" width="120" height="120">
    <h1>Budi Santoso — Pengembang Web</h1>
  </header>
  <main>
    <section>
      <h2>Ringkasan</h2>
      <p>Pengembang web yang gemar membangun antarmuka sederhana dan cepat.</p>
    </section>
    <section>
      <h2>Keahlian</h2>
      <ul>
        <li>HTML dan CSS</li>
        <li>JavaScript dasar</li>
        <li>Desain antarmuka</li>
      </ul>
    </section>
    <section>
      <h2>Karya Terpilih</h2>
      <article>
        <h3>Aplikasi Kasir Sederhana</h3>
        <p>Aplikasi pencatatan transaksi untuk warung kecil.</p>
      </article>
      <article>
        <h3>Situs Katalog Bunga</h3>
        <p>Katalog produk toko bunga dengan halaman detail per item.</p>
      </article>
    </section>
  </main>
  <aside>
    <h2>Kontak</h2>
    <p>Surat elektronik: <a href="mailto:[email protected]">[email protected]</a></p>
  </aside>
  <footer>
    <p>&copy; 2025 Budi Santoso</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Foto dan nama besar "Budi Santoso — Pengembang Web" di bagian atas
  - Tiga bagian berturut-turut: Ringkasan, Keahlian, Karya Terpilih
  - Bagian Kontak berisi tautan surat elektronik
  - Baris hak cipta di bagian bawah halaman

Mari kita telaah pemetaan dari perencanaan ke markup:

1. header: wilayah identitas dari tabel pengelompokan; memuat foto dan satu-satunya h1 di halaman.
2. main: membungkus tiga kelompok isi utama, sehingga screen reader dapat melompat langsung ke konten.
3. section pertama (Ringkasan): kelompok ringkasan, dilengkapi h2 sesuai kerangka heading.
4. section kedua (Keahlian): daftar keahlian disajikan sebagai ul karena urutannya tidak bermakna.
5. section ketiga (Karya Terpilih): setiap karya dibungkus article dengan h3, mengikuti jenjang kerangka.
6. aside: wilayah kontak yang berdiri di luar alur utama namun tetap terkait halaman.
7. footer: penutup halaman berisi hak cipta.

Setiap keputusan di atas bersumber dari tabel pengelompokan dan kerangka heading. Struktur ini juga mudah berkembang: karya ketiga cukup ditambah sebagai satu article baru di dalam section Karya Terpilih.

Struktur satu halaman kini dapat dirancang dengan alur yang jelas. Chapter berikutnya memperluas pandangan ke pola pembagian wilayah yang berulang antarhalaman.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Structuring documents
• MDN Web Docs — Elemen heading (h1–h6)
• web.dev — Learn HTML

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Budi Santoso</title>
</head>
<body>
  <header>
    <img src="foto-budi.jpg" alt="Foto profil Budi Santoso" width="120" height="120">
    <h1>Budi Santoso — Pengembang Web</h1>
  </header>
  <main>
    <section>
      <h2>Ringkasan</h2>
      <p>Pengembang web yang gemar membangun antarmuka sederhana dan cepat.</p>
    </section>
    <section>
      <h2>Keahlian</h2>
      <ul>
        <li>HTML dan CSS</li>
        <li>JavaScript dasar</li>
        <li>Desain antarmuka</li>
      </ul>
    </section>
    <section>
      <h2>Karya Terpilih</h2>
      <article>
        <h3>Aplikasi Kasir Sederhana</h3>
        <p>Aplikasi pencatatan transaksi untuk warung kecil.</p>
      </article>
      <article>
        <h3>Situs Katalog Bunga</h3>
        <p>Katalog produk toko bunga dengan halaman detail per item.</p>
      </article>
    </section>
  </main>
  <aside>
    <h2>Kontak</h2>
    <p>Surat elektronik: <a href="mailto:[email protected]">[email protected]</a></p>
  </aside>
  <footer>
    <p>&copy; 2025 Budi Santoso</p>
  </footer>
</body>
</html>