Belajar HTML - Kesalahan Umum yang Sering Terjadi Saat Belajar HTML

Halo teman-teman,
Setelah sebelumnya kita membahas tentang cara membuat formulir di HTML, sekarang saatnya kita santai sejenak dan bahas hal yang sering bikin kita garuk-garuk kepala saat ngoding HTML yaitu bloopers alias kesalahan umum!

Kesalahan ini wajar banget terjadi, apalagi kalau kamu masih pemula. Tapi dengan mengenalinya lebih awal, kita bisa lebih cepat belajar dan memperbaiki kesalahan tersebut. Yuk, kita bahas beberapa bloopers yang sering kejadian.

1. Typo pada Tag atau Atribut

Salah ketik tag atau atribut adalah kesalahan paling klasik. Kesalahan ini bisa membuat elemen tidak dikenali oleh browser, sehingga tampilan tidak sesuai harapan.

<!-- Salah -->
<im src="gambar.jpg">

<!-- Benar -->
<img src="gambar.jpg">

Atau:

<!-- Salah -->
document.getElephantBidy

<!-- Benar -->
document.getElementById

Biasanya ini terjadi karena kita mengetik terlalu cepat atau tidak teliti. Untuk menghindarinya, kamu bisa gunakan fitur autocomplete di editor modern atau linter HTML.

2. Lupa Menutup Tag

Beberapa elemen memang self-closing, seperti <img> atau <br>, tapi banyak juga elemen yang harus ditutup dengan benar.

<!-- Salah -->
<p>Ini paragraf yang lupa ditutup

<!-- Benar -->
<p>Ini paragraf yang benar</p>

Lupa menutup tag bisa menyebabkan struktur dokumen jadi kacau dan memengaruhi tampilan seluruh halaman. Lebih baik biasakan menutup tag secepatnya setelah menulis tag pembuka. Saat bekerja dalam tim, kesalahan seperti ini bisa membuat rekanmu kesulitan membaca kode.

3. Struktur Dokumen Tidak Lengkap

Struktur dasar HTML sebaiknya selalu lengkap agar browser bisa memahami dokumen dengan benar. Tidak lengkapnya struktur HTML bisa menyebabkan halaman tampil tidak semestinya atau tidak kompatibel dengan fitur modern HTML5.

<!-- Contoh lengkap -->
<!DOCTYPE html>
<html>
<head>
  <title>Judul</title>
  <meta charset="UTF-8">
</head>
<body>
  <p>Halo dunia!</p>
</body>
</html>

Kalau bagian seperti <!DOCTYPE html> atau <head> tidak ditulis, browser bisa menampilkan halaman dalam mode kompatibilitas yang membatasi beberapa fitur modern.

4. Salah Pakai Tanda Kutip

Setiap nilai atribut dalam HTML harus dibungkus tanda kutip. Tanpa kutip, bisa menyebabkan error parsing.

<!-- Salah -->
<input type=text>

<!-- Benar -->
<input type="text">

Selain menyebabkan error, tidak memakai kutip juga berisiko tinggi saat kamu menggunakan nilai atribut yang mengandung spasi.

5. Mengabaikan Konsistensi dan Kerapihan

HTML memang bisa fleksibel, tapi tetap harus rapi. Kalau tidak, saat kita kembali melihat kodenya di lain waktu bisa membingungkan.

<!-- Kurang rapi -->
<div><p>Paragraf</div></p>

<!-- Lebih baik -->
<div>
  <p>Paragraf</p>
</div>

Gunakan indentasi 2 atau 4 spasi secara konsisten. Ini juga sangat membantu saat bekerja tim dalam proyek besar. Editor seperti VS Code bisa membantu merapikan struktur HTML secara otomatis dengan fitur Format Document. Kode yang rapi membuat kamu lebih mudah melakukan debug atau revisi di masa depan.

6. Menaruh JavaScript atau CSS di Tempat yang Salah

Script atau style yang tidak ditaruh di tempat yang tepat bisa memperlambat loading halaman atau membuat fitur gagal dijalankan.

