By hanifabdusy 
HTML (HyperText Markup Language) adalah fondasi dasar dari setiap halaman website. Semua yang kamu lihat di internet—teks, gambar, tombol, tabel, hingga form—dibangun menggunakan HTML. Jika kamu ingin belajar web development, maka memahami HTML adalah langkah pertama yang wajib dikuasai.
Artikel ini akan membahas:
- Apa itu HTML
- Struktur dasar HTML
- Elemen-elemen penting HTML
- Contoh kode HTML
- Rekomendasi sumber belajar (W3Schools, MDN, dll.)
🔹 Apa Itu HTML?
HTML adalah bahasa markup yang digunakan untuk membuat struktur halaman web. HTML tidak dianggap sebagai bahasa pemrograman, karena tugasnya hanya menentukan struktur dan konten, bukan menjalankan logika seperti JavaScript.
Contoh fungsi HTML:
- Menampilkan teks
- Menampilkan gambar
- Membuat link
- Mengatur paragraf
- Membuat form input
- Membuat tabel
Intinya, tanpa HTML, halaman web tidak akan bisa ditampilkan.
🔹 Struktur Dasar HTML
Setiap dokumen HTML memiliki struktur dasar seperti berikut:
Selamat Datang di Website Saya
Ini adalah paragraf pertama saya di HTML.
Penjelasan singkat:
<!DOCTYPE html>→ Memberitahu browser bahwa ini dokumen HTML5<html>→ Tag utama<head>→ Berisi informasi halaman (judul, meta, CSS)<body>→ Bagian yang ditampilkan di halaman web
🔹 Beberapa Elemen Dasar HTML yang Wajib Diketahui
1. Heading
Untuk membuat judul dan subjudul:
<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Judul Bagian</h3>2. Paragraf
Digunakan untuk teks biasa:
<p>Ini adalah paragraf dalam HTML.</p>3. Link (Anchor)
<a href="https://www.w3schools.com">Belajar di W3Schools</a>4. Gambar
<img src="gambar.jpg" alt="Deskripsi gambar" width="300">5. List (Daftar)
Ordered List (bernomor):
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>Unordered List (bullet):
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>6. Table (Tabel)
<table border="1">
<tr>
<th>Nama</th>
<th>Umur</th>
</tr>
<tr>
<td>Hanif</td>
<td>19</td>
</tr>
</table>7. Form (Input User)
<form>
<label>Nama:</label>
<input type="text" placeholder="Masukkan nama anda">
<button type="submit">Kirim</button>
</form>🔹 Latihan HTML Dasar: Membuat Profil Sederhana
Coba tempelkan ini di Prism Code Block (HTML):
<!DOCTYPE html>
<html>
<head>
<title>Profil Saya</title>
</head>
<body>
<h1>Hai, saya Hanif!</h1>
<p>Saya sedang belajar pemrograman web.</p>
<h2>Hobi Saya:</h2>
<ul>
<li>Ngoding</li>
<li>Desain UI</li>
<li>Bermain musik</li>
</ul>
<h2>Kontak:</h2>
<a href="mailto:hanif@example.com">Email Saya</a>
</body>
</html>🔹 Sumber Belajar HTML Terbaik
Berikut referensi yang sangat direkomendasikan:
🔗 W3Schools (Paling Mudah untuk Pemula)
https://www.w3schools.com/html
Fitur:
- Belajar sambil mencoba
- Contoh yang jelas
- Menu terstruktur
🔗 MDN Web Docs (Dokumentasi Resmi)
https://developer.mozilla.org/en-US/docs/Web/HTML
Fitur:
- Penjelasan lebih mendalam
- Cocok untuk level intermediate–advanced
🔗 FreeCodeCamp — Belajar dari Nol
https://www.freecodecamp.org/learn
🔹 Kesimpulan
Memahami HTML adalah dasar utama sebelum melanjutkan ke CSS, JavaScript, dan React. Dengan mempelajari elemen-elemen seperti:
<h1>,<p><img><a><ul>,<ol><table><form>
…kamu akan bisa membuat halaman web lengkap dari nol. Setelah HTML, kamu bisa lanjut belajar CSS dan JavaScript, kemudian belajar framework modern seperti React.