Kenalan dengan HTML, Bahasa Paling Dasar di Web

Selamat datang di Fase 1. Fase orientasi selesai, sekarang kita masak beneran. Tidak ada lagi teori tanpa kode mulai dari sini. Dan titik awal yang paling tepat adalah HTML: bahasa paling dasar di web, fondasi dari semua yang kamu lihat di browser.

Posisinya di perjalanan belajarmu: ini artikel #12 dan episode 1 dari series HTML Basic (#12-16). Di series ini kamu akan menguasai kerangka web: struktur dokumen, teks, link, gambar, list, tabel, form, sampai HTML semantic. Series ini ditutup dengan proyek halaman profil di #16. Setelah itu kita beri "bumbu" tampilan di series CSS Basic (#17-22), lalu "otak" interaktif di JavaScript Basic (#23-29).

HTML Itu Apa: Bahasa Markup, Bukan Bahasa Pemrograman

HTML singkatan dari HyperText Markup Language. Perhatikan kata "markup", bukan "programming". HTML tidak punya logika: tidak bisa menghitung, tidak bisa mengambil keputusan, tidak bisa mengulang. Tugasnya satu: memberi struktur dan makna pada konten. Ini judul, ini paragraf, ini gambar, ini link.

Analoginya: kalau website adalah rumah, HTML adalah kerangka, dinding, dan sekat ruangannya. Ia menentukan apa ada di mana, bukan warnanya (itu CSS) dan bukan perilakunya (itu JavaScript). Rumah tanpa kerangka tidak bisa dicat. Website tanpa HTML tidak bisa diapa-apakan.

Kenapa tetap wajib dipelajari di era AI dan framework? Tiga alasan. Pertama, semua framework (React, Vue, Angular) pada akhirnya menghasilkan HTML. Tidak paham HTML berarti tidak paham apa yang sebenarnya dikirim ke browser. Kedua, AI bisa menuliskan HTML untukmu, tapi kalau strukturnya berantakan kamu tidak akan tahu cara memperbaikinya. Ketiga, HTML yang benar memengaruhi SEO dan aksesibilitas: Google dan screen reader membaca struktur HTML-mu untuk memahami halamanmu.

Anatomi Tag: Kurung Siku Bahasa Web

Satuan terkecil HTML disebut tag. Tag ditulis di dalam kurung sudut < >. Kebanyakan tag berpasangan: tag pembuka dan tag penutup (dengan garis miring), dan di antaranya adalah isi. Pasangan tag + isi disebut elemen.

<p>Halo, ini paragraf pertamaku!</p>

Alur berpikirnya: <p> berkata ke browser "mulai paragraf di sini", teksnya adalah isi, </p> berkata "paragraf selesai di sini". Kenapa harus ada penutup? Karena browser butuh tahu di mana tepatnya paragraf berakhir, supaya yang setelahnya tidak ikut dianggap paragraf. Ini pola yang akan kamu temui di semua tag berpasangan: buka, isi, tutup.

Beberapa tag tidak punya isi sehingga tidak butuh penutup, misalnya <br> (ganti baris) dan <img> (gambar). Tag seperti ini membawa informasinya lewat atribut, yaitu pasangan nama-nilai di dalam tag pembuka. Contoh: <img src="foto.jpg" alt="Foto saya">. Di sini src dan alt adalah atribut. Polanya selalu nama="nilai", dengan tanda kutip. Ini konvensi yang konsisten di seluruh HTML.

Perhatikan atribut alt baik-baik, karena pemula paling sering mengabaikannya. alt adalah teks pengganti gambar: ia dibaca screen reader untuk pengguna tunanetra, ditampilkan saat gambarnya gagal dimuat, dan dibaca Google untuk memahami isi gambarmu (berpengaruh ke SEO gambar). Mengosongkan alt berarti menutup akses bagi sebagian pengguna dan membuang peluang SEO, padahal nulisnya cuma beberapa kata. Aturan mainnya: setiap img wajib punya alt yang menjelaskan isi gambar dengan jujur. Satu-satunya pengecualian adalah gambar murni dekoratif, yang alt-nya memang dikosongkan dengan sengaja (alt="").

Satu lagi yang perlu kamu tahu sejak awal: HTML punya komentar, yaitu catatan yang ditulis untuk manusia tapi diabaikan browser. Formatnya <!-- seperti ini -->. Gunanya menandai bagian kode ("bagian navigasi mulai di sini") supaya gampang dicari. Komentar tidak tampil di halaman, tapi tampil di source code. Pakai secukupnya: komentar yang baik menjelaskan kenapa, bukan mengulang apa yang sudah jelas dari kodenya.

Kerangka Dokumen: Setiap Halaman Punya Struktur yang Sama

Setiap halaman HTML yang valid punya kerangka yang sama. Ini dia, dan ya, kamu harus menghafal polanya (bukan menghafal buta, tapi paham tiap bagiannya):

