Hubungan HTML dan CSS

HTML dan CSS selalu bekerja berpasangan, tetapi keduanya tidak pernah saling menggantikan peran. HTML menyimpan struktur dan konten — apa saja yang ada di halaman — sedangkan CSS mengatur bagaimana struktur itu terlihat. Karena CSS membaca struktur yang dibangun HTML, kualitas markup menentukan betapa mudah stylesheet kita ditulis. Pada chapter ini kita melihat bagaimana keduanya terhubung, mengenal hook yang disediakan HTML, dan memanfaatkan elemen semantik agar CSS tetap ringkas.

Dua Peran yang Tidak Bertumpuk #

Pembagian tugasnya bisa diringkas dalam satu tabel:

Contoh konkretnya: teks “Tambah ke Keranjang” adalah konten, sehingga teks itu hanya tinggal di HTML. Warna tombol, sudut melengkungnya, dan jarak di dalamnya adalah tampilan, sehingga semuanya diatur CSS. Saat harga produk berubah kita menyunting HTML; saat skema warna berubah kita menyunting CSS — tanpa menyentuh berkas yang lain.

Selector: Jembatan antara HTML dan CSS #

CSS tidak pernah membaca teks berkas HTML secara langsung; yang dilihat CSS adalah DOM hasil perakitan browser. Selector mengambil elemen dari DOM melalui hook yang disediakan HTML: nama elemen, atribut class, atribut id, hingga atribut lain seperti data-*. Contoh berikut memakai hook class:

<button class="tombol-beli" type="button">Tambah ke Keranjang</button>

.tombol-beli {
  background-color: #0f766e;
  color: #ffffff;
  border-radius: 8px;
  padding: 10px 18px;
}

Pasangan di atas menunjukkan alur kerja keduanya: HTML menyediakan elemen beserta nama class-nya, CSS menemukan elemen itu lewat selector .tombol-beli, lalu browser menggambar hasilnya. Ganti nama class di salah satu sisi tanpa mengganti sisi lainnya, dan keduanya tidak lagi terhubung — aturan tetap ada, tetapi tidak ada elemen yang memakainya.

Markup Semantik Membuat CSS Lebih Mudah #

Elemen semantik membawa makna pada dirinya sendiri: <nav> memang navigasi, <article> memang konten mandiri, dan <button> memang tombol aksi. Bandingkan dua markup berikut:

<!-- Makna hanya tersimpan di nama class -->
<div class="blok-judul-utama">Toko Kopi Senja</div>

<!-- Makna tersimpan pada elemennya -->
<h1>Toko Kopi Senja</h1>

Keduanya menampilkan judul yang sama, tetapi versi semantik memberi tiga keuntungan:

• Selector CSS lebih pendek dan bermakna: cukup h1, tanpa perlu mengingat nama class buatan sendiri.
• Browser menyediakan gaya bawaan yang sudah mendekati kebutuhan, sehingga kita hanya mengubah beberapa property.
• Struktur tetap terbaca oleh screen reader dan mesin pencari — manfaat aksesibilitas yang datang tanpa biaya tambahan.

Kebiasaan baiknya: pilih elemen berdasarkan maknanya terlebih dahulu, baru beri class sebagai hook gaya. Class tetap diperlukan, tetapi ia melengkapi semantik, bukan menggantikannya.

Elemen Umum dan Hook CSS-nya #

Tabel berikut merangkum elemen yang paling sering kita gaya beserta property yang lazim diatur:

Daftar ini bukan untuk dihafal, melainkan untuk memberi gambaran bahwa setiap elemen punya “urusan” CSS yang khas. Sepanjang course ini kita menyentuh semuanya satu per satu.

Markup Sama, Tampilan Berbeda #

Demo berikut membuktikan pemisahan peran itu secara nyata. Kedua kartu memakai markup yang sama persis — judul, harga, dan tombol yang identik; yang membedakan hanya class tema pada wadahnya:

Selector bertingkat seperti .tema-warna .harga menunjukkan cara tema bekerja: gaya dasar diatur sekali pada .produk, lalu setiap tema hanya mengubah beberapa property yang berbeda. Inilah pola yang dipakai library tema dan design system: markup stabil, tampilan berganti-ganti.

Ringkasan #

HTML menyimpan struktur dan konten, CSS mengatur tampilannya, dan selector yang menyatukan keduanya lewat DOM. Markup semantik memberi hook yang jelas sehingga selector tetap pendek dan bermakna. Sampai di sini kita selalu melihat CSS yang sudah terpasang; chapter berikutnya membahas tiga cara resmi memasang stylesheet — berkas eksternal, tag <style>, dan atribut style — beserta konsekuensi masing-masing.