HTML (HyperText Markup Language) adalah bahasa yang dipakai browser untuk menyusun isi sebuah halaman web. Kalau website itu rumah, HTML adalah rangka bangunannya — tembok, lantai, pintu, jendela. CSS nanti yang ngecatnya, JavaScript yang bikin pintunya bisa gerak.
🤔 Tahukah kamu? HTML diciptain Tim Berners-Lee tahun 1991 di lab CERN (tempat eksperimen fisika partikel di Swiss). Tujuan awalnya cuma buat tukeran dokumen ilmiah antar peneliti — gak ada bayangan bakal jadi fondasi internet seluruh dunia 30+ tahun kemudian.
Anatomi Elemen HTML
Setiap potongan HTML disusun dari elemen. Satu elemen biasanya terdiri dari:
<h1>Halo Dunia</h1>
<h1>— tag pembuka (opening tag)Halo Dunia— konten (isi elemen)</h1>— tag penutup (closing tag)
Beberapa elemen bersifat self-closing (tidak punya konten), contohnya <img>, <br>, <input>.
Struktur Dasar Dokumen HTML
Setiap halaman HTML punya kerangka standar seperti ini:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Judul Tab Browser</title>
</head>
<body>
<h1>Halo, ini halaman pertamaku!</h1>
<p>Ini paragraf biasa.</p>
</body>
</html>
<!DOCTYPE html>— memberi tahu browser ini dokumen HTML5.<html>— pembungkus seluruh isi halaman.<head>— metadata (judul, charset, link CSS, dsb). Tidak tampil di layar.<body>— isi yang tampil di halaman web.
🎭 Analogi sehari-hari
HTML = rangka rumah dengan label material ("ini tembok", "ini pintu"). Browser = tukang yang baca blueprint dan ubah jadi rumah jadi. Tag = nama setiap bagian. Atribut = info tambahan ("pintu kayu jati", "tembok 30cm").
DOM tree = silsilah keluarga: <html> kakek, <head> + <body> anak, <h1>, <p>, dst cucu. Indentasi di kode = kedalaman silsilah.
⚠️ Jebakan yang sering ditemui
- Tag tidak ditutup —
<p>halotanpa</p>bisa bekerja secara visual, tapi DOM tree-nya rusak. Always close. - Kapitalisasi tag — HTML case-insensitive, tapi konvensi pakai lowercase (
<div>, bukan<DIV>). - Atribut tanpa kutip —
<input value=hello world>parse sebagai dua atribut. Selalu pakai"...". - Karakter spesial —
<,>,&harus pakai entity (<,>,&) kalau muncul sebagai teks.
Attribute — Info Tambahan pada Tag
Tag bisa punya atribut untuk memberi info tambahan:
<a href="https://google.com">Buka Google</a>
<img src="kucing.jpg" alt="Foto kucing">
href,src,altadalah atribut. Formatnya selalunama="nilai".
💡 Tip: Selalu tulis atribut di dalam tag pembuka, pakai tanda kutip
"..."untuk nilainya. Kebiasaan kecil ini akan menyelamatkan kamu dari bug HTML yang aneh nanti.
TL;DR: HTML = bahasa markup buat susun isi halaman web (rangka rumah). Elemen = tag pembuka + konten + tag penutup (<h1>Halo</h1>). Struktur dasar: <!DOCTYPE html> → <html> → <head> (metadata, gak tampil) + <body> (isi tampil). Atribut format nama="nilai". Selalu tutup tag, lowercase, pakai kutip — kebiasaan dari hari pertama.
