Apa itu HTML: Pengertian, Fungsi, dan Cara Kerjanya
Kalau kamu baru mulai belajar bikin website, HTML adalah titik awalnya. Hampir semua yang kamu lihat di browser — artikel ini, tombol, gambar, link — dibangun di atas HTML.
Di artikel ini saya jelaskan apa itu HTML, fungsinya, cara kerja browser menampilkannya, dan contoh struktur halaman pertama. Saya tulis untuk pemula yang benar-benar mulai dari nol, karena dulu saya juga mulai dari sana.
Apa itu HTML?
HTML (singkatan dari HyperText Markup Language) adalah bahasa markup yang dipakai untuk menyusun struktur halaman web. HTML menentukan apa saja yang tampil di halaman: judul, paragraf, gambar, tautan, daftar, tabel, sampai form.
HTML bekerja dengan menandai konten menggunakan tag. Contoh paling sederhana:
<p>Ini paragraf pertama saya.</p>
Di sini <p> adalah tag pembuka, </p> adalah tag penutup, dan teks di antara keduanya adalah kontennya. Browser membaca pasangan tag ini dan menampilkan teks sebagai paragraf.
Fungsi HTML
Fungsi utama HTML:
- Menyusun struktur halaman — membagi halaman menjadi heading, paragraf, gambar, tautan, dan lainnya.
- Memberi makna pada konten — tag seperti
<h1>(judul),<nav>(navigasi),<footer>(kaki halaman) memberi tahu browser dan mesin pencari peran tiap bagian. - Menautkan halaman — lewat tag
<a>, HTML menghubungkan satu halaman dengan halaman lain (itulah asal kata hypertext). - Menyisipkan media — gambar (
<img>), video (<video>), dan audio bisa dimuat lewat HTML.
Struktur Dasar Halaman HTML
Setiap halaman HTML punya kerangka yang sama:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Judul Halaman Saya</title>
</head>
<body>
<h1>Halo, dunia!</h1>
<p>Ini halaman HTML pertama saya.</p>
</body>
</html>
Penjelasan tiap bagian:
<!DOCTYPE html>— memberitahu browser bahwa ini dokumen HTML5.<html>— elemen akar yang membungkus semua konten.<head>— berisi informasi meta (judul, charset, viewport) yang tidak tampil langsung di halaman.<body>— berisi semua konten yang terlihat pengguna.<h1>dan<p>— contoh elemen konten: judul dan paragraf.
Cara Kerja Browser Menampilkan HTML
Saat kamu membuka file .html atau mengunjungi website, browser melakukan ini:
- Mengunduh file HTML dari server.
- Mengurai (parse) HTML menjadi struktur pohon yang disebut DOM (Document Object Model).
- Menerapkan CSS untuk memberi gaya pada elemen.
- Menjalankan JavaScript jika ada.
- Menggambar hasilnya di layar.
Kamu tidak perlu memahami semua detailnya sekarang — yang penting, browser membaca tag HTML dan menampilkan sesuai fungsinya. Jika ada tag yang salah atau tidak ditutup, browser tetap mencoba menampilkan (sangat toleran), tapi hasilnya bisa tidak sesuai.
Apa Beda HTML, CSS, dan JavaScript?
Ini pertanyaan yang paling sering muncul dari pemula:
| Bahasa | Peran | Contoh |
|---|---|---|
| HTML | Struktur — kerangka halaman | <h1>Judul</h1> |
| CSS | Tampilan — warna, ukuran, tata letak | h1 { color: blue; } |
| JavaScript | Perilaku — interaksi dan logika | document.querySelector('h1').click() |
Analogi yang sering saya pakai: HTML itu kerangka rumah (dinding, ruangan), CSS itu cat dan furniturnya, JavaScript itu listrik dan alat yang membuatnya hidup.
Apakah HTML Bahasa Pemrograman?
Tidak. HTML adalah bahasa markup, bukan bahasa pemrograman.
Perbedaan utamanya: bahasa pemrograman (seperti JavaScript, Python, PHP) punya logika — percabangan (if), perulangan (for), variabel. HTML tidak punya semua itu; dia hanya menandai konten dengan tag. Jadi kalau ada yang bilang “HTML itu bahasa pemrograman”, itu kurang tepat.
Untuk bisa bikin website interaktif, HTML perlu ditemani CSS (tampilan) dan JavaScript (logika).
Tips Belajar HTML untuk Pemula
Beberapa hal yang membantu saya waktu belajar dulu:
- Praktik langsung, bukan hafalan — buka VS Code, tulis, simpan dengan nama
index.html, lalu buka di browser. Lihat hasilnya, ubah, lihat lagi. - Buka DevTools browser — klik kanan → Inspect untuk melihat HTML halaman mana pun. Cara terbaik memahami struktur nyata.
- Pelajari elemen yang sering dipakai dulu — heading, paragraf, link, gambar, list, form. Elemen langka nanti menyusul.
- Jangan takut salah — browser sangat toleran dengan HTML yang salah. Kamu tidak akan merusak apa pun.
FAQ — Pertanyaan Umum
Apa itu HTML secara singkat?
HTML (HyperText Markup Language) adalah bahasa markup untuk menyusun struktur halaman web. HTML menentukan apa yang tampil — judul, paragraf, gambar, tautan — sedangkan CSS mengatur tampilannya dan JavaScript perilakunya.
Apa bedanya HTML, CSS, dan JavaScript?
HTML adalah struktur (kerangka), CSS adalah tampilan (warna, ukuran, tata letak), dan JavaScript adalah perilaku (interaksi, logika). Ketiganya bekerja bersama di browser.
Apakah HTML termasuk bahasa pemrograman?
Tidak. HTML adalah bahasa markup, bukan bahasa pemrograman. HTML tidak punya logika seperti percabangan atau perulangan; ia hanya menandai (markup) konten dengan tag.
Apa yang dibutuhkan untuk mulai belajar HTML?
Cukup teks editor (VS Code, Notepad++) dan browser. Tidak perlu menginstal server atau tool khusus — file .html bisa langsung dibuka di browser.
Kesimpulan
HTML adalah fondasi setiap halaman web — bahasa markup yang menyusun struktur dan memberi makna pada konten. Ia berbeda dari bahasa pemrograman, dan bekerja bersama CSS (tampilan) serta JavaScript (perilaku).
Langkah berikutnya setelah artikel ini: buka editor, tulis struktur dasar di atas, dan mulai menambahkan paragraf, gambar, dan tautan. Setelah itu, lanjut ke CSS untuk mengubah tampilannya.
