· HTMLPemulaWeb Development

Belajar HTML untuk Pemula: Panduan Lengkap dari Nol 2026

Belajar HTML dari nol untuk pemula: struktur dokumen, tag penting, heading, paragraf, link, gambar, list, form, dan semantic HTML — lengkap dengan editor interaktif untuk langsung praktik.

Pembuat Hyper Sheets & BelajarWeb.dev

HTML (HyperText Markup Language) adalah bahasa markup yang dipakai untuk membangun struktur setiap halaman web. Setiap tombol, paragraf, gambar, dan link yang kamu lihat di internet dibungkus oleh tag HTML. Sebelum belajar CSS, JavaScript, atau framework apapun, kamu harus paham HTML dulu — dan kabar baiknya, HTML itu sederhana, bisa dipelajari dalam hitungan jam, dan langsung bisa dipraktikkan tanpa software mahal. Di panduan ini kamu akan belajar dari nol: mulai dari anatomi tag, struktur dokumen, elemen wajib, semantic HTML, form, sampai membuat halaman utuh sendiri.

Apa Itu HTML?

HTML adalah bahasa markup, bukan bahasa pemrograman. Fungsinya memberi struktur dan makna pada konten: mana yang judul, mana paragraf, mana gambar, mana link. Browser membaca file HTML lalu menerjemahkannya menjadi halaman yang bisa kamu lihat dan klik.

Perbedaan penting yang sering bikin bingung pemula: bahasa pemrograman seperti JavaScript atau PHP punya logika — ada percabangan, perulangan, dan variabel. HTML tidak. HTML hanya mendeskripsikan “ini apa”. Kamu tidak bisa menghitung angka atau membuat kondisi dengan HTML murni. Itu tugas JavaScript nanti.

HTML pertama kali dibuat oleh Tim Berners-Lee pada awal 1990-an sebagai cara berbagi dokumen antar komputer di CERN. Versi yang kita pakai sekarang adalah HTML5 — versi modern yang menambahkan elemen semantic, dukungan audio/video native, dan banyak fitur form baru. Kalau kamu mau belajar sambil langsung praktik dengan materi terstruktur, ada materi interaktif “apa itu HTML” yang bisa kamu coba gratis.

Bayangkan kamu sedang membangun rumah:

  • HTML = struktur bangunan (dinding, pintu, jendela, atap)
  • CSS = dekorasi (cat, furniture, tata letak, warna)
  • JavaScript = fungsi interaktif (saklar lampu, AC, kunci pintar)

Rumah tanpa dekorasi masih bisa ditinggali. Tapi dekorasi tanpa struktur? Mustahil. Itulah kenapa HTML selalu jadi langkah pertama.

Bagaimana Cara Kerja HTML di Browser?

Singkatnya: kamu menulis file teks berisi tag HTML, browser membacanya dari atas ke bawah, lalu membangun sebuah pohon struktur bernama DOM (Document Object Model). Dari DOM itulah browser menggambar halaman ke layar.

Prosesnya begini. Ketika kamu membuka sebuah file .html, browser tidak menampilkan tag mentahnya. Ia mem-parse teks itu, mengenali setiap tag pembuka dan penutup, lalu menyusunnya menjadi hierarki: elemen body berisi h1 dan p, elemen head berisi title, dan seterusnya. Struktur pohon inilah yang nanti dibaca oleh CSS (untuk styling) dan JavaScript (untuk interaksi).

Yang perlu kamu ingat sebagai pemula: urutan penulisan itu penting. Elemen yang ditulis lebih dulu muncul lebih atas. Elemen yang berada di dalam elemen lain (nested) akan menjadi “anak” dari elemen luarnya. Memahami hierarki ini akan sangat membantu ketika nanti kamu mengatur layout dengan CSS.

Anatomi Elemen HTML

Setiap elemen HTML pada dasarnya punya tiga bagian: tag pembuka, konten, dan tag penutup. Atribut ditambahkan di dalam tag pembuka untuk memberi informasi tambahan.

<tag atribut="nilai">Konten</tag>

Contoh nyata sebuah link:

<a href="https://belajarweb.dev">Kunjungi BelajarWeb.dev</a>

