home / html

🌐 HTML

HyperText Markup Language — bahasa struktur semua halaman web di internet.

📌 Baca ini dulu sebelum lanjut!

🧱 Fundamental HTML

Sebelum masuk detail tag satu-satu, pahami dulu konsep-konsep inti ini. Cuma butuh beberapa menit, tapi bakal bikin materi selanjutnya jauh lebih gampang dicerna.

📌 Fundamental HTML udah kamu baca.

Pengenalan HTML

HTML adalah bahasa markup yang dipakai untuk membangun struktur sebuah halaman web. HTML bukan bahasa pemrograman karena tidak punya logika seperti perulangan atau percabangan — tugasnya hanya memberi tahu browser bagaimana sebuah konten harus disusun dan ditampilkan.

Setiap elemen HTML ditulis menggunakan <tag>. Sebagian besar tag terdiri dari tag pembuka dan tag penutup, tapi ada juga beberapa tag yang berdiri sendiri (disebut self-closing tag atau void element) seperti <br> dan <img>.

💡 HTML = tulang (struktur). CSS = penampilan (tata wajah). JavaScript = gerak (interaksi). Tiga-tiganya saling melengkapi untuk membangun sebuah website.
html 
<!-- Ini komentar HTML, tidak akan tampil di browser -->
<p>Ini paragraf.</p>
<strong>Tag ini punya buka dan tutup.</strong>
<br>  <!-- Tag ini tidak perlu ditutup -->
✅ Best Practice: Selalu beri komentar pada bagian kode yang kompleks, dan jangan biarkan tag terbuka tanpa penutup kecuali memang void element — browser memang "memaafkan" kesalahan HTML, tapi itu bisa membuat tampilan berantakan tanpa kamu sadari.

Struktur Dasar

Sebelum lanjut ke tag-tag lain, kamu perlu paham "kerangka wajib" yang harus ada di setiap file HTML. Daripada langsung dikasih kode lengkap, di bagian ini kita akan membangunnya pelan-pelan dari file kosong — satu tag ditambahkan setiap langkah, supaya kamu ngerti fungsi masing-masing bagian, bukan cuma hafal urutannya.

0

Mulai dari file kosong

Bayangkan kamu baru saja membuat file baru bernama index.html. Isinya masih kosong — belum ada satu tag pun. Browser belum tahu harus menampilkan apa.

1

Tambahkan <!DOCTYPE html>

Baris pertama yang kita tulis adalah <!DOCTYPE html>. Ini bukan tag HTML biasa — ini adalah deklarasi yang memberi tahu browser: "dokumen ini pakai standar HTML5". Tanpa ini, browser bisa salah menebak versi HTML dan menampilkan halamanmu secara tidak konsisten (disebut quirks mode).

+ ditambahkan: <!DOCTYPE html>
2

Bungkus dengan <html></html>

Selanjutnya kita tambahkan tag <html> sebagai elemen induk (root) — semua tag lain nanti akan diletakkan di dalam pasangan tag ini. Kita juga langsung tambahkan atribut lang="id" untuk memberi tahu browser (dan screen reader) bahwa bahasa halaman ini adalah Bahasa Indonesia.

+ ditambahkan: <html lang="id"> ... </html>
3

Tambahkan <head></head>

Di dalam <html>, kita bagi jadi dua bagian besar. Yang pertama adalah <head> — bagian ini berisi metadata, yaitu informasi tentang halaman yang tidak tampil langsung di layar, tapi dipakai browser dan mesin pencari. Untuk sekarang kita kosongkan dulu isinya, nanti kita isi satu per satu.

+ ditambahkan: <head> ... </head>
4

Isi <head> — charset, viewport, title

Sekarang kita isi bagian <head> dengan 3 tag yang paling sering dipakai:

  • <meta charset="UTF-8"> — menentukan encoding karakter, supaya huruf seperti "é" atau emoji tampil dengan benar, bukan jadi simbol aneh.
  • <meta name="viewport" ...> — memberi tahu browser cara menyesuaikan tampilan di layar HP/tablet. Tanpa ini, halamanmu akan terlihat sangat kecil di layar mobile.
  • <title> — judul yang tampil di tab browser dan hasil pencarian Google.
