Best Practices — HTML

Kode yang "jalan" itu standar minimum. Kode yang "jalan + maintainable + accessible + SEO-friendly + cepat" itu standar profesional. Bedanya tipis tapi besar…

Kode yang "jalan" itu standar minimum. Kode yang "jalan + maintainable + accessible + SEO-friendly + cepat" itu standar profesional. Bedanya tipis tapi besar dampaknya. Lesson ini ngumpulin praktik HTML yang sering dilewatin pemula tapi jadi pembeda antara hobby project dan production code. Bukan soal "harus" — soal kebiasaan baik yang otomatis bikin kerjaan kamu kelihatan beda dari yang lain.

🤔 Audit website terkenal. Coba run Lighthouse (built-in di Chrome DevTools) ke 5 website populer Indonesia (Tokopedia, Detik, Tempo). Skor accessibility-nya seringkali masih di bawah 90, walau dibikin tim besar. Best practices HTML itu universal — beda hobby vs production = konsistensi mematuhi aturan dasar yang sama.

1. Selalu Mulai dengan DOCTYPE & lang

<!DOCTYPE html>
<html lang="id">

Tanpa <!DOCTYPE html>, browser masuk ke "quirks mode" dan banyak CSS modern akan berperilaku aneh. Atribut lang penting untuk screen reader dan terjemahan otomatis.

2. Minifikasi Atribut (Tapi Jangan Berlebihan)

Boolean attributes cukup ditulis tanpa nilai:

<input type="email" required>
<video controls autoplay muted></video>

3. Jaga Aturan Nesting

Beberapa elemen tidak boleh saling membungkus. Contoh paling umum:

<!-- ❌ <a> tidak boleh di dalam <a> -->
<a href="/artikel"><a href="/">beranda</a></a>
<!-- ❌ <button> tidak boleh berisi <button> atau <a> -->
<button><a href="/">klik</a></button>
<!-- ❌ <p> tidak boleh berisi blok seperti <div> atau heading -->
<p>teks <div>blok</div></p>

Browser akan memperbaiki markup-mu secara diam-diam, tapi hasilnya tidak konsisten antar browser.

4. Kelola Whitespace dan Encoding

5. Tulis Komentar yang Menjelaskan "Kenapa", Bukan "Apa"

<!-- ❌ menjelaskan yang sudah jelas -->
<!-- Navigasi -->
<nav>...</nav>

<!-- ✅ menjelaskan keputusan -->
<!-- Sengaja pakai role="navigation" karena beberapa screen reader
     lama belum mengenali <nav> -->
<nav role="navigation">...</nav>

6. Konsisten Penamaan ID & Class

Pilih satu konvensi (kebab-case biasanya): user-profile-card, bukan campuran userProfileCard, user_profile_card. Ini mempermudah pencarian dan refactor nanti.

7. Validasi HTML

Tempelkan HTML kamu ke validator.w3.org. Banyak bug aksesibilitas dan layout berawal dari markup yang "terlihat benar" tapi sebenarnya invalid.

8. Kurangi <div> Soup

Kalau satu blok punya 5 <div> bersarang hanya untuk styling, kemungkinan besar CSS-nya bisa disederhanakan. Struktur yang rapi bikin CSS dan JavaScript lebih mudah di-maintain.

🎭 Analogi sehari-hari

Best practice HTML itu kayak resep masakan turun-temurun nenek — bukan sekadar bisa makan, tapi tau kenapa bumbu A masuk dulu sebelum B. Bisa aja kamu nyemplungin semua bumbu sekaligus (browser auto-fix), masakan keluar juga. Tapi rasanya beda, dan pas dimakan rame-rame langsung ketauan ada yang janggal. Ikut alur yang bener = HTML kamu bakal awet, gampang di-maintain temen sekelompok, dan pas di-debug 6 bulan kemudian gak bikin pusing.

⚠️ Jebakan yang sering ditemui

TL;DR: HTML best practices = kebiasaan kecil yang bikin kode jadi maintainable + accessible + SEO-friendly. Wajib: <!DOCTYPE html> + lang="id" di <html>. Boolean atribut tanpa nilai (required controls). Jaga aturan nesting (gak boleh <a> dalam <a>, <div> dalam <p>). UTF-8 encoding. Comment soal "kenapa", bukan "apa". Konsisten naming (kebab-case). Hindari div soup, inline style, dan inline onclick. Validate di validator.w3.org.

Yang akan kamu pelajari