Mari kita bedah satu per satu:

  • <a> — tag pembuka, menandai awal elemen anchor (link)
  • href="https://belajarweb.dev" — atribut, memberi tahu tujuan link
  • Kunjungi BelajarWeb.dev — konten, teks yang terlihat dan bisa diklik
  • </a> — tag penutup, ditandai garis miring, menandai akhir elemen

Perhatikan istilahnya supaya tidak keliru: tag adalah penanda seperti <p>, sedangkan elemen adalah keseluruhan paket (tag pembuka + konten + tag penutup). Atribut adalah pasangan nama-nilai di dalam tag pembuka.

Void Element (Elemen Tanpa Penutup)

Sebagian elemen tidak punya konten dan tidak butuh tag penutup. Ini disebut void element atau elemen self-closing. Contoh yang paling sering dipakai:

<img src="foto.jpg" alt="Deskripsi foto" />
<br />
<hr />
<input type="text" />

<br> membuat baris baru, <hr> menggambar garis horizontal, <img> menampilkan gambar, dan <input> membuat kolom isian. Karena tidak punya konten di antaranya, elemen ini cukup ditulis sekali. Tanda / di akhir bersifat opsional di HTML5, tapi menuliskannya membuat kode lebih rapi dan jelas.

Struktur Dasar Halaman HTML

Setiap halaman web, sekecil apapun, punya kerangka dasar yang sama. Hafalkan pola ini karena kamu akan mengetiknya ribuan kali:

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Halaman pertamaku belajar HTML" />
    <title>Website Pertamaku</title>
  </head>
  <body>
    <h1>Halo Dunia!</h1>
    <p>Ini paragraf pertamaku.</p>
  </body>
</html>

Fungsi tiap bagian:

  • <!DOCTYPE html> — memberitahu browser bahwa ini dokumen HTML5. Selalu tulis di baris paling atas.
  • <html lang="id"> — elemen root yang membungkus semua isi. Atribut lang="id" memberitahu bahwa bahasa halaman ini Indonesia — penting untuk aksesibilitas dan SEO.
  • <head> — berisi metadata yang tidak terlihat di layar: judul tab, charset, deskripsi untuk mesin pencari, dan (nanti) link ke file CSS.
  • <meta charset="UTF-8" /> — memastikan huruf, emoji, dan karakter khusus tampil benar.
  • <meta name="viewport" ...> — membuat halaman responsif dan pas di layar HP. Tanpa baris ini, situs kamu akan terlihat mengecil di ponsel.
  • <title> — teks yang muncul di tab browser dan hasil pencarian Google.
  • <body> — semua yang terlihat oleh pengunjung: teks, gambar, tombol, form.

Isi head menentukan bagaimana halaman dikenali, sementara isi body menentukan apa yang dilihat orang. Keduanya sama penting.

Coba Langsung: Editor HTML Interaktif

Teori tidak akan menempel kalau kamu tidak mencoba sendiri. Edit kode HTML di editor bawah ini dan lihat hasilnya berubah secara real-time — ganti teksnya, tambahkan tag baru, dan amati apa yang terjadi:

Contoh

HTML

Preview

Halo Dunia!

Ini paragraf pertamaku. HTML itu mudah dan menyenangkan.

Cara belajar HTML paling cepat memang begini: ubah satu hal, lihat efeknya, ulangi. Jangan takut merusak — tidak ada yang bisa rusak permanen, tinggal ketik ulang.

Elemen HTML yang Wajib Kamu Kuasai

Ada ratusan tag di HTML, tapi kamu tidak perlu menghafal semuanya. Sekitar 15–20 tag ini menutupi 90% kebutuhan sehari-hari. Kuasai dulu yang di bawah ini.

Heading (h1 sampai h6)

HTML punya enam level heading, dari <h1> (paling penting) sampai <h6> (paling kecil). Heading bukan sekadar teks besar — ia menandai hierarki isi halaman.

<h1>Judul Utama Halaman</h1>
<h2>Bagian Besar</h2>
<h3>Sub-bagian</h3>
<h4>Detail di dalam sub-bagian</h4>

Aturan penting: gunakan hanya satu <h1> per halaman dan jangan melompati level (misalnya langsung dari <h1> ke <h4>). Struktur heading yang rapi membantu Google memahami isi halaman dan membantu pengguna screen reader menavigasi. Kamu bisa mengeksplorasi keenam level heading langsung di pelajaran heading interaktif.

Paragraf dan Format Teks