+ ditambahkan: <meta charset>, <meta viewport>, <title>
5

Tambahkan <body></body>

Bagian kedua di dalam <html> adalah <body>. Berbeda dengan <head>, semua yang kamu taruh di dalam <body> ini akan tampil di layar — teks, gambar, tombol, semuanya. Bagian ini masih kosong, jadi kalau dibuka di browser, halamannya masih putih polos (tapi tab-nya sudah punya judul!).

+ ditambahkan: <body> ... </body>
6

Isi <body> dengan konten pertama

Terakhir, kita isi <body> dengan konten sungguhan: satu <h1> untuk judul, dan satu <p> untuk paragraf. Sekarang halamanmu sudah benar-benar jadi halaman HTML pertama yang utuh dan valid!

+ ditambahkan: <h1> dan <p>
👆 Ini sudah jadi struktur HTML lengkap dan valid — semua file HTML yang akan kamu buat setelah ini selalu punya kerangka yang sama seperti ini.

📋 Rekap Kerangka Wajib HTML

  • <!DOCTYPE html> — deklarasi standar HTML5, wajib baris pertama
  • <html> — elemen induk (root) dari seluruh konten halaman
  • <head> — metadata: charset, viewport, title, tidak tampil di layar
  • <body> — semua konten yang benar-benar tampil di browser
✅ Best Practice: Isi atribut lang pada tag <html> sesuai bahasa kontenmu (mis. "id" untuk Indonesia). Ini membantu screen reader dan mesin pencari memahami bahasa halamanmu. Selalu tulis <meta charset="UTF-8"> sebagai baris pertama di dalam <head>.

Heading

Heading dipakai untuk menandai judul dan subjudul konten. Ada 6 level heading, dari <h1> (terbesar dan paling penting) sampai <h6> (terkecil).

💡 Gunakan <h1> hanya sekali per halaman untuk judul utama, lalu turunkan levelnya secara berurutan (h2, h3, dst) — jangan loncat level hanya demi ukuran teks. Untuk urusan ukuran visual, gunakan CSS.
html 
<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Sub Sub Judul</h3>
<h4>Level 4</h4>
<h5>Level 5</h5>
<h6>Level 6 (paling kecil)</h6>

Paragraf & Teks

Tag <p> dipakai untuk menulis paragraf. Selain itu ada beberapa tag teks lain yang sering digunakan untuk memberi makna tambahan pada konten:

  • <strong> — teks tebal yang secara semantik dianggap penting
  • <em> — teks miring yang menandakan penekanan (emphasis)
  • <br> — pindah ke baris baru tanpa membuat paragraf baru
  • <span> — membungkus sebagian teks inline, biasanya untuk ditarget CSS/JS
html 
<p>Ini paragraf biasa.</p>

<p>
  Teks <strong>tebal</strong> dan <em>miring</em> bisa digabung.
</p>

<p>
  Baris pertama.<br>
  Baris kedua setelah br.
</p>

<p>
  Warna <span style="color: blue;">biru</span> pakai span.
</p>
✅ Best Practice: Pakai <strong>/<em> untuk makna (semantik), bukan <b>/<i> yang hanya mengubah tampilan visual tanpa arti tambahan bagi screen reader.

Gambar

Tag <img> dipakai untuk menampilkan gambar. Atribut alt wajib diisi — teks ini akan tampil kalau gambar gagal dimuat, dan sangat penting untuk aksesibilitas (dibacakan oleh screen reader).

html 
<!-- Gambar dari folder lokal -->
<img src="foto.jpg" alt="Foto profil saya" width="300">

<!-- Gambar dari internet -->
<img src="https://picsum.photos/400/300" alt="Gambar random" width="400">

