Apa itu HTML dan Cara Kerjanya
HTML adalah bahasa dasar yang digunakan untuk membuat halaman web. Setiap website yang kamu kunjungi — dari Google, YouTube, hingga Instagram — semuanya dibangun menggunakan HTML. Mari kita pelajari apa itu HTML, bagaimana cara kerjanya, dan mengapa HTML menjadi pondasi utama dalam web development.
🌐 Apa itu HTML?
HTML adalah singkatan dari HyperText Markup Language. Mari kita pecahkan istilah ini:
HyperText
Teks yang bisa menghubungkan ke halaman lain melalui link (hyperlink)
Markup
Sistem penandaan untuk memberi struktur pada konten (heading, paragraf, dll)
Language
Bahasa yang dipahami oleh browser untuk menampilkan halaman web
💡 Penting: HTML bukan bahasa pemrograman — HTML adalah bahasa markup. HTML tidak bisa melakukan logika seperti if/else atau loop. HTML hanya memberi struktur pada konten.
🏗️ Analogi: HTML sebagai Kerangka Rumah
Bayangkan membangun sebuah rumah:
🏗️
HTML = Struktur
Fondasi, dinding, atap, pintu, jendela — kerangka bangunan
🎨
CSS = Desain
Cat, wallpaper, furniture, dekorasi — tampilan & keindahan
⚡
JavaScript = Interaksi
Listrik, air, AC, smart home — fungsi & interaktivitas
⚙️ Bagaimana HTML Bekerja?
Ketika kamu membuka sebuah website di browser, ini yang terjadi di balik layar:
Kamu mengetik URL di browser
Misalnya: www.fullstacktalent.id
Browser mengirim request ke server
Server menerima permintaan dan mencari file yang diminta
Server mengirim file HTML ke browser
File HTML berisi kode markup yang mendefinisikan struktur halaman
Browser me-render (menampilkan) halaman
Browser membaca kode HTML dan mengubahnya menjadi tampilan visual yang kamu lihat
💻 Contoh Kode HTML Pertamamu
Berikut adalah contoh kode HTML paling sederhana:
<!DOCTYPE html>
<html>
<head>
<title>Halaman Pertamaku</title>
</head>
<body>
<h1>Halo Dunia! 👋</h1>
<p>Ini adalah halaman web pertama saya.</p>
</body>
</html>📝 Penjelasan Kode:
<!DOCTYPE html>
Memberitahu browser bahwa ini adalah dokumen HTML5
<html>
Element root (akar) — semua kode HTML berada di dalamnya
<head>
Berisi metadata (info tentang halaman yang tidak ditampilkan langsung)
<title>
Judul halaman yang muncul di tab browser
<body>
Isi halaman yang ditampilkan kepada pengguna
<h1>
Heading utama (judul terbesar)
<p>
Paragraf teks
🏷️ Memahami Tag HTML
HTML menggunakan tag untuk menandai konten. Setiap tag dibungkus dengan tanda kurung sudut
< >.
Anatomi sebuah element HTML:
✅ Ingat: Hampir semua tag HTML memiliki tag pembuka dan tag
penutup.
Tag penutup selalu memiliki garis miring / sebelum nama
tag.
🧪 Coba Sendiri!
Ikuti langkah-langkah berikut untuk membuat halaman HTML pertamamu:
Buka Text Editor
Gunakan VS Code (rekomendasi), Notepad, atau text editor lainnya
Ketik kode HTML di atas
Salin kode contoh dan tempel di text editor
Simpan sebagai index.html
Pastikan file disimpan dengan ekstensi .html
Buka file di browser
Double-click file tersebut, atau drag & drop ke browser. Kamu akan melihat hasilnya! 🎉
📋 Ringkasan
<tag>konten</tag>
<html>, <head>, <body>