Paragraf dibungkus dengan tag <p>. Untuk menekankan teks, ada beberapa tag khusus:

<p>Ini paragraf biasa yang berisi kalimat lengkap.</p>
<p>Kata ini <strong>sangat penting</strong> dan kata ini <em>diberi penekanan</em>.</p>
<p>Rumus air adalah H<sub>2</sub>O dan 2<sup>3</sup> sama dengan 8.</p>
<p>Kalimat pertama.<br />Kalimat kedua di baris baru.</p>

Bedakan maknanya: <strong> menandai teks yang penting (biasanya tampil tebal), <em> menandai penekanan (biasanya miring), <sub> dan <sup> untuk subskrip dan superskrip, dan <br> memaksa baris baru. Hindari memakai <b> dan <i> polos kalau maksudmu memang “penting” atau “ditekankan” — pilih <strong> dan <em> supaya maknanya jelas bagi mesin dan screen reader. Kamu bisa mendalami semua tag teks ini di materi paragraf dan teks.

Link adalah inti dari web — huruf “HT” pada HTML memang berarti HyperText. Tag <a> dengan atribut href membuat teks bisa diklik menuju halaman lain.

<!-- Link ke situs lain -->
<a href="https://belajarweb.dev">Kunjungi BelajarWeb.dev</a>

<!-- Buka di tab baru dengan aman -->
<a href="https://belajarweb.dev" target="_blank" rel="noopener noreferrer">Buka di tab baru</a>

<!-- Link ke halaman lain di situs yang sama -->
<a href="/tentang">Tentang Kami</a>

<!-- Link ke bagian tertentu di halaman yang sama -->
<a href="#kontak">Lompat ke bagian kontak</a>

<!-- Link untuk mengirim email -->
<a href="mailto:[email protected]">Kirim email</a>

Atribut target="_blank" membuka link di tab baru, dan rel="noopener noreferrer" menambahkannya agar aman secara keamanan. Detail atribut target, rel, dan pola link internal versus eksternal dibahas tuntas di materi link dan anchor.

Gambar

Gambar dipasang dengan tag <img>. Ada dua atribut wajib: src (lokasi file) dan alt (teks alternatif).

<img src="foto-profil.jpg" alt="Foto profil Andi sedang tersenyum" width="300" height="300" />
<img src="/gambar/logo.png" alt="Logo BelajarWeb.dev" loading="lazy" />

Selalu isi atribut alt dengan deskripsi yang jelas — ini dibaca screen reader untuk pengguna tunanetra dan muncul kalau gambar gagal dimuat. Ini bukan opsional. Atribut width dan height sebaiknya juga diisi agar layout tidak “meloncat” saat gambar sedang dimuat; kalau kamu penasaran kenapa dua atribut ini penting untuk stabilitas tampilan, baca penjelasan width dan height. Sementara loading="lazy" menunda pemuatan gambar sampai pengguna scroll mendekatinya, sehingga halaman lebih cepat. Cara memasang gambar dengan benar bisa kamu latih langsung di pelajaran gambar di HTML.

List (Daftar)

Ada dua jenis list yang paling sering dipakai: unordered (bullet) dan ordered (bernomor).

<!-- Unordered list: pakai bila urutan tidak penting -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Ordered list: pakai bila urutan penting (langkah, ranking) -->
<ol>
  <li>Belajar HTML</li>
  <li>Belajar CSS</li>
  <li>Belajar JavaScript</li>
</ol>

Setiap item dibungkus <li> (list item). List juga bisa disarangkan — sebuah <li> bisa berisi <ul> lagi di dalamnya untuk membuat sub-daftar. Selain kedua jenis di atas, ada <dl> (description list) untuk pasangan istilah dan definisi. Pelajari ketiganya lebih lengkap di materi list HTML.

Tabel

Tabel dipakai untuk menampilkan data dalam baris dan kolom — jadwal, harga, perbandingan. Strukturnya bertingkat:

<table>
  <thead>
    <tr>
      <th>Nama</th>
      <th>Bahasa</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Andi</td>
      <td>HTML</td>
    </tr>
    <tr>
      <td>Budi</td>
      <td>CSS</td>
    </tr>
  </tbody>
</table>

