Langsung ke konten

Clean Code HTML: Indentasi, Naming Convention, dan Validasi

Pelajari cara menulis kode HTML yang bersih dan rapi. Pahami indentasi yang benar, naming convention, dan validasi HTML dengan W3C validator.

Tutorial
Belajar HTML untuk Pemula
Belajar HTML untuk Pemula
Advertisement

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah memahami Web Storage, kita masuk ke modul terakhir: Best Practice. Topik pertama: menulis kode HTML yang bersih dan rapi.

Mengapa Clean Code Penting?

Kode yang rapi dan bersih:

  • Mudah dibaca — Developer lain (atau kamu di masa depan) bisa memahami kode
  • Mudah di-maintenance — Perubahan dan perbaikan lebih cepat
  • Mengurangi bug — Struktur yang jelas mengurangi kesalahan
  • Profesional — Menunjukkan standar kerja yang baik

Indentasi yang Benar

Gunakan Konsisten: Spasi atau Tab

Pilih salah satu dan gunakan secara konsisten:

<!-- ✅ Menggunakan 2 spasi -->
<html>
  <head>
    <title>Judul</title>
  </head>
  <body>
    <h1>Hello</h1>
  </body>
</html>

<!-- ✅ Menggunakan 4 spasi -->
<html>
    <head>
        <title>Judul</title>
    </head>
    <body>
        <h1>Hello</h1>
    </body>
</html>

Setiap Level Indentasi

<!-- Level 1: html -->
<html>
  <!-- Level 2: head, body -->
  <head>
    <!-- Level 3: elemen di dalam head -->
    <title>Judul</title>
  </head>
  <body>
    <!-- Level 3: elemen di dalam body -->
    <header>
      <!-- Level 4: elemen di dalam header -->
      <nav>
        <!-- Level 5 -->
        <a href="/">Beranda</a>
      </nav>
    </header>
  </body>
</html>

Contoh yang Salah

<!-- ❌ Indentasi tidak konsisten -->
<html>
<head>
<title>Judul</title>
</head>
<body>
<h1>Hello</h1>
<p>Paragraf</p>
</body>
</html>

<!-- ❌ Indentasi berlebihan -->
<html>
      <head>
            <title>Judul</title>
      </head>
      <body>
            <h1>Hello</h1>
      </body>
</html>

Naming Convention

Class dan ID

Gunakan kebab-case untuk class dan ID:

<!-- ✅ Kebab-case -->
<div class="main-header">
<div class="nav-item">
<div id="hero-section">

<!-- ❌ camelCase -->
<div class="mainHeader">
<div class="navItem">

<!-- ❌ PascalCase -->
<div class="MainHeader">

<!-- ❌ Snake_case -->
<div class="main_header">

Nama yang Deskriptif

<!-- ❌ Tidak deskriptif -->
<div class="box1">
<div class="container">
<div class="wrapper">

<!-- ✅ Deskriptif -->
<div class="product-card">
<div class="user-profile">
<div class="article-content">

Konsistensi Nama

<!-- ❌ Tidak konsisten -->
<div class="product-card">
<div class="ProductCard">
<div class="productCard">

<!-- ✅ Konsisten -->
<div class="product-card">
<div class="user-card">
<div class="article-card">

Komentar yang Berguna

Komentar untuk Penjelasan

<!-- Header: Logo dan Navigasi Utama -->
<header>
  <nav>
    <!-- Link aktif ditandai dengan class "active" -->
    <a href="/" class="active">Beranda</a>
    <a href="/tentang">Tentang</a>
  </nav>
</header>

Komentar untuk Bagian

<!-- ==================== -->
<!-- BAGIAN KONTEN UTAMA -->
<!-- ==================== -->
<main>
  <article>
    <!-- ==================== -->
    <!-- BAGIAN ARTIKEL -->
    <!-- ==================== -->
  </article>
</main>

Komentar untuk Todo

<!-- TODO: Tambahkan form komentar -->
<!-- FIXME: Gambar belum muncul di mobile -->
<!-- HACK: Sementara gunakan inline style -->

Hindari Komentar yang Tidak Perlu

<!-- ❌ Komentar yang menjelaskan kode yang sudah jelas -->
<h1>Judul</h1> <!-- Ini heading -->
<p>Paragraf</p> <!-- Ini paragraf -->

