Belajar HTML - Praktik Penulisan HTML yang Bersih dan Mudah Dipelihara

#Pendahuluan

Kode yang kalian tulis hari ini akan dibaca bulan depan — oleh kalian sendiri atau rekan satu tim. Episode 19 membahas praktik penulisan HTML yang bersih dan mudah dipelihara: indentasi yang konsisten, pemilihan elemen berdasarkan arti, hierarki heading yang logis, penamaan kelas yang jelas, dan linting otomatis.

HTML yang rapi mengurangi bug, mempercepat pencarian elemen, dan membuat alur dokumen mudah dipahami. Sedikit disiplin di awal menghemat banyak waktu di kemudian hari.

#Struktur dan Indentasi

#Indentasi yang Konsisten

Indentasi dua spasi per tingkat adalah standar umum. Setiap elemen turun satu tingkat di dalam elemen induknya:

Indentasi dua spasi

<main>
  <section>
    <h2>Artikel Terbaru</h2>
    <article>
      <h3>Judul Artikel</h3>
      <p>Ringkasan artikel dalam satu paragraf.</p>
    </article>
  </section>
</main>

Jangan campur tab dan spasi dalam satu proyek. Aturan yang seragam membuat git diff lebih bersih dan memudahkan menelusuri perubahan.

#Membatasi Kedalaman Bersarang

Semakin dalam elemen bersarang, semakin sulit dibaca. Jika sudah melewati empat atau lima tingkat, pertimbangkan memecah struktur:

Hindari sarang dalam

<div>
  <div>
    <div>
      <div>
        <p>Terlalu dalam dan sulit dirawat.</p>
      </div>
    </div>
  </div>
</div>

Contoh di atas memakai empat div tanpa arti. Ganti dengan elemen semantik atau restrukturisasi agar ringkas.

#Markup Semantik

#Pilih Elemen Berdasarkan Arti

Setiap elemen membawa arti. Gunakan article untuk konten mandiri, section untuk kelompok bertema, aside untuk pelengkap, dan nav untuk navigasi — bukan div untuk semuanya.

Elemen sesuai arti

<article>
  <h2>Tips Belajar HTML</h2>
  <p>Pelajari dasarnya dulu, baru pola lanjutan.</p>
  <aside>
    <p>Tahukah kalian: article adalah konten yang bisa berdiri sendiri.</p>
  </aside>
</article>

Konten yang kelak diletakkan di halaman lain, seperti postingan blog atau berita, cocok menjadi article. div dan span simpan untuk pembungkus yang benar-benar netral.

#Hierarki Heading yang Logis

Satu h1 per halaman, lalu lanjut berurutan tanpa melompat. Heading adalah kerangka dokumen sekaligus peta navigasi bagi screen reader:

Hierarki heading

<h1>Belajar HTML</h1>
<section>
  <h2>Struktur Dokumen</h2>
  <h3>Elemen Semantik</h3>
  <h3>Praktik Terbaik</h3>
</section>

Melompat dari h2 langsung ke h4 membingungkan pembaca layar. Rapi seperti daftar isi, bukan seperti teks acak.

#Atribut dan Penamaan

#Urutan dan Konsistensi Atribut

Tetapkan urutan penulisan atribut — misalnya id, class, lalu atribut lain — agar cepat dipindai:

Urutan atribut

<a id="tautan-beranda" class="tautan" href="/beranda">Beranda</a>
<img src="foto.png" alt="Puncak gunung di pagi hari" width="640" height="480">

Selalu sertakan alt untuk gambar serta width dan height agar browser tidak melompat saat memuat. Urutan yang konsisten berlaku untuk seluruh file dan seluruh proyek.

#Penamaan Kelas yang Jelas

Nama kelas menjelaskan peran, bukan penampilan. Hindari nama seperti merah atau kiri; pilih nama yang bertahan saat desain berubah:

Kelas berdasarkan peran

<button class="tombol-primer">Simpan</button>
<button class="tombol-sekunder">Batal</button>

tombol-primer dan tombol-sekunder tetap bermakna walau warnanya diganti. Ini pola yang mirip dengan BEM dan mudah dipakai tim mana pun.

#Komentar dan Lint Otomatis

#Komentar yang Menjelaskan Mengapa

Komentar untuk menjelaskan alasan di balik keputusan, bukan menerjemahkan kode:

Komentar yang membantu

<!-- Dibutuhkan untuk integrasi laporan lama -->
<div id="lap-r2" class="laporan" data-format="r2">
  Konten laporan.
</div>

Komentar yang hanya mengulang tag adalah sampah. Jelaskan konteks yang tidak terlihat dari kode, seperti alasan integrasi atau batasan sistem.

#Memeriksa dengan html-validate

Alat lint menangkap masalah yang mudah terlewat. Pasang dan jalankan html-validate di terminal:

npm install --save-dev html-validate
npx html-validate "src/**/*.html"

Perintah npx html-validate "src/**/*.html" memeriksa aksesibilitas, elemen yang salah tempat, dan atribut ganda dalam sekali jalan. Jadikan lint bagian dari alur sebelum commit.

#Latihan: Merapikan Markup

Rapikan blok kode berikut: ganti div dengan elemen semantik, perbaiki heading yang melompat, dan pastikan indentasi rata:

Markup yang perlu dirapikan

<div>
  <h1>Pusat Bantuan</h1>
  <div>
    <h4>Mengatur ulang kata sandi</h4>
    <p>Klik tautan lupa kata sandi pada halaman masuk.</p>
  </div>
  <div>
    <h4>Memperbarui profil</h4>
    <p>Buka menu akun lalu pilih pengaturan.</p>
  </div>
</div>

Versi yang benar memakai section untuk setiap topik dan h2 menggantikan h4. Bandingkan hasil kalian dengan contoh di episode-episode sebelumnya.

#Penutup

Episode 19 membangun kebiasaan menulis: indentasi konsisten, sarang yang dangkal, elemen semantik, hierarki heading logis, penamaan kelas bermakna, dan linting otomatis.

Inti yang harus dibawa pulang:

• Indentasi dua spasi yang konsisten memudahkan membaca dan meninjau perubahan.
• article, section, dan aside menyampaikan arti yang hilang pada div.
• Satu h1 per halaman dan heading yang tidak melompat.
• Nama kelas menggambarkan peran, bukan penampilan.
• Komentar menjelaskan mengapa, bukan apa.
• html-validate menangkap masalah sebelum masuk ke kode produksi.

Di episode 20 selanjutnya kita akan membahas responsive web dengan media queries dan gambar adaptif — layout yang luwes, breakpoint yang masuk akal, serta srcset, sizes, dan picture untuk gambar yang tajam di semua layar.