HTML (HyperText Markup Language) adalah dasar dari setiap halaman web. Tapi, kode HTML yang berantakan bisa bikin performa web turun, sulit dibaca, dan nggak SEO-friendly. Nah, di artikel ini, kita bakal bahas HTML Style Guide biar kodingan lo lebih rapi, profesional, dan gampang dipahami!
1. Selalu Deklarasikan Document Type
Jangan pernah lupa buat nulis <!DOCTYPE html> di awal file HTML. Ini buat ngasih tahu browser kalau lo pakai HTML5, biar halaman tampil dengan standar yang benar.
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Halo Dunia!</h1>
</body>
</html>2. Gunakan Nama Elemen dengan Huruf Kecil
HTML nggak case-sensitive, tapi buat konsistensi dan biar lebih enak dibaca, selalu pakai huruf kecil buat elemen HTML.
✅ Benar:
<p>Ini paragraf.</p>❌ Salah:
<P>Ini paragraf.</P>3. Tutup Semua Elemen HTML
Jangan lupa tutup elemen HTML yang lo buka biar kode lebih rapi dan menghindari error.
✅ Benar:
<p>Ini paragraf.</p>❌ Salah:
<p>Ini paragraf.4. Gunakan Huruf Kecil untuk Nama Atribut
Sama kayak elemen, nama atribut juga harus pakai huruf kecil buat konsistensi.
✅ Benar:
<img src="gambar.jpg" alt="Gambar contoh">❌ Salah:
<img SRC="gambar.jpg" ALT="Gambar contoh">5. Selalu Gunakan Tanda Kutip untuk Nilai Atribut
Walaupun HTML5 nggak wajibin tanda kutip, lebih baik tetap pakai buat menghindari error.
✅ Benar:
<a href="https://example.com">Klik di sini</a>❌ Salah:
<a href=https://example.com>Klik di sini</a>6. Selalu Tentukan alt, width, dan height untuk Gambar
Atribut alt penting buat SEO dan aksesibilitas. width dan height bantu halaman load lebih cepat.
<img src="foto.jpg" alt="Foto pemandangan" width="600" height="400">7. Gunakan Spasi di Sekitar Tanda Sama Dengan
Biar lebih gampang dibaca, tambahkan spasi di sekitar = dalam atribut.
✅ Benar:
<a href="https://example.com">Klik</a>❌ Salah:
<a href ="https://example.com">Klik</a>8. Hindari Baris Kode yang Terlalu Panjang
Pisahkan kode panjang biar gampang dibaca.
<a href="https://example.com"
title="Kunjungi situs terbaik">
Klik di sini
</a>9. Gunakan Indentasi dan Baris Kosong
Indentasi bikin kode lebih rapi dan mudah dimengerti.
<html>
<head>
<title>Judul</title>
</head>
<body>
<h1>Halo Dunia!</h1>
</body>
</html>10. Jangan Skip <title>
Judul halaman penting buat SEO dan tampilan di tab browser.
<title>Website Keren</title>11. Boleh Skip <html>, <body>, dan <head>?
Browser tetap bisa jalan tanpa <html>, <body>, dan <head>, tapi tetap disarankan pakai buat struktur lebih jelas.
12. Tambahkan Atribut lang
Atribut lang bantu mesin pencari dan screen reader memahami bahasa konten.
<html lang="id">13. Gunakan Meta Data
Meta tag penting buat SEO dan info tambahan ke browser.
<meta charset="UTF-8">
<meta name="description" content="Panduan HTML Style Guide">
<meta name="viewport" content="width=device-width, initial-scale=1.0">14. Setting Viewport untuk Mobile
Biar tampilan responsif di semua perangkat.
<meta name="viewport" content="width=device-width, initial-scale=1.0">15. Gunakan Komentar HTML
Buat catatan atau menonaktifkan kode sementara.
<!-- Ini adalah komentar -->16. Gunakan External CSS
Jangan taruh CSS di dalam HTML, lebih baik pakai file .css.
<link rel="stylesheet" href="style.css">17. Load JavaScript di Bawah
Biar halaman nggak lemot, load JavaScript di akhir sebelum </body>.
<script src="script.js"></script>18. Mengakses Elemen HTML dengan JavaScript
Jangan lupa pakai document.getElementById() atau querySelector().
document.getElementById("judul").innerHTML = "Halo Dunia!";19. Gunakan Nama File dengan Huruf Kecil
Biar konsisten dan nggak bikin error di server case-sensitive.
✅ Benar:gambar-produk.jpg
❌ Salah:GambarProduk.JPG
20. Gunakan Ekstensi File yang Benar
Gunakan .html buat halaman HTML dan .css buat CSS.
21. Bedanya .htm dan .html?
Nggak ada bedanya, tapi .html lebih umum dipakai.
22. Gunakan Nama File Default Seperti index.html
Browser otomatis cari index.html di folder utama, jadi gunakan ini buat halaman utama website lo.
Kesimpulan
Dengan mengikuti HTML Style Guide ini, lo bisa bikin kode yang lebih rapi, gampang dibaca, dan lebih SEO-friendly. Mau bikin website keren? Mulai dari coding yang bersih dulu!
Gimana? Ada yang mau ditambahkan atau ditanya? Drop komentar di bawah!
Komentar