<!DOCTYPE html>
<html>
  <head>
    <title>Halaman Pertamaku</title>
  </head>
  <body>
    <h1>Halo Dunia!</h1>
    <p>Ini halaman web pertamaku.</p>
  </body>
</html>

Bedah per baris, karena memahami lebih penting dari menghafal:

• <!DOCTYPE html>: bukan tag HTML, tapi deklarasi "dokumen ini HTML versi 5". Selalu baris pertama. Kenapa perlu? Supaya browser memakai mode standar modern, bukan mode kompatibilitas jadul.
• <html>: akar dari semuanya. Seluruh halaman hidup di dalamnya.
• <head>: informasi tentang halaman yang tidak ditampilkan: judul tab browser (<title>), metadata, link ke CSS. Anggap sebagai "kepala surat": penting tapi bukan isi suratnya.
• <body>: semua yang tampil di layar. Inilah wilayah kerjamu 90 persen waktu.
• <h1> dan <p>: contoh isi, heading dan paragraf. Detailnya di artikel berikutnya (#13).

Perhatikan indentasinya (menjorok ke dalam). Browser tidak peduli indentasi, tapi manusia peduli. Indentasi menunjukkan hierarki: siapa anak siapa. Kebiasaan merapikan indentasi dari hari pertama akan menyelamatkanmu saat dokumenmu sudah ratusan baris.

Mitos 1: HTML Itu Bahasa Pemrograman

Pemula (dan kadang lowongan kerja yang asal tulis) menyebut HTML sebagai bahasa pemrograman. Bukan. Bahasa pemrograman punya logika: percabangan, perulangan, variabel. HTML tidak punya ketiganya. Ia bahasa markup: memberi tanda pada konten.

Kenapa pelurusan ini penting? Karena menentukan ekspektasi belajarmu. Belajar HTML bukan belajar "berpikir seperti komputer", tapi belajar "menyusun struktur yang bermakna". Skill-nya beda: ketelitian, konsistensi, dan pemahaman makna tiap elemen. Nanti, saat belajar JavaScript di #23, barulah kamu belajar berpikir logis. Jangan campur targetnya.

Mitos 2: HTML Sudah Tidak Penting, Kan Ada AI dan Framework

Versi modern dari mitos ini: "ngapain belajar HTML, kan AI bisa bikinin, kan pakai React saja". Tiga bantahannya sudah disinggung di pembuka, tapi ada satu yang paling praktis: saat output AI atau framework-mu rusak tampilannya, yang kamu debug adalah HTML hasil akhirnya. Orang yang paham HTML menemukan masalahnya dalam 2 menit ("oh, tag-nya tidak tertutup"). Orang yang tidak paham menghabiskan 2 jam menebak-nebak.

Fondasi yang membosankan adalah fondasi yang paling sering menyelamatkanmu. HTML adalah salah satunya.

Elemen-elemen Pertama yang Wajib Kenal

Sebagai bekal sebelum artikel berikutnya, kenalan dengan keluarga besar HTML:

• Teks: <h1> sampai <h6> (heading), <p> (paragraf). Detail penuh di #13.
• Link dan media: <a> (link), <img> (gambar). Dibahas di #14.
• Pengelompokan: <div> (blok generik) dan <span> (inline generik). Wadah serbaguna sebelum kamu kenal yang semantic.
• List, tabel, form: <ul>, <table>, <form>. Dibahas di #15.
• Semantic: <header>, <nav>, <main>, <article>, <footer>. Dibahas di #16.

Tidak perlu dihafal sekarang. Cukup tahu mereka ada dan apa perannya secara garis besar. Tiap artikel series ini mengupas satu keluarga sampai tuntas.

Latihan dan Langkah Berikutnya

Praktik pertama. Ingat: ubah dan tambah, bukan ketik ulang buta.

1. Buat file halaman-pertamaku.html. Salin kerangka dokumen di atas, buka di browser. Lalu ubah: ganti judul tab-nya, ganti isi h1 dengan namamu, tambah satu paragraf baru tentang hobimu di bawah paragraf yang ada. Tiga perubahan, dan kamu sudah "ngoding" beneran.
2. Rusak dengan sengaja (lalu perbaiki). Hapus satu tag penutup, refresh browser, perhatikan apa yang berubah. Lalu kembalikan. Latihan ini melatih matamu membaca struktur, skill yang akan dipakai terus sampai kapan pun.

Langkah berikutnya: artikel #13, Heading, Paragraf, dan Format Teks di HTML. Episode 2 series HTML Basic. Kita bedah keluarga teks sampai tuntas: hierarki heading yang benar, perbedaan b vs strong yang sering dikira sama, dan aturan-aturan kecil yang membedakan HTML rapi dan HTML berantakan. Sampai jumpa.