<!-- ❌ Komentar yang sudah tidak relevan -->
<!-- Diperbarui tahun 2020 -->
<p>Teks baru</p>

Penulisan Tag

Self-Closing Tag

<!-- HTML5: tanpa slash -->
<img src="foto.jpg" alt="Foto" />
<br>
<hr>

<!-- XHTML: dengan slash (masih valid di HTML5) -->
<img src="foto.jpg" alt="Foto" />
<br />
<hr />

Pilih salah satu dan gunakan konsisten.

Attribute Order

<!-- Urutan yang disarankan -->
<img
  src="foto.jpg"
  alt="Deskripsi"
  width="300"
  height="200"
  class="responsive"
  id="main-image"
/>

<a
  href="https://example.com"
  target="_blank"
  rel="noopener noreferrer"
  class="external-link"
>
  Link
</a>

Boolean Attribute

<!-- Tanpa nilai (valid di HTML5) -->
<input disabled />
<button type="submit" disabled>Submit</button>

<!-- Dengan nilai (juga valid) -->
<input disabled="disabled" />

Spasi dan Baris Kosong

Spasi Antar Elemen

<!-- ✅ Ada spasi antar elemen -->
<header>
  <nav>
    <a href="/">Beranda</a>
    <a href="/tentang">Tentang</a>
  </nav>
</header>

<!-- ❌ Tidak ada spasi -->
<header><nav><a href="/">Beranda</a><a href="/tentang">Tentang</a></nav></header>

Baris Kosong

<!-- ✅ Baris kosong antar bagian -->
<header>
  <h1>Judul</h1>
</header>

<main>
  <article>
    <h2>Sub-judul</h2>
    <p>Isi artikel...</p>
  </article>
</main>

<footer>
  <p>&copy; 2026</p>
</footer>

Validasi HTML

W3C Validator

Validasi kode HTML menggunakan W3C Validator:

  1. Buka https://validator.w3.org/
  2. Masukkan URL atau upload file
  3. Klik “Check”
  4. Periksa error dan warning

Contoh Error Umum

<!-- ❌ Tag tidak ditutup -->
<p>Paragraf pertama
<p>Paragraf kedua

<!-- ❌ Tag bersarang salah -->
<p><strong>Teks tebal</p></strong>

<!-- ❌ Attribute tanpa nilai -->
<input type="text" value />

<!-- ❌ Duplikat ID -->
<div id="header">Header 1</div>
<div id="header">Header 2</div>

Contoh yang Benar

<!-- ✅ Tag ditutup dengan benar -->
<p>Paragraf pertama</p>
<p>Paragraf kedua</p>

<!-- ✅ Tag bersarang benar -->
<p><strong>Teks tebal</strong></p>

<!-- ✅ Boolean attribute -->
<input type="text" disabled />

<!-- ✅ ID unik -->
<div id="header-1">Header 1</div>
<div id="header-2">Header 2</div>

Tools untuk Clean Code

VS Code Extensions

  • Prettier — Auto-format kode
  • HTMLHint — Linting untuk HTML
  • Auto Rename Tag — Rename tag otomatis
  • Bracket Pair Colorizer — Warna bracket

Konfigurasi Prettier

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

Checklist Clean Code

  • Indentasi konsisten (2 atau 4 spasi)
  • Naming convention kebab-case
  • Class dan ID deskriptif
  • Komentar yang berguna
  • Tidak ada komentar yang tidak perlu
  • Tag self-closing konsisten
  • Spasi antar elemen
  • Baris kosong antar bagian
  • Validasi lulus di W3C Validator
  • Tidak ada error di linter

Ringkasan

  • Gunakan indentasi yang konsisten (2 atau 4 spasi)
  • Gunakan kebab-case untuk class dan ID
  • Buat nama yang deskriptif dan konsisten
  • Tulis komentar yang berguna, hindari yang tidak perlu
  • Validasi kode dengan W3C Validator
  • Gunakan tools seperti Prettier dan linter
  • Ikuti checklist clean code

Langkah Selanjutnya

Kamu sudah memahami cara menulis kode HTML yang bersih. Artikel selanjutnya membahas Accessibility (A11y), cara membuat website yang bisa diakses oleh semua orang.