BAB 1: Pengenalan HTML

Setiap halaman yang pernah kamu buka di browser — artikel berita, toko online, profil media sosial — semuanya dimulai dari satu hal yang sama: file HTML. Bukan framework, bukan database, bukan server yang canggih. HTML adalah titik awal dari semuanya, dan memahaminya dengan benar akan mengubah cara kamu melihat web secara keseluruhan.

Bab ini membahas apa itu HTML, bagaimana cara kerjanya, dan mengapa ia menjadi fondasi yang tidak bisa dilewati siapapun yang ingin membangun web.

Apa Itu HTML

HTML singkatan dari HyperText Markup Language. Ada dua kata kunci di sini yang layak diperhatikan: HyperText dan Markup.

HyperText berarti teks yang bisa saling menghubungkan satu sama lain. Inilah yang membuat web berbeda dari dokumen biasa — sebuah halaman bisa terhubung ke halaman lain, ke gambar, ke video, ke file yang ada di belahan dunia manapun. Kemampuan ini yang dulu menjadi revolusi besar ketika web pertama kali muncul.

Markup berarti kamu menandai teks dengan tag khusus untuk memberi tahu browser bagaimana konten itu harus diperlakukan. Kata “judul” bisa kamu tandai sebagai heading, kata “penting” bisa kamu tandai sebagai teks tebal, sebuah gambar bisa kamu masukkan dengan tag khusus. Browser membaca tanda-tanda ini dan menerjemahkannya menjadi tampilan visual yang kamu lihat.

HTML bukan bahasa pemrograman. Ia tidak punya logika kondisional, tidak punya variabel, tidak bisa melakukan perhitungan. HTML adalah bahasa deskriptif — kamu mendeskripsikan struktur dan makna konten, bukan bagaimana memproses sesuatu.

Bagaimana Browser Membaca HTML

Bayangkan HTML seperti naskah teater. Naskah itu berisi petunjuk: “ini dialog tokoh utama”, “ini keterangan panggung”, “ini judul babak”. Sutradara — dalam hal ini browser — membaca naskah itu dan mengubahnya menjadi pertunjukan nyata yang bisa ditonton penonton.

Ketika kamu membuka sebuah URL, inilah yang terjadi:

Kamu ketik URL di browser
        |
        v
Browser minta file ke server
        |
        v
Server kirim file HTML (teks biasa)
        |
        v
Browser baca file dari atas ke bawah
        |
        v
Browser bangun tampilan visual dari markup yang dibaca
        |
        v
Halaman tampil di layar

A clean technical flowchart diagram showing how a browser processes an HTML file. Six rectangular steps connected with downward arrows: 1. "Pengguna ketik URL" (blue), 2. "Browser request ke server" (blue), 3. "Server kirim file HTML" (gray), 4. "Browser parsing markup dari atas ke bawah" (orange), 5. "Browser bangun tampilan visual" (orange), 6. "Halaman tampil di layar" (green). White background, flat design, sans-serif font, 16:9 aspect ratio. All text labels in Indonesian.

Browser tidak menampilkan tag HTML itu sendiri. Ketika browser menemukan <h1>Selamat Datang</h1>, yang ditampilkan di layar hanya teks “Selamat Datang” dalam ukuran besar — tagnya tidak terlihat. Inilah yang dimaksud dengan markup: tanda-tanda yang memandu browser, tapi tidak tampil sebagai bagian dari konten.

Satu hal penting: browser modern sangat toleran terhadap kesalahan HTML. Jika kamu lupa menutup sebuah tag, browser tidak akan menampilkan pesan error — ia akan mencoba menebak maksudmu dan tetap menampilkan halaman sebaik mungkin. Ini berbeda dari bahasa pemrograman yang akan langsung berhenti jika ada sintaks yang salah.

Sejarah Singkat HTML

HTML ditemukan oleh Tim Berners-Lee pada 1989 ketika ia bekerja di CERN, Swiss. Ide awalnya sederhana: membuat sistem dokumen yang bisa saling terhubung lewat jaringan komputer. Versi pertama HTML hanya punya belasan tag.

Dari sana HTML terus berkembang — HTML 2.0, HTML 3.2, HTML 4.01 — masing-masing menambahkan kemampuan baru seiring web berkembang. Titik besar terjadi ketika HTML5 diperkenalkan sekitar 2008–2014, membawa dukungan audio, video, canvas, dan banyak API baru yang sebelumnya butuh plugin seperti Flash.

