Pernah Membangun Gedung Tanpa Fondasi? Tentu Tidak.
Bayangkan Anda seorang arsitek andal. Anda punya cetak biru untuk sebuah gedung pencakar langit yang megah, lengkap dengan interior mewah, fasad kaca futuristik, dan teknologi canggih. Anda bersemangat untuk memulai. Namun, Anda memutuskan untuk melewatkan satu langkah: membangun fondasi. Anda langsung memasang dinding baja dan jendela berkilauan di atas tanah lunak. Apa yang akan terjadi? Tentu saja, bencana.
Inilah analogi paling tepat untuk seorang developer yang langsung melompat ke framework modern seperti React, Vue, atau Angular tanpa menguasai dasar-dasar HTML. Framework adalah interior mewah dan teknologi canggih itu. Sedangkan HTML? HTML adalah fondasi beton bertulang yang kokoh dan tak terlihat, yang menopang segalanya.
Saya sering melihat developer junior terjebak dalam siklus ini. Mereka bisa membuat komponen canggih, tapi bingung saat menghadapi masalah layout sederhana atau performa yang buruk. Pertanyaannya bukan lagi "bisakah Anda menggunakan framework?", melainkan "apakah Anda benar-benar mengerti apa yang sedang Anda bangun?"
1. Browser Hanya "Berbicara" dalam Tiga Bahasa
Ini adalah kebenaran fundamental yang sering terlupakan. Secanggih apa pun framework yang Anda gunakan, pada akhirnya, ia harus "diterjemahkan" menjadi sesuatu yang dimengerti oleh browser. Dan browser di seluruh dunia—Chrome, Firefox, Safari—hanya fasih dalam tiga bahasa inti:
- HTML untuk struktur dan konten.
- CSS untuk presentasi dan gaya.
- JavaScript untuk interaktivitas dan perilaku.
Kode JSX di React atau template di Vue.js tidak dikirim langsung ke browser. Ada proses kompilasi atau transpilation yang mengubah kode canggih itu menjadi HTML, CSS, dan JavaScript standar. Jadi, ketika terjadi masalah, Anda tidak bisa hanya menyalahkan framework. Seringkali, masalahnya terletak pada hasil akhir HTML yang salah, dan tanpa pengetahuan dasar, Anda akan seperti mencari jarum di tumpukan jerami.
2. Debugging: Dari Mimpi Buruk Menjadi Hal Sepele
Saat "Inspect Element" Menjadi Sahabat Terbaik Anda
Seorang developer yang mahir menggunakan DevTools browser adalah seorang developer yang efektif. Saat sebuah komponen React tidak tampil seperti yang diharapkan, langkah pertama bukanlah melihat kode React-nya, melainkan membuka tab "Elements" atau "Inspector". Apa yang Anda lihat di sana? Bukan JSX, melainkan struktur DOM (Document Object Model) yang merupakan representasi dari HTML.
Tanpa pemahaman tentang bagaimana elemen HTML seharusnya bersarang (nesting), atribut apa yang valid, atau apa perbedaan antara elemen <div> dan <span>, Anda akan kesulitan memahami mengapa layout Anda berantakan. Anda mungkin menghabiskan berjam-jam mengubah state di React, padahal solusinya sesederhana memperbaiki tag HTML yang tidak ditutup dengan benar.
Contoh Nyata: Kasus Tombol yang "Hilang"
Seorang developer junior, sebut saja Budi, sedang mengerjakan sebuah komponen modal dengan React. Di dalamnya ada tombol "Tutup". Anehnya, tombol itu tidak bisa diklik. Setelah frustrasi berjam-jam, seorang senior melirik kodenya. Ternyata, Budi secara tidak sengaja menempatkan komponen tombol di dalam tag <p> yang memiliki properti CSS z-index: -1 dari file CSS global. Masalahnya bukan di logika React, tapi murni pada struktur HTML dan CSS yang dihasilkan.
3. SEO dan Aksesibilitas: Dua Pilar yang Sering Diabaikan
Mesin pencari seperti Google tidak "melihat" website Anda; mereka "membacanya". Crawler Google memindai struktur HTML untuk memahami konten halaman Anda. Menggunakan tag HTML semantik yang tepat adalah krusial.
"Menggunakan tag semantik seperti<header>,<nav>,<main>, dan<article>memberikan konteks yang jauh lebih kaya bagi mesin pencari dan teknologi pembantu (assistive technologies) daripada hanya menggunakan tumpukan<div>." - Mozilla Developer Network (MDN)
Di sisi lain, aksesibilitas web (sering disebut a11y) memastikan bahwa semua pengguna, termasuk penyandang disabilitas, dapat menggunakan situs Anda. Pengguna tunanetra, misalnya, mengandalkan screen reader yang membacakan struktur HTML halaman. Jika Anda hanya menggunakan <div> untuk segalanya, screen reader tidak akan bisa membedakan mana judul, mana tombol, dan mana paragraf biasa.
Faktanya, sebuah studi oleh WebAIM pada Februari 2023 terhadap satu juta halaman utama menemukan bahwa 96.8% di antaranya memiliki kegagalan WCAG 2 (Web Content Accessibility Guidelines). Sebagian besar masalah ini bersumber dari penggunaan HTML yang tidak tepat, seperti kontras rendah, teks alternatif gambar yang hilang, dan navigasi yang membingungkan.
4. Performa Bukan Hanya Soal Kecepatan JavaScript
Framework modern memang cepat, tapi mereka bisa menjadi lambat jika digunakan secara tidak bijaksana. Salah satu penyebab utama performa buruk adalah "DOM bloat" atau struktur HTML yang terlalu kompleks dan dalam.
Setiap kali state berubah di aplikasi Anda, framework akan memperbarui DOM. Semakin banyak elemen yang harus diperiksa dan diubah, semakin lambat prosesnya. Developer yang memahami HTML akan berpikir dua kali sebelum membuat 10 lapisan <div> bersarang hanya untuk memposisikan sebuah ikon. Mereka akan mencari cara yang lebih efisien menggunakan HTML dan CSS yang lebih bersih.
Studi Kasus: Toko Online "Ceria Mart"
"Ceria Mart" membangun situs e-commerce mereka dengan framework terbaru. Halamannya interaktif, tapi sangat lambat saat pertama kali dimuat. Setelah dianalisis, ternyata setiap produk di halaman daftar ditampilkan dengan struktur HTML yang memiliki lebih dari 20 elemen bersarang. Dengan mengoptimalkan struktur ini menjadi hanya 8 elemen per produk menggunakan teknik HTML dan CSS yang lebih baik, waktu muat halaman (First Contentful Paint) mereka berkurang hingga 40%.
5. Fondasi Kokoh untuk Pertumbuhan Karier
Teknologi datang dan pergi. Framework yang populer hari ini mungkin akan usang lima tahun lagi. Ingat jQuery? Atau Backbone.js? Mereka pernah menjadi raja.
Namun, apa yang tidak akan pernah usang? HTML. Ia adalah standar web yang telah bertahan selama puluhan tahun dan akan terus menjadi fondasi internet. Menguasai HTML berarti Anda memiliki keterampilan yang transferable. Anda bisa dengan mudah beradaptasi dengan framework baru di masa depan karena Anda memahami prinsip dasar di baliknya.
Menariknya, ini membuat Anda menjadi developer yang lebih berharga. Anda bukan sekadar "Developer React", tapi "Developer Web" sejati yang bisa memecahkan masalah dari akarnya, bukan hanya di permukaan.
Kesimpulan: Jangan Hanya Jadi Operator, Jadilah Arsitek
Kembali ke analogi gedung kita. Menggunakan framework tanpa memahami HTML itu seperti menjadi operator derek yang hanya tahu cara mengangkat balok baja, tapi tidak mengerti mengapa balok itu harus diletakkan di sana. Anda bisa membangun sesuatu, tapi Anda tidak memiliki visi arsitekturalnya.
Framework adalah alat bantu yang luar biasa untuk produktivitas. Mereka bukan jalan pintas untuk menghindari belajar fundamental. Jadi, sebelum Anda menyelam lebih dalam ke hook React berikutnya atau direktif Vue selanjutnya, saya tantang Anda untuk meluangkan waktu sejenak. Buka kembali dasar-dasar HTML Anda, pelajari tentang semantik, aksesibilitas, dan struktur DOM yang efisien.
Saya jamin, itu adalah investasi terbaik yang bisa Anda buat untuk karier Anda sebagai seorang developer web profesional.
