Konsistensi Markup

Dua file dapat sama-sama valid dan sama-sama rapi, tetapi terasa ditulis dua orang yang tak pernah berbicara: class yang satu memakai huruf besar, yang lain memakai garis bawah, dan tanda kutipnya bergantian. Validator tidak melaporkan perbedaan semacam ini — urusannya adalah aturan bahasa, bukan kesepakatan tim. Karena itulah konsistensi perlu dijaga dengan kebiasaan yang disepakati. Chapter ini menyusun kebiasaan tersebut: penamaan class dan id, pilihan kutip, urutan atribut, pola penulisan yang berulang, serta style guide sederhana penjaganya.

Penamaan Class dan ID #

Konvensi penamaan yang populer untuk HTML adalah kebab-case: seluruh huruf kecil dengan tanda hubung sebagai pemisah, seperti daftar-produk atau kartu-produk. Konvensi ini mencegah tiga gaya bercampur dalam satu file — CamelCase, snake_case, dan huruf besar-kecil acak — sehingga nilai class terbaca seragam di seluruh dokumen.

Nama yang baik menggambarkan peran bagian itu, bukan satu kejadian tampilan: nama-produk menyatakan fungsi, sedangkan teks-biru-12 hanya masuk akal untuk satu halaman tertentu. id mengikuti pola penamaan yang sama dengan satu syarat tambahan dari bahasanya: id harus unik dalam satu dokumen.

Satu Konvensi Kutip dan Urutan Atribut #

HTML menerima tanda kutip tunggal maupun ganda untuk nilai atribut, tetapi mencampur keduanya dalam satu file memecah pola visual. Pilih kutip ganda untuk semua nilai — pilihan yang paling umum — lalu pertahankan di seluruh file.

Urutan atribut tidak diatur bahasa, tetapi tim dapat menyepakatinya agar setiap tag menampilkan informasinya dengan pola sama. Salah satu urutan yang lazim: class terlebih dahulu, lalu id, lalu atribut isi seperti src dan href, lalu atribut keadaan seperti required. Yang penting bukan urutannya, melainkan keseragamannya — mata pembaca menandai kelainan jauh lebih cepat pada pola yang stabil.

Pola Berulang Ditulis Seragam #

Bagian terbesar markup nyata tersusun dari pola yang berulang: baris produk, butir daftar, artikel berita. Saat setiap pengulangan ditulis dengan struktur identik, perbedaan antarbutir hanya ada pada isinya. Keteraturan ini membantu dua hal sekaligus: pembaca memindai daftar panjang tanpa membaca seluruhnya, dan pola yang sama siap diubah menjadi template ketika konten mulai dihasilkan otomatis.

Dua Versi Katalog #

Versi pertama di bawah ini valid — tidak ada yang dilaporkan validator — tetapi ketiga kartunya ditulis dengan gaya yang berganti-ganti:

<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Katalog Toko</title>
</head>
<body>
<main>
<h1>Katalog Produk</h1>
<ul class='daftarProduk'>
  <li class='kartuProduk'>
    <h2 class='namaProduk'>Kopi Gayo</h2>
    <p class='deskripsiProduk' id='p1'>Arabika 250 gram, sangrai medium.</p>
    <p class='hargaProduk'>Rp85.000</p>
  </li>
  <li class="Kartu_Produk">
    <h2 class="NAMA-PRODUK">Kopi Toraja</h2>
    <p id="p2" class="deskripsi_produk">Arabika 200 gram, aroma buah.</p>
    <p class="harga produk">Rp95.000</p>
  </li>
</ul>
</main>
</body>
</html>

Bandungkan dengan versi yang telah diseragamkan:

Versi seragamnya adalah file berikut:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Katalog Produk Toko Melati</title>
</head>
<body>
  <main>
    <h1>Katalog Produk</h1>

    <!-- Daftar produk tersaji sebagai kartu dengan pola yang sama -->
    <ul class="daftar-produk">
      <li class="kartu-produk">
        <h2 class="nama-produk">Kopi Gayo</h2>
        <p class="deskripsi-produk">Arabika 250 gram, sangrai medium.</p>
        <p class="harga-produk">Rp85.000</p>
      </li>
      <li class="kartu-produk">
        <h2 class="nama-produk">Kopi Toraja</h2>
        <p class="deskripsi-produk">Arabika 200 gram, aroma buah.</p>
        <p class="harga-produk">Rp95.000</p>
      </li>
      <li class="kartu-produk">
        <h2 class="nama-produk">Kopi Robusta Lampung</h2>
        <p class="deskripsi-produk">Robusta 200 gram, rasa kuat.</p>
        <p class="harga-produk">Rp70.000</p>
      </li>
    </ul>
  </main>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Tiga kartu produk dengan susunan yang sama: nama, deskripsi, lalu harga
  - Struktur identik antarkartu; hanya teks isinya yang berbeda

1. Baris 12 (komentar): komentar pembatas menandai awal daftar produk pada file yang makin panjang.
2. Baris 13 (ul): class daftar-produk menjadi penanda wadah pola, ditulis dengan kutip ganda.
3. Baris 14-18 (kartu pertama): li kartu-produk memuat h2 nama-produk, p deskripsi-produk, lalu p harga-produk — urutan isi yang tetap.
4. Baris 19-28 (kartu kedua dan ketiga): struktur disalin persis; perbedaan hanya ada pada teks isinya.

Komentar Pembatas dan Style Guide #

Komentar pembatas seperti <!-- Daftar produk --> menandai batas bagian besar pada file panjang. Gunakan secukupnya: satu komentar untuk setiap bagian utama memadai, sedangkan komentar pada setiap tag justru menambah derau. Isi komentar menjelaskan maksud bagian, bukan mengulang nama tag yang terbaca pada baris yang sama.

Semua keputusan kecil pada chapter ini layak dikumpulkan dalam style guide tim sederhana — satu halaman yang menetapkan pola penamaan, kutip, urutan atribut, dan indentasi. Style guide bersifat hidup: butir baru ditambahkan saat tim menemukan pola yang perlu disepakati, dan file lama dirapikan bertahap mengikuti aturan terbarunya.

Markup yang valid, rapi, dan konsisten kini tinggal menghadapi satu tantangan: kesalahan yang lolos dari perhatian kita. Chapter berikutnya menyusun prosedur menemukannya — debugging HTML dari gejala di layar sampai sumber di dalam file.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Global attribute class
• MDN Web Docs — Global attribute id
• 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>Katalog Produk Toko Melati</title>
</head>
<body>
  <main>
    <h1>Katalog Produk</h1>

    <!-- Daftar produk tersaji sebagai kartu dengan pola yang sama -->
    <ul class="daftar-produk">
      <li class="kartu-produk">
        <h2 class="nama-produk">Kopi Gayo</h2>
        <p class="deskripsi-produk">Arabika 250 gram, sangrai medium.</p>
        <p class="harga-produk">Rp85.000</p>
      </li>
      <li class="kartu-produk">
        <h2 class="nama-produk">Kopi Toraja</h2>
        <p class="deskripsi-produk">Arabika 200 gram, aroma buah.</p>
        <p class="harga-produk">Rp95.000</p>
      </li>
      <li class="kartu-produk">
        <h2 class="nama-produk">Kopi Robusta Lampung</h2>
        <p class="deskripsi-produk">Robusta 200 gram, rasa kuat.</p>
        <p class="harga-produk">Rp70.000</p>
      </li>
    </ul>
  </main>
</body>
</html>