<!-- Gambar dengan ukuran penuh, dimuat belakangan (lazy) -->
<img src="banner.jpg" alt="Banner" style="width:100%" loading="lazy">
✅ Best Practice: Tambahkan loading="lazy" pada gambar yang berada jauh dari bagian atas halaman agar halaman dimuat lebih cepat, dan selalu set width/height untuk mencegah layout "loncat" saat gambar dimuat.

List

Ada dua jenis list utama: <ul> (unordered — pakai bullet, untuk item yang urutannya tidak penting) dan <ol> (ordered — pakai nomor, untuk item yang urutannya penting). Isi dari keduanya ditulis dengan tag <li>.

html 
<!-- Unordered list (bullet) -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Ordered list (nomor) -->
<ol>
  <li>Install VSCode</li>
  <li>Buat file .html</li>
  <li>Tulis kode</li>
  <li>Buka di browser</li>
</ol>

Form

Form dipakai untuk menerima input dari pengguna. Tag <input> punya banyak variasi tipe seperti text, email, password, checkbox, dan lainnya, masing-masing dengan validasi bawaan browser.

html 
<form>
  <label for="nama">Nama:</label>
  <input type="text" id="nama" name="nama" placeholder="Masukkan namamu" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="email@contoh.com" required>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="••••••">

  <label>
    <input type="checkbox" name="setuju"> Setuju syarat & ketentuan
  </label>

  <button type="submit">Daftar</button>
</form>
✅ Best Practice: Selalu pasangkan setiap <input> dengan <label> lewat atribut for/id yang sama, dan jangan lupa atribut name supaya data terkirim dengan benar saat form di-submit.

Semantic HTML

Semantic HTML adalah penggunaan tag yang namanya menjelaskan makna kontennya, bukan sekadar tampilannya. Dulu orang banyak memakai <div> untuk segala hal, tapi sekarang ada tag-tag khusus yang lebih bermakna dan ramah SEO serta aksesibilitas.

  • <header> — bagian kepala halaman atau section (biasanya logo & navigasi)
  • <nav> — kumpulan link navigasi utama
  • <main> — konten utama halaman (hanya boleh satu per halaman)
  • <section> — sekelompok konten yang punya tema/topik sendiri
  • <article> — konten mandiri yang bisa berdiri sendiri (mis. artikel blog, kartu produk)
  • <aside> — konten pendukung di luar alur utama (mis. sidebar)
  • <footer> — bagian kaki halaman atau section
html 
<header>
  <h1>Blog Ngoding</h1>
  <nav>...</nav>
</header>

<main>
  <article>
    <h2>Belajar Semantic HTML</h2>
    <p>Isi artikel di sini...</p>
  </article>

  <aside>
    <h3>Artikel Terkait</h3>
  </aside>
</main>

<footer>
  <p>&copy; 2026 web-ngoding</p>
</footer>
💡 Tag semantic tidak mengubah tampilan sama sekali (sama seperti <div>) — manfaatnya ada di sisi makna: lebih mudah dibaca developer lain, lebih disukai mesin pencari, dan lebih mudah dipahami screen reader.
✅ Best Practice: Gunakan <div> hanya kalau memang tidak ada tag semantic yang cocok — selalu cek dulu apakah ada elemen seperti <section> atau <article> yang lebih pas.

Table

Tabel dipakai untuk menampilkan data tabular (baris & kolom), seperti jadwal, harga, atau daftar nilai. Jangan dipakai untuk mengatur layout halaman — itu tugas CSS.

  • <table> — pembungkus seluruh tabel
  • <thead> — bagian header tabel
  • <tbody> — bagian isi/data tabel
  • <tr> — satu baris (table row)
  • <th> — sel header (bold & rata tengah secara default)
  • <td> — sel data biasa
html 
<table>
  <thead>
    <tr>
      <th>Nama</th>
      <th>Bahasa</th>
      <th>Level</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Andi</td>
      <td>HTML & CSS</td>
      <td>Pemula</td>
    </tr>
    <tr>
      <td>Sari</td>
      <td>JavaScript</td>
      <td>Menengah</td>
    </tr>
  </tbody>
