Daftar Isi
- 1. Tidak Menutup Tag HTML dengan Benar
- 2. Menggunakan Tag yang Tidak Valid
- 3. Tidak Menggunakan Elemen Semantik
- 4. Tidak Memeriksa Atribut Alt pada Gambar
- 5. Menyusun Tabel Tanpa Header
- 6. Menggunakan HTML untuk Styling dan Layout
- 7. Tidak Menggunakan Properti dan Atribut untuk Aksesibilitas
- 8. Menggunakan ID yang Tidak Unik
- 9. Tidak Menggunakan Meta Tag untuk Responsivitas
- 10. Tidak Validasi HTML
HTML adalah dasar dari setiap situs web, dan meskipun tampaknya mudah, banyak pemula sering membuat kesalahan saat menulis kode HTML. Kesalahan-kesalahan ini bisa berujung pada tampilan halaman yang buruk, kesulitan dalam pemeliharaan situs, atau bahkan kesalahan fungsionalitas. Berikut adalah 10 kesalahan HTML yang sering dilakukan pemula dan cara untuk menghindarinya:
baca juga : Perpustakaan Modern: Teknologi yang Mempermudah Pengguna dan Pustakawan
1. Tidak Menutup Tag HTML dengan Benar
Kesalahan pertama yang paling umum adalah lupa menutup tag HTML dengan benar. Dalam HTML, setiap elemen harus ditutup dengan tag penutup yang sesuai. Misalnya, tag <p> untuk paragraf harus diakhiri dengan </p>.
Kesalahan:
htmlCopyEdit<p>Ini adalah paragraf
Benar:
htmlCopyEdit<p>Ini adalah paragraf</p>
2. Menggunakan Tag yang Tidak Valid
HTML memiliki tag yang sudah usang atau tidak valid lagi dalam HTML5. Sebagai pemula, sangat penting untuk memeriksa apakah tag yang Anda gunakan masih relevan dengan versi HTML yang Anda pakai.
Kesalahan:
htmlCopyEdit<font color="red">Teks berwarna merah</font>
Benar:
Gunakan CSS untuk styling alih-alih tag <font>.
htmlCopyEdit<p style="color:red;">Teks berwarna merah</p>
3. Tidak Menggunakan Elemen Semantik
HTML5 memperkenalkan elemen semantik seperti <header>, <footer>, dan <article> yang membantu mengatur struktur halaman secara lebih jelas. Banyak pemula masih menggunakan <div> untuk semua elemen tanpa memperhatikan semantik.
Kesalahan:
htmlCopyEdit<div>Header</div>
Benar:
htmlCopyEdit<header>Header</header>
4. Tidak Memeriksa Atribut Alt pada Gambar
Setiap gambar dalam HTML harus memiliki atribut alt. Ini tidak hanya membantu dalam aksesibilitas, tetapi juga berguna untuk SEO.
Kesalahan:
htmlCopyEdit<img src="image.jpg">
Benar:
htmlCopyEdit<img src="image.jpg" alt="Deskripsi gambar">
5. Menyusun Tabel Tanpa Header
Tabel tanpa header (<th>) membuat data sulit untuk dibaca, terutama bagi pengguna dengan gangguan penglihatan yang menggunakan pembaca layar.
baca juga : Rahasia Software Produktif: Tingkatkan Kinerja Tim Anda 10x Lipat!
Kesalahan:
htmlCopyEdit<table>
<tr>
<td>Nama</td>
<td>Umur</td>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
</table>
Benar:
htmlCopyEdit<table>
<tr>
<th>Nama</th>
<th>Umur</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
</table>
6. Menggunakan HTML untuk Styling dan Layout
Seringkali, pemula menggunakan HTML untuk styling atau layout, seperti dengan menggunakan tag <center> atau atribut bgcolor. HTML harus fokus pada struktur, sementara CSS digunakan untuk styling.
Kesalahan:
htmlCopyEdit<center>Ini teks yang dipusatkan</center>
Benar:
htmlCopyEdit<p style="text-align:center;">Ini teks yang dipusatkan</p>
7. Tidak Menggunakan Properti dan Atribut untuk Aksesibilitas
Memastikan bahwa situs web dapat diakses oleh semua orang adalah hal yang sangat penting. Menggunakan atribut seperti aria-label dan tabindex sangat membantu dalam meningkatkan aksesibilitas.
Kesalahan:
htmlCopyEdit<button>Click here</button>
Benar:
htmlCopyEdit<button aria-label="Click here for more information">Click here</button>
8. Menggunakan ID yang Tidak Unik
ID di HTML harus unik di setiap halaman. Penggunaan ID yang sama pada beberapa elemen dapat menyebabkan masalah, terutama dalam JavaScript dan CSS.
Kesalahan:
htmlCopyEdit<div id="header"></div>
<div id="header"></div>
Benar:
htmlCopyEdit<div id="header1"></div>
<div id="header2"></div>
9. Tidak Menggunakan Meta Tag untuk Responsivitas
Untuk memastikan situs web Anda terlihat baik di perangkat seluler, penting untuk menggunakan meta tag viewport di HTML.
Kesalahan:
htmlCopyEdit<head>
<title>Situs Saya</title>
</head>
Benar:
htmlCopyEdit<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Situs Saya</title>
</head>
10. Tidak Validasi HTML
Sering kali, pemula tidak memeriksa apakah kode HTML mereka valid. Menggunakan alat seperti W3C Validator sangat penting untuk memastikan bahwa kode HTML Anda bebas dari kesalahan.
penulis ; Karlina Sapitri