Dokumen yang lolos validator belum tentu enak disunting. Bila tag-tag menumpuk tanpa jarak dan barisnya panjang tak berujung, struktur dokumen hanya bisa dipahami dengan membaca baris demi baris. Formatting yang tertib membalik keadaan: tingkat persarangan terlihat sekali lantang, dan menambah bagian baru menjadi pekerjaan kecil. Chapter ini menetapkan kebiasaan formatting yang umum dipakai — indentasi dua spasi, pemenggalan baris, dan konsistensi tanda kutip — termasuk satu pengecualian penting pada elemen pre.

Indentasi Dua Spasi #

Konvensi paling umum di dunia HTML adalah dua spasi per tingkat persarangan. Setiap elemen yang berada di dalam elemen lain turun satu tingkat, sehingga relasi induk-anak terbaca dari lebar kolomnya. Elemen html, head, dan body berdiri paling kiri; anak-anaknya mundur dua spasi; anak dari anak mundur lagi dua spasi.

Tab juga dipakai sebagian tim karena lebih hemat, tetapi lebar tab berbeda antar editor — empat spasi di satu tempat, delapan di tempat lain — sementara dua spasi tampil seragam di mana pun file dibuka. Mana pun pilihan tim, kuncinya satu: satu pola untuk seluruh file, bukan campuran tab dan spasi.

Kapan Memenggal Baris #

Kebiasaan pemenggalan baris yang umum dipakai:

  • Elemen blok ditulis satu per baris: tag pembuka, isi, dan tag penutup menempati baris sendiri bila isinya lebih dari satu frasa.
  • Tag penutup berada sejajar dengan tag pembukanya sehingga pasangannya mudah dicari.
  • Teks paragraf yang panjang boleh dipecah ke beberapa baris di dalam p: browser menggabungkan deretan spasi dan baris baru menjadi satu spasi, sehingga tampilan tidak berubah.
  • Beberapa elemen inline pendek boleh berbagi satu baris, misalnya label dan input pendek — asalkan pola ini konsisten di seluruh file.

Contoh Sebelum dan Setelah Dirapikan #

Dua versi file resep berikut sama-sama valid — validator tidak melaporkan apa pun pada keduanya. Perbedaannya ada pada kenyamanan membaca.

html resep-sebelum.html — valid, tetapi sulit dibaca 
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Resep Soto Ayam</title>
</head>
<body>
<article>
<h1>Resep Soto Ayam</h1>
<p>Soto ayam kuah kuning khas dapur Bu Siti, disantap hangat bersama nasi putih, soun, dan taburan bawang goreng.</p>
<section><h2>Bahan</h2><ul>
<li>Daging ayam rebus, 500 gram</li>
<li>Soun, secukupnya</li>
<li>Telur rebus, dua butir</li>
</ul></section>
<section><h2>Langkah Memasak</h2><ol><li>Rebus ayam bersama daun jeruk dan serai hingga matang.</li><li>Tumis bumbu halus, masukkan ke dalam kaldu, aduk rata.</li><li>Sajikan soto dengan soun, telur, dan bawang goreng.</li></ol></section>
</article>
</body>
</html>

Semua tag sejajar di kolom paling kiri, dan bagian section menyatu dengan daftarnya dalam baris panjang; batas setiap bagian hanya bisa ditebak. Versi berikut menata ulang file yang sama tanpa mengubah satu pun tag:

