Width dan Height Langsung di HTML Bukan Inline CSS, Ini Penjelasannya
Masih banyak pengembang web yang menganggap penggunaan atribut width dan height langsung pada elemen HTML sama dengan menggunakan inline CSS. Padahal, keduanya merupakan hal yang berbeda. Kesalahpahaman ini cukup sering terjadi, terutama saat melakukan optimasi performa website dan mengurangi penggunaan CSS. Memahami perbedaan keduanya akan membantu Anda menulis kode yang lebih tepat sekaligus mengikuti praktik terbaik dalam pengembangan web.
Atribut width dan height merupakan atribut bawaan HTML yang tersedia pada beberapa elemen tertentu. Sebagai contoh, elemen <img> dapat langsung menggunakan atribut tersebut tanpa harus menambahkan CSS.
<img src="gambar.jpg" width="300" height="200" alt="Contoh">
Pada contoh di atas, width dan height adalah atribut HTML. Browser membacanya sebagai bagian dari struktur dokumen (markup), bukan sebagai aturan tampilan yang berasal dari CSS.
Berbeda dengan itu, inline CSS adalah penulisan CSS secara langsung melalui atribut style. Contohnya seperti berikut.
<img src="gambar.jpg" style="width:300px;height:200px" alt="Contoh">
Pada kode tersebut, ukuran gambar diatur menggunakan properti CSS width dan height yang ditulis di dalam atribut style. Inilah yang disebut inline CSS.
Meskipun kedua contoh tersebut dapat menghasilkan tampilan yang sama, cara browser memprosesnya tidak sama. Atribut HTML memberikan informasi mengenai ukuran elemen sebagai bagian dari dokumen, sedangkan inline CSS merupakan aturan gaya yang diterapkan setelah browser memproses CSS. Oleh karena itu, mengatakan bahwa penggunaan width dan height langsung pada HTML adalah inline CSS merupakan anggapan yang kurang tepat.
Penggunaan atribut width dan height pada elemen <img> bahkan sangat disarankan. Dengan mengetahui dimensi gambar sejak awal, browser dapat menyediakan ruang yang sesuai sebelum gambar selesai dimuat. Hal ini membantu mengurangi pergeseran tata letak halaman atau Cumulative Layout Shift (CLS) sehingga pengalaman pengguna menjadi lebih baik.
Contoh penerapannya adalah sebagai berikut.
<img src="thumbnail.webp" width="72" height="72" loading="lazy" decoding="async" alt="Thumbnail">
Kode di atas tidak menggunakan inline CSS, tetapi tetap memberikan informasi ukuran gambar kepada browser sehingga proses rendering menjadi lebih optimal.
Perlu diketahui bahwa tidak semua elemen HTML memiliki atribut width dan height. Atribut tersebut hanya tersedia pada elemen tertentu yang memang mendukungnya, seperti <img>, <video>, <canvas>, dan <iframe>. Sementara itu, elemen seperti <div>, <section>, <article>, <span>, dan sebagian besar elemen HTML lainnya tidak memiliki atribut bawaan untuk mengatur ukuran.
Sebagai contoh, kode berikut tidak valid karena elemen <div> tidak mendukung atribut width dan height.
<div width="300" height="200"></div>
Untuk elemen seperti <div>, ukuran harus diatur menggunakan CSS, baik melalui kelas (class), ID, stylesheet eksternal, maupun inline CSS.
.box{
width:300px;
height:200px;
}
<div class="box"></div>
Atau jika memang diperlukan, ukuran juga dapat ditulis menggunakan inline CSS.
<div style="width:300px;height:200px"></div>
Jadi, penggunaan CSS untuk mengatur ukuran hanya diperlukan pada elemen yang memang tidak memiliki atribut width dan height, atau ketika ukuran tersebut ingin dibuat responsif, berubah berdasarkan media query, atau dikelola melalui stylesheet.
Kesimpulannya, atribut width dan height pada HTML bukanlah inline CSS. Atribut tersebut merupakan bagian dari spesifikasi HTML dan digunakan untuk memberikan informasi mengenai dimensi elemen tertentu. Sementara itu, inline CSS adalah penulisan aturan CSS melalui atribut style. Memahami perbedaan ini sangat penting, terutama ketika mengoptimalkan performa website. Untuk elemen seperti <img>, penggunaan atribut width dan height merupakan praktik yang dianjurkan karena membantu browser menghitung tata letak lebih awal, mengurangi risiko CLS, dan membuat proses pemuatan halaman menjadi lebih stabil.