Misalnya meletakkan <script> di <head> tanpa defer, yang bisa membuat halaman jadi lambat:

<script src="script.js" defer></script>

Atau bisa juga kamu letakkan sebelum </body> agar halaman utama dimuat lebih dulu:

<body>
  <!-- isi halaman -->
  <script src="script.js"></script>
</body>

Untuk CSS, sebaiknya letakkan di <head> agar elemen langsung mendapat gaya saat dimuat. Penggunaan file CSS eksternal juga membantu halaman tetap bersih dan cepat dimuat. Hindari menulis style inline secara berlebihan karena akan menyulitkan pengelolaan.

7. Tidak Menguji Halaman di Berbagai Browser

Beberapa elemen HTML bisa ditampilkan berbeda di masing-masing browser. Kesalahan umum lainnya adalah hanya mengecek di satu browser saja, biasanya Chrome.

Padahal, setiap browser bisa menampilkan dan menafsirkan HTML dengan cara yang sedikit berbeda. Maka dari itu, penting untuk melakukan uji coba lintas browser (cross-browser testing) agar tampilannya konsisten dan fungsional di semua perangkat.

Jangan lupa juga cek versi mobile, karena pengguna smartphone sekarang sangat banyak. Kamu bisa gunakan fitur inspect atau dev tools untuk melihat tampilan versi mobile langsung dari browser.

8. Menggunakan Tag yang Sudah Usang

HTML terus berkembang, dan ada beberapa tag yang sekarang sudah tidak direkomendasikan lagi. Misalnya tag <center> atau <font>.

<!-- Jangan gunakan -->
<center>Selamat Datang</center>

<!-- Gunakan CSS -->
<p style="text-align: center;">Selamat Datang</p>

Alih-alih pakai itu, kamu bisa gunakan CSS untuk mengatur tampilan. Ini penting agar halaman kamu tetap sesuai standar modern dan mudah di-maintain. Mengikuti standar terbaru juga membuat kode kamu lebih tahan masa depan.

9. Tidak Memberi Alt Text pada Gambar

Tag <img> sebaiknya selalu dilengkapi dengan atribut alt. Ini penting bukan hanya untuk SEO, tapi juga untuk aksesibilitas pengguna yang menggunakan screen reader.

<!-- Baik -->
<img src="logo.png" alt="Logo perusahaan">

Selain itu, alt text juga akan muncul sebagai teks alternatif jika gambar gagal dimuat karena koneksi lambat atau error.

10. Tidak Menyimpan File dengan Ekstensi yang Tepat

HTML harus disimpan dengan ekstensi .html. Tapi kadang pemula secara tidak sadar menyimpan file sebagai .txt atau lupa ekstensi sama sekali. Akibatnya, browser tidak tahu bahwa file tersebut adalah halaman web.

Selalu periksa nama file sebelum disimpan, dan pastikan kamu juga menampilkan ekstensi file di file explorer untuk menghindari kebingungan. Kamu juga bisa ubah pengaturan sistem operasi agar menampilkan ekstensi secara default.

11. Tidak Menyediakan Fallback Konten

Saat menggunakan elemen seperti <video>, <audio>, atau bahkan <iframe>, sebaiknya kamu sediakan konten alternatif jika fitur tidak didukung oleh browser pengguna.

<video controls>
  <source src="video.mp4" type="video/mp4">
  Browser kamu tidak mendukung pemutaran video.
</video>

Dengan begitu, pengguna tetap bisa tahu apa yang terjadi meskipun browser mereka tidak bisa menampilkan konten utama.

Jadi, jangan takut kalau kamu pernah melakukan kesalahan-kesalahan ini. Semua orang pernah! Yang penting kita terus belajar dan memperbaiki diri setiap saat.

Kalau kamu punya pengalaman bloopers HTML yang lucu atau bikin kamu belajar sesuatu, share di komentar, yuk!

Sampai di sini dulu materi HTML kali ini. Selamat belajar, dan semoga makin jago ngoding HTML-nya!