— Bab 01
HTML — kerangka halaman web.
HTML adalah bahasa untuk menyusun isi halaman web. Di bab ini kamu akan belajar semua tag dasar yang dipakai di hampir setiap website, lengkap dengan contoh dan latihan.
Apa itu HTML?
HTML (HyperText Markup Language) adalah "bahasa markup" — bukan bahasa pemrograman dalam arti yang biasa. Dia tidak bisa menghitung atau membuat keputusan, tapi dia memberi struktur pada dokumen: mana judul, mana paragraf, mana gambar, mana link.
Bayangkan kamu sedang membuat dokumen di Microsoft Word. Ada judul besar, ada isi, ada daftar. Nah, HTML adalah cara menuliskan itu semua dalam bentuk yang bisa dibaca oleh browser (Chrome, Firefox, Safari, dll).
Bagaimana cara kerjanya?
Kita menulis HTML menggunakan tag — kata kunci yang diapit tanda < dan >. Contoh: <p> untuk paragraf, <h1> untuk judul besar.
Kebanyakan tag berpasangan: ada pembuka <p> dan penutup </p>. Yang di tengah keduanya adalah isinya.
contoh-tag.html
<p>Ini adalah paragraf.</p>
<h1>Ini judul besar</h1>
Perlu diingat
Tag HTML tidak tampil di halaman. Yang tampil hanya isinya. Tag cuma memberitahu browser "ini paragraf" atau "ini judul".
Apa yang dibutuhkan?
Untuk mulai belajar HTML, kamu cuma butuh:
- Sebuah text editor. Gratis: Visual Studio Code (direkomendasikan), Sublime Text, atau Notepad biasa.
- Browser apa saja untuk melihat hasilnya.
Tidak perlu install web server atau apapun yang ribet. Cukup simpan file dengan ekstensi .html, lalu buka pakai browser.
Struktur dokumen HTML
Setiap halaman HTML punya kerangka dasar yang sama. Hafalkan bentuknya — nanti semua project HTML kamu akan dimulai dari sini.
index.html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Pertamaku</title>
</head>
<body>
<h1>Halo, Dunia!</h1>
<p>Ini website pertama saya.</p>
</body>
</html>Hasil di browser
Halo, Dunia!
Ini website pertama saya.
Penjelasan baris per baris
| Bagian | Fungsi |
|---|---|
<!DOCTYPE html> | Pemberitahuan ke browser: "halaman ini pakai HTML modern (HTML5)". |
<html lang="id"> | Pembungkus seluruh halaman. lang="id" artinya bahasa Indonesia. |
<head> | Berisi informasi tentang halaman (judul tab, meta, CSS, dll). Isinya tidak tampil di halaman. |
<meta charset="UTF-8"> | Support semua huruf termasuk ñ, é, 日本語, emoji 🌸. |
<meta name="viewport"> | Wajib agar tampilan bagus di HP. |
<title> | Judul yang muncul di tab browser dan hasil pencarian Google. |
<body> | Isi yang tampil di halaman. Di sinilah semua heading, paragraf, gambar, dll ditulis. |
Coba sendiri
- Buka text editor (VS Code atau Notepad).
- Copy code di atas, simpan dengan nama
index.html. - Double-click file-nya — harusnya terbuka di browser dan menampilkan "Halo, Dunia!".
Kebiasaan baik
Tulis tag dengan indentasi (geser ke kanan pakai tab atau 2 spasi) untuk setiap level. Ini membuat code jauh lebih mudah dibaca.
Heading & paragraf
Heading dipakai untuk judul. Ada 6 tingkatan, dari <h1> (paling besar/penting) sampai <h6> (paling kecil). Paragraf dipakai untuk teks biasa, ditulis dengan <p>.
heading.html
<h1>Judul Halaman</h1>
<h2>Sub-judul</h2>
<h3>Sub-sub-judul</h3>
<h4>Yang lebih kecil lagi</h4>
<p>Ini paragraf biasa.</p>
<p>Setiap <p> otomatis ganti baris.</p>Hasil
Judul Halaman
Sub-judul
Sub-sub-judul
Yang lebih kecil lagi
Ini paragraf biasa.
Setiap <p> otomatis ganti baris.
Aturan penting
- Hanya ada satu
<h1>per halaman. Ini judul utama, seperti judul artikel. - Gunakan urutan.
<h2>di bawah<h1>,<h3>di bawah<h2>, dan seterusnya. Jangan loncat dari<h1>langsung ke<h4>. - Jangan pakai heading cuma karena mau teks besar. Kalau cuma ingin teks besar tapi bukan judul, pakai CSS, bukan heading.
Kenapa aturan ini penting?
Google dan alat pembaca layar (untuk tunanetra) memakai struktur heading untuk memahami halaman. Kalau berantakan, halamanmu susah dipahami — baik oleh SEO maupun oleh pengguna.
Ganti baris vs paragraf baru
Di HTML, kamu tidak bisa hanya menekan Enter untuk ganti baris — browser akan mengabaikannya. Ada dua pilihan:
<br>— ganti baris di dalam paragraf yang sama.- Buat
<p>baru — paragraf baru dengan jarak lebih besar.
Formatting teks
Ini tag-tag untuk memberi penekanan atau format pada teks. Selain tampilannya berbeda, beberapa di antaranya juga memberi makna ke browser dan Google.
| Tag | Fungsi | Hasil |
|---|---|---|
<strong> | Penting (biasanya tampil tebal) | tebal |
<em> | Penekanan (biasanya tampil miring) | miring |
<b> | Tebal saja (tanpa makna khusus) | tebal |
<i> | Miring saja (tanpa makna khusus) | miring |
<u> | Garis bawah | garis bawah |
<mark> | Teks yang di-highlight | di-highlight |
<small> | Teks kecil | kecil |
<del> | Teks dicoret | |
<code> | Teks code | kode() |
<br> | Ganti baris | - |
<hr> | Garis horizontal | - |
format.html
<p>
Ini <strong>sangat penting</strong> dan ini
<em>ditekankan</em>.
</p>
<p>
Harga lama: <del>Rp 100.000</del>
Harga baru: <strong>Rp 75.000</strong>
</p>
<p>
Ketik perintah <code>git status</code> di terminal.
</p>Hasil
Ini sangat penting dan ini ditekankan.
Harga lama: Rp 100.000. Harga baru: Rp 75.000
Ketik perintah git status di terminal.
strong vs b — apa bedanya?
Secara tampilan sama (dua-duanya tebal). Tapi
<strong> memberi makna "ini penting" ke mesin pencari dan pembaca layar. <b> cuma mempertebal tanpa makna. Pilih <strong> untuk sesuatu yang memang penting, <b> untuk estetika saja.
Link (anchor tag)
Link dibuat dengan tag <a> (singkatan dari anchor). Atribut yang wajib ada adalah href — alamat tujuan link.
link.html
<!-- Link ke website lain -->
<a href="https://google.com">Kunjungi Google</a>
<!-- Link ke halaman lain di situs yang sama -->
<a href="about.html">Tentang Kami</a>
<!-- Link buka di tab baru -->
<a href="https://github.com" target="_blank" rel="noopener">
Buka GitHub di tab baru
</a>
<!-- Link ke bagian tertentu di halaman yang sama -->
<a href="#kontak">Lompat ke bagian kontak</a>
<!-- Link kirim email -->
<a href="mailto:saya@email.com">Email saya</a>
<!-- Link telepon -->
<a href="tel:+6281234567890">Telepon 0812-3456-7890</a>Jenis alamat (href)
| Bentuk | Contoh | Arti |
|---|---|---|
| Absolut | https://... | Link ke website luar |
| Relatif | about.html atau /blog/post1.html | Ke halaman lain di situs yang sama |
| Anchor | #kontak | Ke bagian halaman ini dengan id="kontak" |
| Mailto | mailto:a@b.com | Buka aplikasi email |
| Tel | tel:081234 | Panggil (di HP) |
Penting untuk target="_blank"
Saat membuka link di tab baru, selalu tambahkan
rel="noopener". Tanpa ini, situs yang dibuka bisa mengakses halaman aslinya dan menimbulkan risiko keamanan.
Gambar & media
Gambar dimasukkan dengan tag <img>. Dia tidak perlu tag penutup. Atribut wajib: src (lokasi gambar) dan alt (deskripsi gambar).
gambar.html
<!-- Gambar lokal -->
<img src="kucing.jpg" alt="Kucing oren sedang tidur">
<!-- Gambar dari internet -->
<img src="https://contoh.com/foto.jpg"
alt="Pemandangan pegunungan"
width="400">
<!-- Gambar di dalam folder -->
<img src="images/logo.png" alt="Logo labcodeku">
<!-- Video -->
<video src="video.mp4" controls width="600"></video>
<!-- Audio -->
<audio src="musik.mp3" controls></audio>Kenapa atribut alt penting?
- Dibaca oleh pembaca layar untuk pengguna tunanetra.
- Tampil kalau gambar gagal dimuat (koneksi lemot, file hilang).
- Dibaca Google untuk memahami isi gambar — penting untuk SEO.
Aturan alt
- Gambar bermakna (foto, diagram): isi
- Gambar dekoratif saja (pemanis): kosongkan (
- Jangan pernah menghilangkan atribut alt.
alt dengan deskripsi jelas.- Gambar dekoratif saja (pemanis): kosongkan (
alt=""), tapi tetap harus ada.- Jangan pernah menghilangkan atribut alt.
Ukuran & folder
- Pakai
widthdanheightuntuk ukuran (dalam pixel). - Biasakan simpan gambar di folder tersendiri, misal
images/atauassets/. Lebih rapi saat project bertambah besar. - Format umum:
.jpg(foto),.png(grafik dengan transparansi),.svg(logo/icon),.webp(modern, ukuran kecil).
Daftar (list)
Ada tiga jenis daftar di HTML:
<ul>— unordered list, pakai bulatan/titik (•). Dipakai kalau urutan tidak penting.<ol>— ordered list, pakai angka (1, 2, 3). Dipakai kalau urutan penting.<dl>— description list, pasangan istilah–definisi.
Di dalam <ul> dan <ol>, setiap item dibungkus <li>.
list.html
<h3>Belanjaan</h3>
<ul>
<li>Beras</li>
<li>Telur</li>
<li>Minyak goreng</li>
</ul>
<h3>Cara masak mie</h3>
<ol>
<li>Rebus air sampai mendidih.</li>
<li>Masukkan mie dan bumbu.</li>
<li>Tunggu 3 menit, angkat.</li>
</ol>
<!-- List bersarang -->
<ul>
<li>Buah
<ul>
<li>Apel</li>
<li>Mangga</li>
</ul>
</li>
<li>Sayur</li>
</ul>Hasil
Belanjaan
- Beras
- Telur
- Minyak goreng
Cara masak mie
- Rebus air sampai mendidih.
- Masukkan mie dan bumbu.
- Tunggu 3 menit, angkat.
- Buah
- Apel
- Mangga
- Sayur
Tabel
Tabel dipakai untuk menampilkan data yang punya baris dan kolom. Tag utamanya:
<table>— pembungkus seluruh tabel.<tr>— baris (table row).<th>— sel judul (table header), biasanya tebal dan di tengah.<td>— sel data biasa (table data).<thead>,<tbody>,<tfoot>— kelompok baris (opsional tapi rapi).
tabel.html
<table>
<thead>
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Kota</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ani</td>
<td>22</td>
<td>Surabaya</td>
</tr>
<tr>
<td>Budi</td>
<td>25</td>
<td>Jakarta</td>
</tr>
</tbody>
</table>Hasil
| Nama | Umur | Kota |
|---|---|---|
| Ani | 22 | Surabaya |
| Budi | 25 | Jakarta |
Tabel untuk layout? Jangan!
Dulu, sebelum CSS bagus, orang pakai tabel untuk mengatur tata letak halaman. Sekarang jangan. Pakai tabel cuma untuk data yang memang berbentuk tabel (daftar harga, jadwal, dsb). Untuk layout, pakai
display: flex atau display: grid di CSS.
Form dasar
Form dipakai untuk menerima masukan dari pengunjung — nama, email, pesan, file upload, dan seterusnya. Tag utamanya:
<form>— pembungkus.<input>— kolom isian satu baris.<textarea>— kolom isian banyak baris.<select>+<option>— dropdown pilihan.<button>— tombol kirim.<label>— nama/petunjuk untuk input.
form.html
<form action="proses.php" 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>
<label for="kota">Kota:</label>
<select id="kota" name="kota">
<option value="jkt">Jakarta</option>
<option value="sby">Surabaya</option>
<option value="bdg">Bandung</option>
</select>
<button type="submit">Kirim</button>
</form>Atribut penting di <form>
| Atribut | Fungsi |
|---|---|
action | URL tujuan pengiriman data (biasanya file PHP). |
method | GET (data tampil di URL, untuk cari) atau POST (data tersembunyi, untuk kirim). |
Atribut penting di <input>
| Atribut | Fungsi |
|---|---|
type | Jenis input (text, email, password, dll — lihat materi berikutnya). |
name | Nama field. Wajib agar data bisa diambil di server. |
id | Unik, untuk dihubungkan dengan <label>. |
required | Wajib diisi. Browser otomatis cek. |
placeholder | Teks petunjuk di dalam input saat kosong. |
value | Nilai awal. |
Kenapa label penting?
Saat kamu klik label "Nama:", kursor otomatis pindah ke input-nya. Ini membantu pengguna (terutama di HP) dan pengguna pembaca layar. Hubungkan label dengan input pakai
for="id-input".
Jenis-jenis input
Atribut type pada <input> menentukan jenis kolom. Berikut yang paling sering dipakai:
input-types.html
<input type="text" placeholder="Teks biasa">
<input type="email" placeholder="email@contoh.com">
<input type="password" placeholder="Password">
<input type="number" min="0" max="100">
<input type="tel" placeholder="0812...">
<input type="url" placeholder="https://...">
<input type="date">
<input type="time">
<input type="color">
<input type="range" min="0" max="100">
<input type="file">
<input type="checkbox"> Setuju
<input type="radio" name="jk" value="L"> Laki-laki
<input type="radio" name="jk" value="P"> Perempuan
<input type="hidden" value="data-rahasia">Coba langsung
Kenapa tipe tepat itu penting
Di HP,
type="email" memunculkan keyboard dengan @. type="tel" memunculkan keypad angka. type="number" otomatis validasi harus angka. Pilih tipe yang tepat — pengguna akan terima kasih.
Attribute penting
Attribute (atau atribut) adalah info tambahan yang ditulis di dalam tag pembuka. Format: nama="nilai".
Attribute global (bisa dipakai di tag apapun)
| Attribute | Fungsi |
|---|---|
id | Identitas unik. Hanya boleh ada satu di satu halaman. |
class | Kelompok, bisa dipakai di banyak elemen. Digunakan oleh CSS & JS. |
style | CSS inline langsung di tag (hindari, pakai file CSS terpisah). |
title | Muncul sebagai tooltip saat hover. |
data-* | Custom data apa saja. Contoh: data-umur="25". |
hidden | Sembunyikan elemen. |
attribute.html
<!-- id unik, untuk CSS / JS -->
<div id="header">...</div>
<!-- class bisa banyak, pisahkan dengan spasi -->
<button class="btn btn-primary">Kirim</button>
<!-- title tampil sebagai tooltip -->
<abbr title="HyperText Markup Language">HTML</abbr>
<!-- data-* untuk info custom -->
<article data-id="123" data-kategori="berita">...</article>
id vs class
id untuk sesuatu yang hanya satu di halaman (misal: #header, #footer). class untuk gaya/perilaku yang bisa dipakai di banyak elemen (misal: .tombol, .kartu).
Tag semantik
Tag semantik memberi makna pada bagian halaman. Secara tampilan sama saja dengan <div>, tapi browser, Google, dan pembaca layar lebih paham struktur halamanmu.
| Tag | Dipakai untuk |
|---|---|
<header> | Bagian atas halaman atau section — biasanya berisi logo & navigasi. |
<nav> | Menu navigasi. |
<main> | Konten utama. Hanya satu per halaman. |
<section> | Bagian halaman yang punya tema. Biasanya punya heading. |
<article> | Konten yang berdiri sendiri (blog post, berita, komentar). |
<aside> | Konten pelengkap (sidebar, iklan, info terkait). |
<footer> | Bagian bawah halaman atau section. |
<figure> & <figcaption> | Gambar dengan keterangan. |
semantik.html
<body>
<header>
<h1>Blog Saya</h1>
<nav>
<a href="/">Home</a>
<a href="/tentang">Tentang</a>
</nav>
</header>
<main>
<article>
<h2>Judul Artikel</h2>
<p>Isi artikel di sini...</p>
</article>
<aside>
<h3>Artikel Terkait</h3>
<ul>
<li><a href="#">Judul 1</a></li>
<li><a href="#">Judul 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 Blog Saya</p>
</footer>
</body>
Div masih berguna
<div> belum mati. Gunakan <div> saat bagian itu tidak punya makna khusus dan cuma jadi pembungkus untuk CSS. Kalau bagiannya punya peran jelas (header, navigasi, artikel), pakai tag semantik.
Kuis Cepat
Mana yang tag untuk membuat link?
Bikin halaman profil singkat
Sekarang waktunya praktik! Buat satu file HTML bernama profil.html yang berisi halaman profil singkatmu sendiri. Ikuti ketentuan berikut:
Tugas
Ketentuan
- Pakai struktur HTML lengkap (DOCTYPE, html, head, body).
- Ada
<title>berisi "Profil [Namamu]". - Di body: satu
<h1>berisi namamu. - Satu paragraf perkenalan singkat (2-3 kalimat).
- Satu gambar (boleh pakai URL gambar dari internet).
- Daftar
<ul>berisi minimal 3 hobi. - Satu link ke akun media sosial-mu (boleh fiktif).
- Tabel berisi "Info singkat" dengan 3 baris (Umur, Kota, Pekerjaan/Sekolah).
- Di bagian paling bawah, satu
<footer>berisi copyright.
Coba sendiri dulu. Kalau mentok, baru buka jawabannya di bawah.
Lihat contoh jawaban
profil.html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profil Budi</title>
</head>
<body>
<header>
<h1>Halo, saya Budi!</h1>
<p>
Saya seorang pelajar yang sedang
belajar ngoding di labcodeku.
Suka membaca dan ngopi.
</p>
</header>
<main>
<img
src="https://picsum.photos/200"
alt="Foto profil Budi"
width="200">
<h2>Hobi saya</h2>
<ul>
<li>Membaca buku</li>
<li>Nonton anime</li>
<li>Ngoding</li>
</ul>
<h2>Info Singkat</h2>
<table>
<tr><th>Umur</th><td>20 tahun</td></tr>
<tr><th>Kota</th><td>Surabaya</td></tr>
<tr><th>Sekolah</th><td>SMK 1</td></tr>
</table>
<p>
Temukan saya di
<a href="https://instagram.com/budi"
target="_blank" rel="noopener">
Instagram
</a>
</p>
</main>
<footer>
<p>© 2026 Budi Santoso</p>
</footer>
</body>
</html>
Tips
Setelah selesai, simpan dan buka di browser. Kalau ada yang aneh, buka Inspect Element (klik kanan → Inspect) untuk melihat apa yang salah. Ini kebiasaan penting!
Ringkasan tag HTML
Referensi cepat — bookmark bagian ini.
| Tag | Fungsi |
|---|---|
<h1> – <h6> | Heading level 1–6 |
<p> | Paragraf |
<br> | Ganti baris |
<hr> | Garis horizontal |
<strong>, <em> | Tebal, miring (bermakna) |
<a href="..."> | Link |
<img src="..." alt="..."> | Gambar |
<ul>, <ol>, <li> | Daftar |
<table>, <tr>, <th>, <td> | Tabel |
<form action="..."> | Form |
<input type="..."> | Input field |
<textarea> | Input banyak baris |
<select>, <option> | Dropdown |
<button> | Tombol |
<div>, <span> | Pembungkus (blok, inline) |
<header>, <nav>, <main>, <footer> | Tag semantik |
<section>, <article>, <aside> | Tag semantik |