<tr> adalah baris, <th> adalah sel judul (tebal dan di tengah otomatis), <td> adalah sel data biasa. <thead> dan <tbody> mengelompokkan kepala dan isi tabel. Catatan: tabel hanya untuk data, bukan untuk mengatur layout halaman — untuk layout gunakan CSS.

Elemen Inline vs Block

Ini konsep yang sering membingungkan pemula tapi wajib dipahami. Elemen block (seperti <div>, <p>, <h1>) memakan satu baris penuh dan selalu mulai di baris baru. Elemen inline (seperti <span>, <a>, <strong>) hanya memakan lebar seperlunya dan mengalir bersama teks.

<p>Ini paragraf block. <span>Ini span inline</span> yang menyatu dengan teks.</p>
<div>Div ini block, memakan baris penuh.</div>
<div>Div kedua otomatis turun ke bawah.</div>

Memahami perbedaan ini penting sebelum kamu belajar CSS layout, karena perilaku default inline dan block sangat memengaruhi cara elemen tersusun. Kalau mau paham tuntas soal sifat inline beserta contohnya, baca penjelasan inline adalah apa.

Semantic HTML — Kenapa Penting?

Semantic HTML berarti memilih elemen berdasarkan makna isinya, bukan sekadar tampilan. Alih-alih membungkus semuanya dengan <div>, kamu memakai elemen yang menjelaskan perannya: <header> untuk kepala halaman, <nav> untuk navigasi, <article> untuk artikel.

Bandingkan dua versi berikut. Keduanya bisa tampil identik setelah diberi CSS, tapi maknanya sangat berbeda:

<!-- ❌ Non-semantic: browser tidak tahu ini bagian apa -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="content">...</div>
<div class="footer">...</div>

<!-- ✅ Semantic: setiap bagian punya makna jelas -->
<header>
  <nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>

Elemen semantic yang paling sering dipakai:

ElemenFungsi
<header>Bagian atas halaman atau section
<nav>Kumpulan link navigasi
<main>Konten utama (hanya satu per halaman)
<article>Konten mandiri (blog post, berita, komentar)
<section>Bagian tematik dari konten
<aside>Konten sampingan (sidebar, iklan)
<footer>Bagian bawah halaman atau section

Kenapa ini penting?

  1. SEO — Google memahami struktur halaman lebih baik dan bisa menampilkannya lebih relevan di hasil pencarian.
  2. Aksesibilitas — Pengguna screen reader bisa langsung melompat ke main, nav, atau header tanpa mendengar seluruh isi.
  3. Maintainability — Kode jauh lebih mudah dibaca. <footer> langsung jelas maksudnya, sedangkan <div class="footer"> harus ditebak.

Untuk melihat perbedaannya secara visual, coba playground semantic HTML — kamu bisa bongkar-pasang struktur halaman dan langsung melihat elemen mana yang paling tepat.

Form HTML

Form adalah cara pengunjung berinteraksi dan mengirim data ke website — login, registrasi, pencarian, kontak. Elemen inti sebuah form adalah <form>, <input>, <label>, dan <button>.

<form action="/submit" method="POST">
  <label for="nama">Nama:</label>
  <input type="text" id="nama" name="nama" required />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />

  <label for="pesan">Pesan:</label>
  <textarea id="pesan" name="pesan" rows="4"></textarea>

  <button type="submit">Kirim</button>
</form>

Beberapa hal penting di sini:

  • Atribut action menentukan ke mana data dikirim, dan method menentukan caranya (POST untuk mengirim data, GET untuk pencarian).
  • Setiap <label> dihubungkan ke input lewat pasangan for="nama" dan id="nama". Ini membuat teks label bisa diklik untuk memfokuskan input — penting untuk aksesibilitas.
  • Atribut required membuat form tidak bisa dikirim kalau kolom itu kosong — validasi gratis tanpa JavaScript.
  • type="email" memunculkan keyboard email di HP dan otomatis memeriksa format alamat.

Tipe input yang sering dipakai: text, email, password, number, date, checkbox, radio, file. Dasar-dasar input dan label beserta cara menghubungkannya bisa kamu pelajari lebih dalam di materi form input dan label.

Mini-Project: Membuat Halaman Profil Sederhana

