Docs/HTML/Best Practices

HTML Best Practices

Menulis HTML yang baik membuat kode lebih mudah di-maintain, lebih aksesibel, dan lebih baik untuk SEO.

Struktur & Semantik

  • Selalu mulai dengan <!DOCTYPE html>
  • Gunakan elemen semantik (header, nav, main, dll)
  • Gunakan heading secara hierarki (h1 → h2 → h3)
  • Satu <h1> per halaman

Aksesibilitas

  • Selalu tambahkan alt pada gambar
  • Gunakan <label> pada form inputs
  • Pastikan kontras warna yang cukup
  • Gunakan ARIA attributes jika diperlukan

Performance

  • Gunakan loading="lazy" pada gambar dan iframe
  • Minify HTML untuk production
  • Taruh CSS di <head>, JavaScript sebelum </body>

Lainnya

  • Gunakan lowercase untuk tag dan atribut
  • Selalu tutup tag (kecuali self-closing seperti <br>, <img>)
  • Gunakan indentasi yang konsisten (2 atau 4 spasi)
  • Validasi HTML dengan validator.w3.org
index.html
Try It →
<!-- GOOD: Clean, semantic, accessible -->
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Belajar web development">
  <title>Belajar Web Dev</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav aria-label="Main navigation">
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <h1>Selamat Datang</h1>
    
    <section>
      <h2>Tutorial</h2>
      <article>
        <h3>Belajar HTML</h3>
        <p>HTML adalah fondasi web.</p>
        <img src="html.png" alt="Logo HTML5" loading="lazy" width="200" height="200">
      </article>
    </section>
    
    <form>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>
      <button type="submit">Kirim</button>
    </form>
  </main>

  <footer>
    <p>&copy; 2024 Web Dev ID</p>
  </footer>
  
  <script src="app.js"></script>
</body>
</html>
← Previous
Favicon