Belajar HTML Dasar untuk Pemula (Panduan Lengkap 2026)

Pernah kepikiran nggak, gimana sih sebuah halaman web itu dibikin? Coba perhatiin deh — semua website yang kamu buka hari ini, mulai dari blog, toko online, sampai media sosial, semuanya berdiri di atas satu fondasi yang sama: HTML.

Kabar bagusnya, HTML itu gampang banget dipelajari. Kamu nggak perlu jago matematika, nggak butuh komputer mahal, dan nggak usah install macam-macam dulu. Kita bakal mulai dari nol banget di sini, pelan-pelan, sampai kamu bisa bikin halaman web pertama buatanmu sendiri.

Apa sih HTML itu?

HTML itu singkatan dari HyperText Markup Language. Tapi lupain dulu kepanjangannya yang ribet. Intinya gampang kok: HTML itu kerangka dari sebuah halaman web.

Anggap aja kamu lagi bangun rumah. Nah, HTML itu ibarat rangka sama dindingnya — yang nentuin mana ruang tamu, mana kamar, mana dapur. Nanti dia juga punya temen-temen:

HTML → kerangka & isi (teks, gambar, tombol).
CSS → tampilan & gaya (warna, font, layout).
JavaScript → interaksi (animasi, klik, form pintar).

Buat sekarang, fokus dulu aja ke HTML. Soalnya ini pintu masuk yang paling penting.

Yang kamu butuhin (cuma 2, kok)

Nggak ada alasan buat nunda-nunda, soalnya modalnya cuma dua:

Teks editor — Notepad juga jadi. Tapi jujur, lebih enak pakai VS Code (gratis).
Browser — Chrome, Firefox, atau apa pun yang udah nangkring di perangkatmu.

Udah, itu doang. Nggak perlu install software berat-berat.

Struktur dasar dokumen HTML

Tiap halaman HTML punya kerangka standar yang bentuknya selalu sama. Ketik kode di bawah ini di editor kamu, terus simpan dengan nama index.html:

<!doctype html>
<html lang="id">
  <head>
    <meta charset="utf-8" />
    <title>Halaman Pertamaku</title>
  </head>
  <body>
    <h1>Halo, dunia!</h1>
    <p>Ini halaman web pertama buatanku.</p>
  </body>
</html>

Abis itu, buka file index.html-nya pakai browser (klik dua kali aja). Nah, selamat — kamu barusan bikin halaman web! 🎉

Sekarang kita bongkar satu-satu biar kamu paham tiap barisnya:

<!doctype html> — ini ngasih tahu browser, "eh, ini dokumen HTML modern ya."
<html lang="id"> — pembungkus seluruh halaman. Bagian lang="id" nandain kalau bahasanya Indonesia (bagus buat SEO & aksesibilitas).
<head> — bagian "di balik layar": judul tab, info buat Google, dan sejenisnya. Nggak keliatan langsung di halaman.
<title> — teks yang nongol di tab browser, sekaligus jadi judul pas muncul di hasil pencarian Google.
<body> — isi yang keliatan: teks, gambar, tombol — semuanya ngumpul di sini.

Kenalan sama "tag" HTML

HTML itu ditulis pakai tag, yaitu kata yang dibungkus kurung siku. Kebanyakan tag itu berpasangan — ada pembuka, ada penutup.

<p>Ini sebuah paragraf.</p>

<p> itu yang buka, </p> yang nutup (perhatiin, ada garis miringnya). Apa pun yang kamu taruh di antara keduanya bakal jadi isi paragraf.

Tag yang paling sering kepakai

<h1>Judul Besar</h1>
<h2>Sub-judul</h2>
<p>Paragraf untuk teks biasa.</p>

<a href="https://razinsaid.com">Ini sebuah link</a>

<img src="foto.jpg" alt="Deskripsi foto" />

<ul>
  <li>Item daftar 1</li>
  <li>Item daftar 2</li>
</ul>

Biar nggak bingung, ini penjelasan singkatnya:

<h1> sampai <h6> → judul, dari yang paling gede ke paling kecil. <h1> idealnya dipakai sekali aja per halaman (biasanya buat judul utama).
<p> → paragraf buat teks biasa.
<a href="..."> → link ke halaman lain. Bagian href itu diisi alamat tujuannya.
<img src="..." alt="..."> → nampilin gambar. Si alt itu teks pengganti kalau gambarnya gagal kemuat (dan ini juga dibaca sama Google + pembaca layar).
<ul> + <li> → bikin daftar berpoin.

