Browser membaca HTML tanpa peduli indentasi, kapitalisasi, atau pemenggalan baris — semua contoh di bawah tetap tampil sama. Tetapi HTML tidak hanya dibaca browser: ia dibaca kita sendiri minggu depan, dibaca Siti saat menambah menu, dibaca Dewi saat memperbaiki galat. Untuk pembaca-pembaca itu, pemformatan menentukan kecepatan.

Kabar baiknya, aturan pemformatan yang sehat hanya lima butir — sekali dipegang, diterapkan otomatis. Kita tetapkan satu per satu, lalu lihat perbandingan sebelum-sesudah pada satu blok hero milik Kedai Kopi Siti.

Lima Aturan Pemformatan #

  1. Indentasi dua spasi per tingkat: setiap elemen yang bersarang masuk satu tingkat dari induknya.
  2. Satu elemen blok per baris: p, div, li tidak berbagi baris dengan elemen blok lain.
  3. Atribut panjang pindah baris: begitu satu baris elemen makin panjang dari sekitar 80-100 karakter, pecah atributnya satu per baris.
  4. Lowercase semua: nama tag dan atribut ditulis huruf kecil — <a href="...">, bukan <A HREF="...">.
  5. Urutan atribut konsisten: sepakati satu urutan per proyek — misalnya class dulu, lalu href/src, lalu alt, lalu atribut lain — dan patuhi di semua berkas.

Kelima aturan bekerja sebagai satu mekanisme: pemindaian visual. Indentasi memperlihatkan struktur bersarang tanpa membaca satu tag pun; urutan atribut membuat mata tahu di mana mencari alt di setiap img. Setiap pengecualian lokal memaksa pembaca berpikir ulang — di situlah kesalahan kecil lolos.

Sebelum dan Sesudah #

Berikut blok hero yang sama, versi asli yang sulit dipindai:

html 
<DIV class="hero"><IMG src="assets/hero-utama.webp" ALT="Aneka gelas kopi susu di meja kayu" WIDTH="1200" HEIGHT="600"><H2>Selamat Datang di Kedai Kopi Siti</H2><P>Diseduh hangat, disajikan tulus.</P></DIV>

Dan versi yang sudah diformat:

html 
<section class="hero">
  <img
    src="assets/hero-utama.webp"
    alt="Aneka gelas kopi susu di meja kayu"
    width="1200"
    height="600">
  <h2>Selamat Datang di Kedai Kopi Siti</h2>
  <p>Diseduh hangat, disajikan tulus.</p>
</section>

Hasil render keduanya identik — hanya manusia yang merasakan bedanya. Bedah versi rapi:

  1. <section class="hero"> (baris 1): elemen pembuka berdiri sendiri di satu baris; class mengikuti urutan pertama seperti disepakati.
  2. <img dan atributnya (baris 2-6): lima atribut lebih panjang dari batas satu baris, jadi pecah satu per baris — setiap atribut kini mudah ditambah, dihapus, atau diperiksa.
  3. Penutup img tidak ada: img adalah void element — tanpa tag penutup; baris atribut diakhiri height="600">.
  4. <h2> dan <p> (baris 7-8): satu elemen blok per baris, menjorok satu tingkat di dalam section.
  5. </section> (baris 9): penutup sejajar dengan pembukanya, persis di kolom yang sama — memudahkan lompat dari penutup ke pembuka.

Perbedaan kedua blok hidup di area kode, bukan di area halaman — dua dokumen itu menghasilkan piksel yang persis sama, sehingga demo render tidak akan memperlihatkan apa pun. Bandingkan langsung dengan membacanya: pindai blok kedua dan cari atribut alt-nya, lalu coba melakukan hal yang sama pada blok pertama.

Perhatikan juga elemen inline seperti strong atau a — boleh berbagi baris dengan teksnya; aturan satu-per-baris berlaku untuk elemen blok.

Alat Bantu #

Kita tidak perlu merapikan manual selamanya. Formatter seperti Prettier merapikan HTML otomatis dengan sekali perintah — dua spasi, pemenggalan atribut, urutan bawaannya — dan sebagian besar editor bisa menjalankannya setiap kali file disimpan. Aturan yang kita tetapkan tadi juga bisa dipindahkan ke konfigurasi formatter supaya seluruh tim menghasilkan gaya yang sama.

Ringkasan #

  • Lima aturan: indentasi 2 spasi, satu elemen blok per baris, atribut panjang dipecah, lowercase, urutan atribut tetap.
  • Pemformatan murni untuk manusia — hasil render tidak berubah sedikit pun.
  • Formatter seperti Prettier mengotomatisasi semuanya; konsistensi mengalahkan selera pribadi.

Chapter berikutnya membahas lapisan terakhir yang tampak di berkas: komentar — secukupnya, tepat guna.