Praktik Terbaik HTML: Menulis Markup yang Tidak Bikin Menyesal

Sebenarnya kamu bisa menulis HTML yang jalan tanpa tahu satu pun isi artikel ini. Browser itu pemaaf — lupa tag penutup, lewatkan alt di gambar, bungkus semuanya pakai <div>, halamannya tetap muncul. Lalu kalau begitu, buat apa repot-repot belajar “praktik terbaik”?

Karena “jalan” dan “bagus” itu dua hal yang berbeda. HTML yang bagus lebih mudah dibaca, lebih gampang ditata, lebih enak dirawat enam bulan dari sekarang, ramah untuk pengguna screen reader, dan disukai mesin pencari. Semua itu memang tidak kelihatan di jendela browser pada hari pertama — tapi semuanya langsung terasa begitu ada orang (sering kali kamu sendiri di masa depan) yang harus menyentuh kodenya lagi.

Artikel ini merangkum semua materi di section HTML menjadi sekumpulan kebiasaan. Anggap saja ini bukan sintaks baru, melainkan pembeda antara markup yang sekadar tampil dengan markup yang siap dirilis oleh seorang profesional.

Tulis HTML semantik, bukan kumpulan div

Ini kebiasaan paling penting, jadi kita taruh paling depan. Pakai elemen yang menggambarkan apa isinya, bukan asal yang kebetulan kelihatan pas.

Memang menggoda membangun semuanya dari <div> dan <span> karena keduanya netral dan bisa kamu tata sesuka hati. Tapi halaman yang seluruhnya <div> — orang menyebutnya “div soup” — membuang semua makna yang sebenarnya sudah tertanam di HTML. Coba bandingkan dua versi header halaman yang sama ini:

<!-- Div soup: jalan, tapi tanpa makna -->
<div class="header">
  <div class="logo">ACY Partner Indonesia</div>
  <div class="nav">
    <div class="link">Beranda</div>
    <div class="link">Tentang</div>
  </div>
</div>

<!-- Semantik: tampilan sama, makna nyata -->
<header>
  <h1>ACY Partner Indonesia</h1>
  <nav>
    <a href="/">Beranda</a>
    <a href="/tentang">Tentang</a>
  </nav>
</header>

Dua-duanya bisa ditata supaya tampil sama persis. Bedanya, versi kedua memberi tahu browser, screen reader, dan mesin pencari bahwa ini adalah header halaman yang berisi judul utama dan blok navigasi berisi tautan sungguhan. Versi pertama tidak mengatakan apa-apa — cuma tumpukan kotak generik.

Pakai <header>, <nav>, <main>, <article>, <section>, <aside>, dan <footer> untuk menandai bagian-bagian halamanmu, lalu gunakan <button>, <a>, <h1>–<h6>, <p>, <ul>, dan kawan-kawannya sesuai tugas masing-masing. Baru jatuhkan pilihan ke <div> atau <span> kalau memang benar-benar tidak ada elemen bermakna untuk pengelompokan yang kamu butuhkan.

Kalau elemen semantik masih terasa kabur, artikel khusus tentang HTML semantik membahas tiap elemennya satu per satu lewat contoh.

Pakai satu h1 saja, dan jangan loncat tingkat heading

Heading (<h1> sampai <h6>) itu bukan sekadar “teks besar” — mereka membentuk kerangka halamanmu, semacam daftar isi yang diandalkan screen reader dan mesin pencari untuk memahami struktur. Jadi heading harus dipakai berurutan, bukan dipilih berdasarkan ukurannya.

Dua aturan ini sudah mencakup hampir semua kasus:

• Satu <h1> per halaman, yang menggambarkan inti seluruh halaman.
• Jangan loncat tingkat saat menurun. Setelah <h2> boleh <h3>, tapi langsung lompat dari <h2> ke <h4> cuma karena <h4> “ukurannya pas” itu merusak kerangka.