Praktik: bikin halaman "Tentang Saya"

Teorinya udah cukup lah ya — sekarang waktunya praktik. Kita gabungin semua yang tadi kamu pelajari jadi satu halaman utuh:

<!doctype html>
<html lang="id">
  <head>
    <meta charset="utf-8" />
    <title>Tentang Saya</title>
  </head>
  <body>
    <h1>Halo, aku Razin 👋</h1>
    <p>Aku lagi belajar bikin web. Ini halaman pertamaku.</p>

    <h2>Hal yang aku suka</h2>
    <ul>
      <li>Ngoprek</li>
      <li>Ngopi</li>
      <li>Belajar hal baru</li>
    </ul>

    <h2>Kontak</h2>
    <p>Cek <a href="https://razinsaid.com">blog-ku</a> ya!</p>
  </body>
</html>

Simpan, buka di browser, dan taraa — kamu udah punya profil mini versi web. Coba deh ganti-ganti isinya sesuai kamu sendiri.

Kesalahan pemula yang sering kejadian

Biar nanti nggak panik pas ketemu error, hindari hal-hal ini:

Lupa tag penutup. Nulis <p>teks tanpa </p> bakal bikin tampilan berantakan.
Salah kasih nama file. Simpan sebagai index.html, bukan index.html.txt. Pastiin ekstensinya beneran .html.
Salah path gambar. src="foto.jpg" cuma jalan kalau foto.jpg ada di folder yang sama.
Kebanyakan <h1>. Satu halaman idealnya cukup satu <h1> aja.

Tips biar HTML-mu rapi & disukai Google

Bagian ini yang sering kelewat sama pemula, padahal lumayan ngaruh ke SEO:

Isi <title> yang jelas. Inget, ini yang jadi judul di hasil pencarian Google.
Selalu kasih alt di gambar. Bantu Google ngerti isi gambarnya, plus ramah buat pembaca layar.
Pakai heading yang urut. <h1> → <h2> → <h3>, jangan loncat-loncat.
Manfaatin tag semantik kayak <header>, <main>, <footer>, <article> buat nandain tiap bagian halaman. Browser sama Google jadi lebih paham strukturnya.

FAQ

HTML itu bahasa pemrograman, bukan sih? Sebenernya bukan. Secara teknis, HTML itu markup language alias bahasa penanda. Dia ngatur struktur, bukan logika kayak perulangan atau kondisi. Tapi tetep aja, dia fondasi wajib buat ngoding web.

Belajar HTML butuh berapa lama? Dasar-dasarnya sih bisa kamu kuasai dalam hitungan jam. Biar makin lancar, latihan rutin 1–2 minggu sambil bikin proyek kecil-kecilan udah lebih dari cukup.

Habis HTML, lanjut belajar apa? Lanjut ke CSS dulu buat mempercantik tampilan, baru abis itu JavaScript biar halamanmu jadi interaktif.

Belajar HTML perlu bayar nggak? Nggak sama sekali. Semua alatnya gratis, dan kamu bisa langsung praktik di komputer, bahkan di HP pun bisa.

Penutup

Sampai sini kamu udah kenalan sama HTML, tau struktur dasarnya, hafal tag-tag pentingnya, dan bisa bikin halaman web pertamamu. Ternyata nggak seserem yang dibayangin, kan?

Langkah selanjutnya: main-main sama CSS, biar halamanmu nggak cuma jalan, tapi juga enak diliat.

💡 Tips: jangan cuma dibaca ya. Buka editor, ketik ulang contoh-contohnya, terus utak-atik sendiri. Cara paling cepet belajar coding tuh emang dari nyoba langsung.

Selamat ngoprek! Kalau tutorial ini kerasa ngebantu, pantengin terus buat lanjutan serinya.

Langkah selanjutnya

HTML ini baru fondasi. Begitu kamu udah nyaman nyusun struktur halaman, lanjut aja ke sini:

Belajar CSS dasar untuk pemula — buat mempercantik tampilan halaman.
Belajar JavaScript dasar untuk pemula — bikin halaman jadi interaktif.
HTML semantik untuk SEO — nulis tag yang disukai mesin pencari.
Apa itu responsive web design — biar web rapi di semua ukuran layar.

Belajar HTML Dasar untuk Pemula: Bikin Halaman Web Pertamamu