html resep-soto-ayam.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Resep Soto Ayam</title>
</head>
<body>
  <article>
    <h1>Resep Soto Ayam</h1>
    <p>
      Soto ayam kuah kuning khas dapur Bu Siti, disantap hangat bersama
      nasi putih, soun, dan taburan bawang goreng.
    </p>
    <section>
      <h2>Bahan</h2>
      <ul>
        <li>Daging ayam rebus, 500 gram</li>
        <li>Soun, secukupnya</li>
        <li>Telur rebus, dua butir</li>
      </ul>
    </section>
    <section>
      <h2>Langkah Memasak</h2>
      <ol>
        <li>Rebus ayam bersama daun jeruk dan serai hingga matang.</li>
        <li>Tumis bumbu halus, masukkan ke dalam kaldu, aduk rata.</li>
        <li>Sajikan soto dengan soun, telur, dan bawang goreng.</li>
      </ol>
    </section>
  </article>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Judul "Resep Soto Ayam" dengan dua bagian: "Bahan" dan "Langkah Memasak"
  - Tampilan persis sama dengan versi sebelum dirapikan; yang berubah
    hanyalah teks sumbernya
  1. Baris 9-14 (article): paragraf pengantar dipecah menjadi tiga baris di dalam satu p; browser merendernya sebagai satu paragraf utuh.
  2. Baris 15-22 (section pertama): section turun satu tingkat dari article; ul dan li turun lagi masing-masing satu tingkat.
  3. Baris 17-21 (ul): setiap li menempati satu baris, dan penutup </ul> sejajar persis dengan pembukanya.
  4. Baris 23-30 (section kedua): pola yang sama berulang pada ol — keteraturan inilah yang membuat bagian baru mudah ditambahkan.

Pengecualian pada Elemen pre #

Seluruh kebiasaan di atas bertumpu pada satu perilaku browser: whitespace ekstra digabungkan. Elemen pre membatalkan perilaku itu — setiap spasi dan baris baru di dalamnya dipertahankan persis, karena pre memang dirancang menampilkan teks terformat apa adanya.

html indentasi di dalam pre ikut tampil 
<pre>
  Langkah 1: Rebus ayam hingga matang.
  Langkah 2: Tumis bumbu halus.
</pre>

Output yang Dihasilkan:

text 
Isi pre tampil dengan dua spasi di awal setiap baris:
  Langkah 1: Rebus ayam hingga matang.
  Langkah 2: Tumis bumbu halus.

Dua spasi indentasi yang tidak berarti pada p ikut tampil pada pre. Karena itu konten pre lazim ditulis menempel di kolom paling kiri, meski tag pembuka dan penutupnya sendiri boleh mengikuti indentasi sekitarnya.

Bantuan Editor #

Kebiasaan ini tidak harus dijaga sepenuhnya dengan tangan. Editor modern menyediakan fitur auto-format — misalnya Format Document pada VS Code — yang menata indentasi dan pemenggalan baris secara seragam, dan tool seperti Prettier dapat menerapkan aturan yang sama pada seluruh file tim. Aturannya pun dapat disesuaikan, termasuk memilih dua spasi per tingkat. Bantuan ini paling efektif bila dipanggil teratur, misalnya setiap kali file selesai disunting.

File yang valid dan terformat rapi kini siap masuk ke lapisan berikutnya: bagaimana nama class ditulis, kutip mana yang dipakai, dan pola apa yang diulang — itulah materi konsistensi markup pada chapter berikutnya.

Referensi resmi untuk pendalaman:

Berkas Sumber

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

resep-soto-ayam.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Resep Soto Ayam</title>
</head>
<body>
  <article>
    <h1>Resep Soto Ayam</h1>
    <p>
      Soto ayam kuah kuning khas dapur Bu Siti, disantap hangat bersama
      nasi putih, soun, dan taburan bawang goreng.
    </p>
    <section>
      <h2>Bahan</h2>
      <ul>
        <li>Daging ayam rebus, 500 gram</li>
        <li>Soun, secukupnya</li>
        <li>Telur rebus, dua butir</li>
      </ul>
    </section>
    <section>
      <h2>Langkah Memasak</h2>
      <ol>
        <li>Rebus ayam bersama daun jeruk dan serai hingga matang.</li>
        <li>Tumis bumbu halus, masukkan ke dalam kaldu, aduk rata.</li>
        <li>Sajikan soto dengan soun, telur, dan bawang goreng.</li>
      </ol>
    </section>
  </article>
</body>
</html>