Sekarang mari gabungkan semua yang sudah kamu pelajari menjadi satu halaman utuh. Kita akan membuat halaman profil sederhana — semacam kartu perkenalan. Buat file bernama profil.html, tempel kode di bawah, lalu buka dengan browser.

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Halaman profil Andi, calon web developer" />
    <title>Profil Andi</title>
  </head>
  <body>
    <header>
      <h1>Andi Pratama</h1>
      <nav>
        <a href="#tentang">Tentang</a>
        <a href="#skill">Skill</a>
        <a href="#kontak">Kontak</a>
      </nav>
    </header>

    <main>
      <section id="tentang">
        <h2>Tentang Saya</h2>
        <img src="foto-andi.jpg" alt="Foto Andi Pratama" width="200" height="200" />
        <p>
          Halo! Saya <strong>Andi</strong>, sedang belajar menjadi
          <em>web developer</em>. Halaman ini adalah proyek HTML pertama saya.
        </p>
      </section>

      <section id="skill">
        <h2>Skill yang Sedang Dipelajari</h2>
        <ol>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
        </ol>
      </section>

      <section id="kontak">
        <h2>Hubungi Saya</h2>
        <form action="/kirim" method="POST">
          <label for="nama">Nama kamu:</label>
          <input type="text" id="nama" name="nama" required />

          <label for="email">Email:</label>
          <input type="email" id="email" name="email" required />

          <button type="submit">Kirim Pesan</button>
        </form>
      </section>
    </main>

    <footer>
      <p>&copy; 2026 Andi Pratama. Dibuat dengan HTML.</p>
    </footer>
  </body>
</html>

Perhatikan bagaimana semua konsep bekerja bersama: struktur dokumen lengkap dengan head dan body, elemen semantic (header, nav, main, section, footer), heading yang berjenjang, gambar dengan alt, list bernomor, link internal yang melompat ke id menggunakan #, dan form dengan label yang benar. Ini adalah pondasi nyata sebuah halaman web — tinggal ditambah CSS untuk mempercantiknya. Kalau kamu ingin membangun proyek pertama secara lebih lengkap dari awal sampai online, ikuti panduan membuat website pertama.

Kesalahan Umum Pemula HTML

Beberapa kesalahan ini muncul berulang-ulang. Mengenalinya lebih awal akan menghemat banyak waktu debugging.

1. Lupa menutup tag. Setiap tag pembuka (kecuali void element) butuh penutup. Tag yang tidak ditutup bisa membuat seluruh layout berantakan.

<!-- ❌ Salah: <p> tidak ditutup -->
<p>Paragraf pertama.
<p>Paragraf kedua.

<!-- ✅ Benar -->
<p>Paragraf pertama.</p>
<p>Paragraf kedua.</p>

2. Salah menyarangkan (nesting) elemen. Tag harus ditutup dengan urutan terbalik dari cara membukanya, seperti tanda kurung.

<!-- ❌ Salah: penutupan bersilang -->
<strong><em>Teks penting</strong></em>

<!-- ✅ Benar: yang terakhir dibuka, ditutup lebih dulu -->
<strong><em>Teks penting</em></strong>

3. Melupakan atribut alt pada gambar. Ini kesalahan aksesibilitas paling umum. Setiap <img> wajib punya alt yang deskriptif.

4. Memakai <div> untuk segalanya. Kebiasaan membungkus semua dengan <div class="..."> disebut div soup. Kalau ada elemen semantic yang cocok (<nav>, <header>, <button>), pakai itu.

5. Melompati level heading. Jangan langsung dari <h1> ke <h4> hanya karena ingin teks lebih kecil. Ukuran diatur oleh CSS, bukan dengan memilih level heading yang salah.

6. Memakai tabel untuk layout. Dulu orang mengatur tata letak halaman dengan <table>. Sekarang itu praktik buruk — gunakan CSS Flexbox atau Grid. Tabel hanya untuk data tabular.

7. Lupa <!DOCTYPE html> atau atribut lang. Tanpa DOCTYPE, browser bisa masuk ke “quirks mode” yang membuat tampilan tidak konsisten. Selalu awali dokumen dengan DOCTYPE dan set lang di elemen <html>.