Hari ini HTML tidak lagi diberi nomor versi. Standar HTML dikelola oleh WHATWG sebagai HTML Living Standard — dokumen hidup yang terus diperbarui tanpa menunggu rilis besar. Browser modern mengimplementasikan standar ini secara langsung dan berkesinambungan.

Anatomi Tag HTML

Sebelum masuk ke contoh kode pertama, penting untuk memahami bagaimana tag HTML dibentuk. Sebuah elemen HTML terdiri dari tiga bagian:

<p>Ini adalah paragraf.</p>
^    ^                  ^
|    |                  |
|    konten             tag penutup
tag pembuka

• Tag pembuka — nama elemen di dalam kurung sudut, seperti <p>
• Konten — teks atau elemen lain yang ada di dalam
• Tag penutup — sama dengan tag pembuka tapi dengan garis miring, seperti </p>

Ada juga elemen kosong yang tidak punya konten dan tidak butuh tag penutup. Contohnya <br> untuk baris baru dan <hr> untuk garis horizontal.

Dokumen HTML Pertama

Inilah struktur paling mendasar dari sebuah dokumen HTML yang valid:

<!-- index.html -->
<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <title>Halaman Pertamaku</title>
  </head>
  <body>
    <h1>Halo, Dunia!</h1>
    <p>Ini adalah halaman web pertama yang saya buat.</p>
  </body>
</html>

Mari kita bedah baris demi baris:

<!DOCTYPE html> bukan tag HTML biasa — ini adalah deklarasi yang memberi tahu browser bahwa dokumen ini menggunakan standar HTML modern. Letaknya selalu di baris pertama.

<html lang="id"> adalah elemen akar yang membungkus seluruh konten halaman. Atribut lang="id" memberi tahu browser (dan screen reader) bahwa bahasa halaman ini adalah Indonesia — penting untuk aksesibilitas dan SEO.

<head> berisi informasi tentang halaman yang tidak ditampilkan langsung di layar: charset, judul halaman, meta deskripsi, link ke CSS, dan sebagainya.

<meta charset="UTF-8"> memastikan browser membaca karakter halaman dengan encoding UTF-8 — standar yang mendukung hampir semua karakter dari semua bahasa di dunia, termasuk huruf berdiakritik dan aksara lokal.

<title> menetapkan judul yang muncul di tab browser dan digunakan oleh mesin pencari sebagai judul hasil pencarian.

<body> berisi semua konten yang tampil di layar: teks, gambar, tombol, form — semuanya ada di sini.

Simpan kode di atas sebagai index.html, lalu buka file itu langsung di browser. Kamu tidak butuh server, tidak butuh instalasi apapun. Browser membaca file HTML dari disk lokal sama persis seperti dari internet.

HTML, CSS, dan JavaScript

HTML jarang berdiri sendiri di halaman web modern. Ada dua teknologi lain yang selalu bekerja bersamanya:

CSS (Cascading Style Sheets) mengurus tampilan visual: warna, ukuran teks, layout, animasi. HTML mendefinisikan struktur dan makna, CSS mendefinisikan bagaimana ia terlihat.

JavaScript menambahkan interaktivitas dan logika: tombol yang bereaksi saat diklik, form yang memvalidasi input sebelum dikirim, konten yang berubah tanpa me-reload halaman.

Ketiganya punya peran yang berbeda tapi saling melengkapi:

Dalam ebook ini fokus utamanya adalah HTML. CSS dan JavaScript akan disinggung secukupnya ketika konteks membutuhkannya, tapi kita tidak akan mendalaminya di sini.

Latihan

Sebelum melanjutkan, coba lakukan ini:

1. Buat file baru bernama latihan.html di komputer kamu.
2. Ketik (bukan salin-tempel) kode dari contoh dokumen HTML di atas.
3. Buka file itu di browser dengan cara double-click atau drag ke jendela browser.
4. Coba ubah teks di dalam <h1> dan <p>, simpan, lalu refresh browser.

Perhatikan apa yang berubah dan apa yang tidak. Ini adalah cara terbaik untuk mulai membangun intuisi tentang bagaimana HTML bekerja.

Sejauh ini kamu sudah tahu apa itu HTML, bagaimana browser memprosesnya, dan seperti apa struktur dokumen yang valid. Tapi menulis HTML yang baik dimulai dari alat yang tepat — dan di bab berikutnya kita akan memilih editor teks yang akan menemani kamu selama sisa perjalanan ini.

Referensi

1. 1HTML Living Standard — Introduction (WHATWG)
2. 2The web standards model — MDN Web Docs