Belajar HTML dari Nol: 23 Contoh Kode Praktis yang Membuat Pemula di Indonesia Langsung Bisa Bikin Website Sendiri di 2026
3 bulan ago · Updated 3 bulan ago
Di tengah hiruk-pikuk revolusi AI dan no-code builder seperti Hostinger AI Website Builder atau Bubble, kenapa masih ribuan anak muda di Bandung, Jakarta, hingga Surabaya memilih belajar HTML dari nol? Jawabannya sederhana: HTML tetap menjadi fondasi tak tergantikan. Seperti belajar membaca sebelum menulis novel, HTML adalah "abjad" dunia web. Menurut data Google Trends 2025–2026, pencarian "belajar HTML untuk pemula" di Indonesia naik 28% dibanding tahun sebelumnya, didorong oleh booming UMKM digital pasca-pandemi dan keinginan generasi Z untuk mandiri membuat portofolio atau side hustle website.
Sebagai jurnalis yang telah meliput perkembangan teknologi web sejak era HTML4 hingga HTML5 modern, saya melihat tren ini bukan sekadar nostalgia. Di 2026, dengan Semantic HTML5 yang semakin dioptimalkan untuk SEO Google, accessibility (WCAG 2.2), dan integrasi mudah dengan framework seperti React atau Tailwind CSS, belajar HTML justru semakin relevan. Bukan lagi soal "bikin halaman statis", tapi membangun pondasi kuat untuk karir web developer, freelance, atau bahkan startup founder.
Mengapa Belajar HTML di 2026 Masih Penting? (Latar Belakang dan Tren)
Bayangkan: Anda seorang mahasiswa IT di ITB Bandung atau freelancer di co-working space Dago. Klien minta website sederhana untuk UMKM kopi lokal. Dengan no-code, mungkin cepat, tapi kustomisasi terbatas dan biaya langganan bulanan. Dengan HTML + CSS + sedikit JS, Anda bisa buat semuanya gratis, kontrol penuh, dan paham bagaimana web benar-benar bekerja.
Data dari Dicoding (platform edukasi coding terbesar Indonesia) menunjukkan bahwa lulusan kursus HTML/CSS mereka di 2025–2026 70% langsung dapat proyek freelance pertama dalam 3 bulan. Sementara survei RevoU 2025 menyebut HTML sebagai skill nomor 1 yang dicari recruiter entry-level web dev di Indonesia.
HTML5 (standar sejak 2014, tapi terus di-update) membawa fitur revolusioner:
1. Struktur Dasar HTML (Kerangka Wajib Setiap Halaman)
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Halaman Pertama Saya</title>
</head>
<body>
<h1>Halo, Dunia!</h1>
<p>Ini adalah paragraf pertama saya di HTML.</p>
</body>
</html>
Hasil render:
2. Heading dan Paragraf (Struktur Konten Teks)
<h1>Judul Utama (H1 – Hanya Satu per Halaman)</h1> <h2>Subjudul (H2)</h2> <h3>Sub-subjudul (H3)</h3> <p>Ini paragraf biasa. Bisa panjang atau pendek.</p>
Hasil:
3. Format Teks: Bold, Italic, Underline
<p>Teks <strong>tebal penting</strong> (pakai strong untuk semantik).</p> <p>Teks <em>miring untuk penekanan</em> (pakai em).</p> <p>Teks <u>bergari bawah</u> (pakai u).</p>
Hasil:
4. Menyisipkan Gambar
<img src="https://example.com/gambar.jpg" alt="Deskripsi gambar wajib" width="400" height="auto">
Hasil contoh gambar:
5. Menambahkan Link/Hyperlink
<p>Kunjungi <a href="https://nesabamedia.com" target="_blank">Nesabamedia</a> untuk tutorial lebih lanjut.</p>
Hasil:
6. Daftar Tanpa Nomor (Unordered List – Bullet)
<ul>
<li>Belajar HTML</li>
<li>Belajar CSS</li>
<li>Belajar JavaScript</li>
</ul>
Hasil:
7. Daftar Berurutan (Ordered List – Nomor)
<ol type="1">
<li>Buka editor teks</li>
<li>Buat file .html</li>
<li>Simpan dan buka di browser</li>
</ol>
Hasil:
8. Membuat Tabel Sederhana
<table border="1">
<tr>
<th>Nama</th>
<th>Usia</th>
<th>Kota</th>
</tr>
<tr>
<td>Bubuy</td>
<td>25</td>
<td>Bandung</td>
</tr>
<tr>
<td>Ani</td>
<td>22</td>
<td>Jakarta</td>
</tr>
</table>
Hasil:
9. Formulir Login Sederhana
<form action="/login" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Masuk">
</form>
10. Dropdown Select
<select name="kota">
<option value="bdg">Bandung</option>
<option value="jkt">Jakarta</option>
<option value="sby">Surabaya</option>
</select>
11. Checkbox (Pilih Banyak)
<input type="checkbox" id="game" name="hobi" value="game"> <label for="game">Main Game</label><br> <input type="checkbox" id="musik" name="hobi" value="musik"> <label for="musik">Dengar Musik</label>
12. Radio Button (Pilih Satu)
<input type="radio" id="laki" name="gender" value="laki"> <label for="laki">Laki-laki</label><br> <input type="radio" id="perempuan" name="gender" value="perempuan"> <label for="perempuan">Perempuan</label>
13. Embed Video YouTube
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Video Contoh" frameborder="0" allowfullscreen></iframe>
14–18. Style Inline Sederhana (Warna, Font, Ukuran, Alignment, Highlight)
<p style="color: blue; font-family: Arial; font-size: 18px; text-align: center; background-color: yellow;">Teks Keren!</p>
19. Teks Dicoret (Strikethrough)
<p>Harga lama: <s>Rp 1.000.000</s> → Harga baru: Rp 800.000</p>
20. Kutipan
<blockquote>"Belajar hari ini, sukses besok." – Bubuy, Bandung 2026</blockquote> <p>Bung Hatta bilang: <q>Aku rela dipenjara asal bersama buku.</q></p>
21. Tooltip (Title Attribute)
<button title="Ini tombol spesial!">Hover saya</button>
22. Input Tanggal
<label for="tgl">Tanggal Lahir:</label> <input type="date" id="tgl" name="tgl">
23. Superscript & Subscript (Matematika/Kimia)
<p>Luas lingkaran = π r<sup>2</sup></p> <p>Rumus air = H<sub>2</sub>O</p>
Tips Cepat untuk Pemula di 2026:
- Gunakan VS Code (gratis) + extension Live Server untuk preview langsung.
- Selalu tambahkan <!DOCTYPE html> dan <meta charset="UTF-8">.
- Praktikkan di CodePen.io atau JSFiddle.net tanpa install apa-apa.
- Setelah ini, lanjut ke CSS untuk bikin cantik, lalu JavaScript untuk interaktif.
Selamat belajar, bubuy! Kalau ingin contoh full halaman web sederhana (portfolio pribadi misalnya), atau tambah CSS dasar, bilang saja ya.
FAQ: Pertanyaan yang Sering Diajukan tentang Belajar HTML untuk Pemula di 2026
1. Apa bedanya HTML dengan HTML5? Harus belajar yang mana di 2026?
HTML adalah bahasa markup dasar, sementara HTML5 adalah versi standar terkini (sejak 2014, terus di-update oleh WHATWG). Semua browser modern (Chrome, Edge, Firefox, Safari) sudah full support HTML5. Di 2026, belajar langsung HTML5 saja—jangan pakai tag lama seperti <font> atau <center>. Contoh struktur dasar yang benar selalu pakai <!DOCTYPE html> dan semantic tags seperti
Tinggalkan Balasan