Tips untuk Pemula

  1. Selalu validasi kode kamu. Gunakan W3C Validator untuk mengecek apakah HTML kamu valid dan menemukan tag yang lupa ditutup.
  2. Indentasi yang rapi. Beri jarak konsisten untuk elemen yang bersarang. Kode yang rapi jauh lebih mudah di-debug.
  3. Tulis dulu HTML, baru CSS. Selesaikan struktur dan makna lebih dahulu, urusan tampilan belakangan.
  4. Baca kode orang lain. Klik kanan halaman web mana pun lalu pilih “View Page Source” untuk melihat HTML aslinya.
  5. Praktik tiap hari, sedikit-sedikit. Konsistensi mengalahkan maraton semalam.

Mau menguji hafalan tag kamu sambil bersenang-senang? Mainkan game Penyihir Tag — cara seru untuk mengingat tag HTML tanpa terasa seperti sedang belajar.

Langkah Selanjutnya

Setelah pondasi HTML kamu kuat, inilah urutan yang disarankan untuk melanjutkan:

  1. CSS — beri warna, layout, dan style pada halaman HTML kamu. Ini yang membuat situs terlihat profesional.
  2. JavaScript — tambahkan interaktivitas seperti tombol yang merespons klik, form yang divalidasi, atau konten yang berubah tanpa reload. Mulai dari apa itu JavaScript untuk memahami dasarnya.
  3. Responsive Design — pastikan website tampil bagus di HP, tablet, maupun desktop.

HTML adalah fondasi. Kalau fondasinya kuat, semua yang dibangun di atasnya — CSS, JavaScript, sampai framework seperti React atau Laravel — akan terasa jauh lebih mudah. Jangan buru-buru pindah sebelum kamu nyaman menulis struktur HTML dari nol tanpa mencontek.

FAQ Belajar HTML

Apakah HTML itu bahasa pemrograman?

Bukan. HTML adalah bahasa markup, bukan bahasa pemrograman. HTML hanya mendeskripsikan struktur dan isi halaman — tidak punya logika seperti percabangan, perulangan, atau perhitungan. Logika itu urusan bahasa pemrograman seperti JavaScript. Jadi kalau ada yang bilang “programmer HTML”, secara teknis istilah yang lebih tepat adalah “menulis markup HTML”.

Berapa lama waktu yang dibutuhkan untuk belajar HTML?

Dasar-dasar HTML bisa kamu kuasai dalam beberapa jam sampai beberapa hari saja. Untuk lancar menulis struktur halaman utuh tanpa mencontek, biasanya butuh satu sampai dua minggu latihan rutin. HTML memang salah satu keterampilan web development yang paling cepat dipelajari — bagian yang lebih lama adalah CSS dan JavaScript.

Apa bedanya HTML dan HTML5?

HTML5 adalah versi HTML paling modern dan merupakan standar yang dipakai sekarang. Dibandingkan versi lama, HTML5 menambahkan elemen semantic (<header>, <nav>, <article>), dukungan audio dan video tanpa plugin, tipe input form baru, serta banyak API untuk fitur canggih. Ketika orang bilang “belajar HTML” hari ini, yang dimaksud otomatis adalah HTML5.

Apakah saya harus menghafal semua tag HTML?

Tidak. Kamu cukup menguasai sekitar 15–20 tag yang paling sering dipakai — heading, paragraf, link, gambar, list, form, dan elemen semantic. Sisanya bisa kamu cari saat dibutuhkan. Developer berpengalaman pun sering membuka dokumentasi untuk tag yang jarang mereka pakai. Yang penting adalah paham konsep dan cara membacanya, bukan menghafal mati.

Software apa yang dibutuhkan untuk mulai belajar HTML?

Cukup dua hal yang biasanya sudah ada di komputer kamu: sebuah editor teks (disarankan Visual Studio Code karena gratis dan punya fitur bantuan) dan sebuah browser (Chrome, Firefox, atau Edge). Kamu tidak perlu server, koneksi internet khusus, atau software berbayar. Tulis kode di editor, simpan dengan ekstensi .html, lalu buka file-nya dengan browser.

Apa bedanya HTML, CSS, dan JavaScript?

Ketiganya bekerja bersama tapi punya peran berbeda. HTML membangun struktur dan isi (kerangka halaman). CSS mengatur tampilan — warna, font, tata letak (dekorasinya). JavaScript menambahkan interaktivitas dan logika (perilakunya). Analogi rumah: HTML adalah bangunannya, CSS adalah cat dan furniture, JavaScript adalah listrik dan alat pintarnya. Kamu belajar HTML dulu karena dua yang lain butuh struktur untuk dipasang.