</table>
✅ Best Practice: Selalu gunakan <thead>/<tbody> meski tabelnya sederhana — ini membantu styling CSS dan membuat struktur lebih jelas dibaca screen reader.

Multimedia

HTML5 punya tag bawaan untuk menampilkan audio, video, dan konten dari halaman lain tanpa butuh plugin tambahan seperti Flash (yang sudah lama tidak dipakai).

  • <audio> — memutar file suara
  • <video> — memutar file video
  • <iframe> — menyisipkan halaman/konten lain, mis. video YouTube atau peta
html 
<!-- Audio -->
<audio controls>
  <source src="lagu.mp3" type="audio/mpeg">
  Browsermu tidak mendukung audio.
</audio>

<!-- Video -->
<video controls width="400">
  <source src="video.mp4" type="video/mp4">
  Browsermu tidak mendukung video.
</video>

<!-- Iframe (embed YouTube) -->
<iframe
  width="400" height="225"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="Video YouTube"
  loading="lazy"
  allowfullscreen>
</iframe>
✅ Best Practice: Selalu sediakan teks fallback di antara tag <audio>/<video> untuk browser lama, dan isi atribut title pada <iframe> agar lebih ramah aksesibilitas.

🐛 Betulin HTML Rusak

Ini bagian paling seru — 6 potongan kode di bawah ini sengaja dibikin rusak/error, mirip kesalahan yang paling sering dibuat pemula. Edit langsung kodenya di kotak abu-abu, klik ▶ Jalankan & Cek buat lihat hasilnya dan tau apakah perbaikanmu udah bener. Kalau mentok, pakai 💡 Hint dulu sebelum ngintip jawaban!

Progress: 0 / 6 kode berhasil dibetulin

🧩 Susun Tag

Klik potongan-potongan kode di bawah sesuai urutan yang benar untuk membentuk struktur HTML yang valid. Salah klik? Tinggal klik lagi potongan yang ada di jawaban buat naruh dia balik ke pool.

🃏 Kilas Balik Tag

Latihan mengingat fungsi tag-tag HTML pakai flashcard. Tap kartunya buat lihat jawaban, terus lanjut ke kartu berikutnya. Ini cara paling efektif biar nama & fungsi tag nempel di ingatan jangka panjang.

🔮 Tebak Tampilan

Beda dari tebak-tebakan teks, di sini kamu tebak tampilan visualnya. Lihat kodenya, terus pilih preview mana yang bakal muncul di browser.

🕵️ HTML Detective

Beda dari Susun Tag — di sini kamu bukan nyusun urutan, tapi nentuin tag apa yang paling tepat buat sebuah bagian halaman. Ini skill yang beneran dipakai pas bikin web asli: motret bagian dari sebuah halaman terus mikir "ini cocoknya pakai tag apa ya?"

🚀 Mini Project: Kartu Profil

Saatnya praktik! Gabungkan semua yang sudah dipelajari untuk membangun sebuah project HTML sederhana. Pilih salah satu project di bawah, tulis kode di tab HTML / CSS / JavaScript, klik Run, lalu lihat hasilnya di panel kanan.

Saatnya praktik! Gabungkan semua yang sudah dipelajari — heading, gambar, semantic tag, dan styling sederhana — untuk membuat sebuah kartu profil sederhana. Tulis kode di tab HTML / CSS / JavaScript, klik Run, lalu lihat hasilnya di panel kanan.

💡 Tantangan:
1. Bungkus kartu dengan <article>.
2. Tambahkan foto pakai <img> (boleh dari picsum.photos).
3. Tampilkan nama pakai <h2> dan deskripsi singkat pakai <p>.
4. Tambahkan daftar skill pakai <ul>.
5. Tambahkan tombol/link "Hubungi Saya" pakai <a>.
Live Editor — Mini Project
code
preview
🎯 Lanjutkan belajarmu: Setelah kartu profilmu jadi, lanjut ke materi CSS untuk membuatnya makin cantik, lalu ke JavaScript supaya kartumu bisa berinteraksi!
🔄 Versi baru tersedia