Tiga bahasa di balik satu halaman

HTML: apa isi halaman ini?

Ketika kamu membuka artikel, ada judul, paragraf, daftar, dan tautan°. HTML° menandai peran tiap bagian. Pilihan elemen tidak hanya soal ukuran huruf; judul utama mempunyai makna yang berbeda dari paragraf biasa.

Misalnya, tautan sungguhan dapat dibuka di tab lain dan digunakan lewat keyboard. Teks yang diberi warna seperti tautan belum tentu memiliki perilaku itu. Struktur yang tepat menjadi fondasi pengalaman yang dapat digunakan banyak orang.

<h1>Rasa ingin tahu</h1>
<p>Satu pertanyaan membuka jalan.</p>
<a href="/lexicon/">Jelajahi kamus konsep</a>

CSS: bagaimana tampilannya?

CSS° memberi tampilan pada struktur tersebut. Ia dapat mengatur warna, jarak, ukuran huruf, dan susunan kolom. Tampilan juga dapat menyesuaikan lebar layar tanpa mengganti isi artikel.

Bayangkan catatan yang sama dibaca di ponsel dan monitor. Teksnya tetap sama, tetapi ruang yang tersedia berbeda. Layout responsif membuat pembaca tidak perlu menggeser halaman ke samping hanya untuk mengikuti satu paragraf.

JavaScript: apa yang bisa berubah?

JavaScript° dapat merespons tindakan pembaca. Di Lucia, pencarian menyaring daftar saat kamu mengetik, dan tombol tema menyimpan pilihanmu. Interaksi ini melengkapi halaman yang sudah dapat dibaca.

Browser° membentuk representasi dokumen bernama DOM°. Skrip dapat berinteraksi dengan representasi ini, misalnya memperbarui jumlah hasil pencarian. DOM berbeda dari file HTML sumber, karena keadaan halaman dapat berubah setelah dimuat.

Tetap berguna tanpa semua bagian

Tidak semua halaman membutuhkan JavaScript. Artikel sederhana dapat tetap berguna dengan HTML dan CSS. Saat fitur interaktif gagal atau dimatikan, tautan serta isi utama sebaiknya tetap tersedia.

Coba pikirkan tombol kuis: HTML memberi kontrol dan label, CSS membantu keterbacaan, lalu JavaScript memeriksa pilihan. Tiga peran itu bekerja bersama, tetapi mempunyai tanggung jawab yang dapat dibedakan.