<h1>Belajar HTML</h1>
  <h2>Dasar-Dasar</h2>
    <h3>Elemen dan Tag</h3>
    <h3>Atribut</h3>
  <h2>Tingkat Lanjut</h2>
    <h3>Form</h3>

Kalau ukuran heading tidak cocok dengan desainmu, perbaiki itu lewat CSS — jangan pernah memilih tingkat heading yang “salah” cuma demi mendapat ukuran font tertentu. Tingkat heading menyampaikan tingkat kepentingan dan susunan; soal ukuran itu keputusan styling yang tinggalnya di tempat lain sama sekali.

Selalu beri gambar alt text yang bermakna

Setiap <img> wajib punya atribut alt. Itulah teks yang dibacakan screen reader, dan yang muncul kalau gambarnya gagal dimuat. alt yang baik menggambarkan isi atau tujuan gambarnya, bukan sekadar fakta bahwa itu sebuah gambar:

<!-- Jelek -->
<img src="tim.jpg" alt="gambar" />
<img src="tim.jpg" alt="tim.jpg" />

<!-- Bagus -->
<img src="tim.jpg" alt="Tim ACY Partner Indonesia di acara peluncuran 2026" />

Ada satu pengecualian penting: gambar yang murni dekoratif — garis pembatas, hiasan latar, atau ikon yang berdampingan dengan teks yang sudah menyebutkan hal sama — sebaiknya diberi alt="" yang kosong. Nilai kosong yang sengaja itu memberi tahu teknologi bantu “lewati saja, tidak menambah apa-apa,” dan itu memang tepat. Berbeda dan lebih buruk kalau kamu menghilangkan alt sama sekali: sebagian screen reader malah akan membacakan nama berkasnya, yang sama sekali tidak berguna.

Artikel gambar HTML lanjutan membahas gambar responsif dan format-formatnya kalau kamu mau mendalami.

Beri label form control dengan benar

Form adalah tempat aksesibilitas paling sering berantakan. Aturan emasnya: setiap input butuh label yang terhubung secara programatis dengannya. Cara paling bersih adalah <label> dengan for yang cocok dengan id input-nya:

<label for="email">Alamat email</label>
<input type="email" id="email" name="email" />

Sekarang mengklik label akan langsung memfokuskan input, area sentuhnya jadi lebih luas, dan screen reader membacakan “Alamat email, kolom isian” alih-alih cuma “kolom isian.” Placeholder bukan pengganti label — dia hilang begitu pengguna mulai mengetik, dan teknologi bantu tidak menganggapnya sebagai nama kolom.

Pilih type yang tepat juga. type="email", type="tel", type="number", dan sebagainya memberi pengguna ponsel keyboard layar yang sesuai sekaligus membantu browser melakukan validasi. Ada artikel khusus tentang form dan input HTML kalau kamu butuh menyegarkan ingatan.

Jaga nesting tetap valid

Elemen HTML punya aturan soal apa yang boleh ada di dalam apa, dan melanggarnya memunculkan bug yang bikin pusing dilacak — sebab browser diam-diam “membenarkan” markup-mu dengan cara yang tidak kamu maksudkan.

Beberapa pelanggaran yang paling sering terjadi:

• Jangan taruh elemen block di dalam <p>. Sebuah <p> hanya boleh berisi konten inline. Menaruh <div> di dalam <p> membuat browser menutup paragrafnya lebih awal, dan tiba-tiba tata letakmu jadi kacau.
• Jangan menumpuk elemen interaktif. <button> di dalam <a>, atau <a> di dalam <a> lain, itu tidak valid dan perilakunya tak terduga.
• Tutup tag dengan urutan yang benar. Membuka <strong> lalu <em>? Tutup <em> dulu, baru <strong> — yang paling dalam keluar duluan.

<!-- Salah: elemen block di dalam paragraf -->
<p>Sebagian teks <div>teks lain</div></p>

