Best practice adalah kebiasaan menulis HTML yang bikin halaman kamu benar di semua browser, gampang dibaca orang lain, dan bisa dipakai semua pengguna. Kebanyakan gak kelihatan bedanya di layar, tapi kerasa buat browser, Google dan screen reader (program yang membacakan halaman buat pengguna tunanetra).
🧪 Tebakan cepat: kalau
<html>dikasihlang="id", apa browser otomatis menerjemahkan halamannya? Tebak dulu, jawabannya ada di bagian "Kerangka halaman yang rapi".
Kerangka halaman yang rapi
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Profil</title>
</head>
<body>
<header>
<nav><a href="#">Beranda</a></nav>
</header>
<main>
<h1>Profil Saya</h1>
<img src="foto.jpg" alt="Foto profil">
<label for="nama">Nama:</label>
<input id="nama">
</main>
</body>
</html>
<!DOCTYPE html>ditulis di baris paling atas, persis begitu. Ini bikin browser memakai mode standar. Tanpa ini browser masuk quirks mode (mode lama), dan sebagian CSS berperilaku aneh.<html lang="id">menyebut bahasa halaman. Screen reader jadi membacakan teksnya dengan pelafalan Indonesia.langgak menerjemahkan apa pun, tapi Google dan fitur terjemahan memakainya buat tahu bahasanya.<head>berisi keterangan yang gak tampil:<meta charset="UTF-8">dan<title>, judul yang muncul di tab.<body>berisi yang tampil.<header>adalah bagian atas, di sini membungkus menu<nav>.<main>adalah konten utama.<h1>adalah judul yang tampil di halaman. Beda dengan<title>yang cuma ada di tab.altdi gambar dan<label for>yang sama denganidinput bikin keduanya bisa dibacakan screen reader.
Tag semantik, bukan <div> bernama
<!-- Kurang tepat -->
<div class="header">...</div>
<!-- Lebih baik -->
<header>...</header>
Class header cuma nama buat CSS. Browser dan screen reader gak paham artinya. Tag semantik (tag yang namanya menjelaskan isinya) kayak <header>, <nav> dan <main> punya arti yang dikenali.
Waktu mengganti, tukar tag pembuka dan penutupnya, isinya tetap: <div class="header"> jadi <header>, dan </div> pasangannya jadi </header>. Jangan cuma menambah <header> di sebelah <div> lama, nanti malah jadi dua lapis.
Kebiasaan kecil lainnya
- Tutup setiap tag yang dibuka. Pengecualiannya tag tanpa penutup, kayak
<img>,<input>dan<meta>. - Heading berurutan:
<h1>lalu<h2>, jangan langsung loncat ke<h4>. - Jangan pakai tag usang kayak
<center>, yang sudah gak ada di standar HTML. Rata tengah itu urusan CSS:text-align: center. - Cek halaman kamu di validator.w3.org. Ia menunjukkan tag yang salah tulis atau lupa ditutup.
⚠️ Jebakan yang sering ketemu
- Elemen yang gak boleh saling membungkus.
<a>di dalam<a>, atau<div>di dalam<p>. Browser diam-diam membetulkannya, dan hasilnya sering beda dari maksud kamu. style="..."di mana-mana. Susah diubah nanti. Taruh tampilan di CSS lewat class.- Nama class campur aduk. Pilih satu gaya, biasanya kebab-case:
kartu-profil, bukan campurankartuProfildankartu_profil.
TL;DR: Mulai dengan <!DOCTYPE html> dan <html lang="id">. <head> berisi <meta charset="UTF-8"> dan <title>, <body> berisi <header>, <nav> dan <main>. Ganti <div> bernama dengan tag semantiknya, tanpa membuang isinya. Tutup setiap tag, jaga urutan heading, tinggalkan tag usang kayak <center>, dan cek di validator.