<!-- Benar -->
<p>Sebagian teks</p>
<div>teks lain</div>

Kalau ada tata letak yang rusak dengan cara yang sama sekali tak masuk akal, nesting yang tidak cocok atau melanggar aturan adalah salah satu hal pertama yang patut kamu curigai.

Beri tanda kutip pada atribut dan tulis nilainya bersih

Kamu sudah ketemu poin ini di artikel atribut HTML, tapi tetap layak diulang sebagai kebiasaan:

• Selalu beri tanda kutip pada nilai atribut. class="card" sudah benar. Nilai tanpa kutip bisa rusak dengan cara yang halus begitu nilainya mengandung spasi.
• Pakai huruf kecil untuk nama elemen dan atribut. <div class="box">, bukan <DIV CLASS="box">. Ini konvensi yang dipakai semua orang, dan lebih enak dibaca.
• Beri nama class dan id yang bermakna. class="kartu-harga" langsung memberi tahu itu apa; class="c1" tidak menjelaskan apa-apa. Nama yang menggambarkan tujuan lebih awet menghadapi redesain ketimbang nama yang menggambarkan tampilan saat ini (class="kotak-biru" jadi jebakan di hari kamu mengubahnya jadi hijau).

Kalau kamu mau mendalami soal penamaan dan beda keduanya, artikel class dan id HTML membahasnya.

Atur hal-hal dasar di head dokumen

Beberapa baris di dalam <head> diam-diam mengerjakan banyak hal, dan menghilangkannya menimbulkan masalah nyata:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Judul halaman yang jelas dan deskriptif</title>
</head>

• <!DOCTYPE html> di baris paling atas menjaga browser tetap di standards mode. Lupakan ini dan kamu berisiko masuk “quirks mode,” tempat aturan tata letak lama yang rusak ikut aktif.
• lang="id" di <html> memberi tahu teknologi bantu dan alat penerjemah bahasa apa yang dipakai halamanmu.
• <meta charset="UTF-8"> memastikan karakter dan emoji tampil dengan benar.
• Tag meta viewport inilah yang membuat halaman benar-benar responsif di ponsel — tanpa ini, browser mobile berpura-pura jadi desktop dan menciutkan semuanya.
• <title> yang nyata dan unik adalah yang muncul di tab browser dan di hasil pencarian. “Untitled Document” itu peluang yang terbuang di setiap halaman.

Artikel head dan meta HTML mengupas semua ini lebih rinci.

Pisahkan struktur dari tampilan dan perilaku

Tugas HTML itu struktur. CSS mengurus tampilan, JavaScript mengurus perilaku, dan menjaga ketiganya di jalurnya masing-masing membuat semuanya lebih mudah dirawat.

Dalam praktiknya, itu berarti menghindari inline style dan inline event handler untuk apa pun yang lebih dari sekadar uji coba sebentar:

<!-- Hindari -->
<p style="color: red; font-size: 20px;" onclick="alert('hai')">Klik aku</p>

<!-- Lebih baik: struktur di sini, tampilan dan perilaku di tempat lain -->
<p class="alert" id="sapaan">Klik aku</p>

Dengan versi kedua, styling-nya tinggal di berkas CSS dan perilaku klik-nya tinggal di berkas JavaScript, keduanya tersambung lewat class dan id. HTML-nya tetap bersih dan enak dibaca, dan kamu bisa mengubah tampilan atau perilaku halaman tanpa harus mengubek-ubek markup mencari atribut style= yang nyasar. Inline style boleh saja untuk eksperimen sekali pakai; cuma jangan jadikan itu cara kamu membangun yang sesungguhnya.

Format untuk manusia: indentasi dan komentar

Browser tidak peduli soal spasi, tapi orang berikutnya yang membaca kodemu peduli — dan orang itu biasanya kamu sendiri. Beri indentasi pada elemen yang bersarang secara konsisten supaya strukturnya kelihatan sekali pandang, lalu selipkan komentar sesekali untuk menandai bagian-bagian besar:

<main>
  <!-- Bagian harga -->
  <section class="pricing">
    <h2>Paket Kami</h2>
    <div class="plan">
      <h3>Starter</h3>
      <p>Gratis selamanya.</p>
    </div>
  </section>
</main>

Kamu tidak perlu memberi komentar di setiap baris — terlalu banyak komentar justru jadi gangguan sendiri. Beri komentar pada alasan dan penanda-penanda besar, biarkan struktur yang bersih bicara untuk sisanya. Indentasi bisa diurus formatter secara otomatis; kalau kamu butuh alat perapi, HTML formatter akan merapikan indentasi markup yang berantakan dalam satu klik.

Validasi HTML-mu

Karena browser diam-diam menambal kesalahan, markup yang rusak bisa bersembunyi lama. Validator membaca HTML-mu berdasarkan spesifikasi yang sebenarnya dan memberitahumu persis apa yang salah — tag yang belum ditutup, id ganda, atribut yang tidak seharusnya ada di elemen itu, atau tingkat heading yang urutannya kacau.

Sesekali menjalankan halaman melalui W3C Markup Validator adalah kebiasaan yang bagus, apalagi sebelum dirilis. Validator menangkap kesalahan struktur kecil yang tidak merusak halaman hari ini tapi akan menggigitmu (atau merusak alat aksesibilitas) nanti. Anggap saja seperti pemeriksa ejaan untuk markup-mu.

Daftar periksa singkat sebelum rilis

Saat sebuah halaman dirasa “selesai,” sapuan cepat dengan daftar ini menangkap sebagian besar masalah yang umum:

• Apakah ada tepat satu <h1>, dan apakah tingkat heading menurun secara berurutan?
• Apakah kamu memakai elemen semantik (<header>, <nav>, <main>, <footer>…) ketimbang div soup?
• Apakah setiap gambar punya alt yang bermakna (atau alt="" yang disengaja kalau dekoratif)?
• Apakah setiap input form tersambung ke sebuah <label>?
• Apakah <head> sudah diatur — doctype, lang, charset, viewport, dan <title> yang nyata?
• Apakah nilai atribut sudah diberi kutip dan namanya masuk akal?
• Apakah struktur terpisah dari tampilan/perilaku — tidak ada inline style atau onclick yang nyasar?
• Apakah halaman lolos validator tanpa error?

Penutup

Tidak satu pun praktik ini sulit. Semuanya kebiasaan kecil yang berulang, dan begitu jadi refleks, kamu akan menulis HTML yang bersih tanpa perlu memikirkannya. Mari rangkum yang paling penting:

• Semantik dulu — pakai elemen yang menggambarkan isinya; <div> itu pilihan terakhir, bukan default.
• Heading itu kerangka — satu <h1>, tanpa loncat tingkat, soal ukuran serahkan ke CSS.
• Aksesibilitas bukan tambahan — alt yang sungguhan, input yang berlabel, lang di <html>.
• Jaga tetap valid — nesting yang masuk akal, atribut yang diberi kutip, <head> yang diatur dengan benar.
• Pisahkan tiga lapisan — HTML untuk struktur, CSS untuk tampilan, JavaScript untuk perilaku.
• Format dan validasi — indentasi untuk manusia, beri komentar pada penanda besar, jalankan validator sebelum rilis.

Tulis HTML dengan cara ini dan kamu bukan cuma membuat halaman yang jalan — kamu membuat halaman yang mudah diakses, gampang dirawat, dan benar-benar profesional. Itulah fondasi tempat semua hal lain dalam pengembangan front-end dibangun. Sekarang markup-nya sudah kokoh, lapisan berikutnya — membuatnya tampil persis seperti yang kamu mau — adalah giliran CSS mengambil alih.