Jika kamu ingin belajar coding, maka HTML adalah langkah pertama yang wajib dipahami. HTML adalah fondasi dari semua website di internet. Tanpa HTML, tidak ada struktur halaman, tidak ada teks, tidak ada gambar, dan tidak ada tombol.
Artikel ini akan membahas HTML dari nol hingga kamu bisa membuat website pertamamu sendiri. Semua dijelaskan secara sederhana dan step-by-step agar mudah dipahami pemula.
Apa Itu HTML?
HTML adalah singkatan dari HyperText Markup Language. HTML bukan bahasa pemrograman seperti JavaScript atau Python. HTML adalah bahasa markup yang digunakan untuk menyusun struktur halaman website.
HTML memberi tahu browser bagaimana menampilkan konten seperti judul, paragraf, gambar, tabel, dan link.
Bagaimana Cara Kerja HTML?
Saat kamu membuka sebuah website, browser membaca file HTML dan menerjemahkannya menjadi tampilan visual.
Struktur HTML terdiri dari tag-tag yang dibungkus tanda kurung sudut < >.
Contoh sederhana:<h1>Halo Dunia</h1>
Tag <h1> berarti heading atau judul utama.
Struktur Dasar HTML
Setiap halaman HTML memiliki struktur dasar seperti ini:
<!DOCTYPE html> <html> <head> <title>Website Pertama Saya</title> </head> <body> <h1>Halo Dunia!</h1> <p>Ini adalah website pertama saya.</p> </body> </html>
Penjelasan Struktur
- <!DOCTYPE html> → Memberi tahu browser bahwa ini HTML5
- <html> → Pembungkus seluruh dokumen
- <head> → Berisi informasi meta dan judul
- <body> → Berisi konten yang terlihat
Tag HTML yang Wajib Diketahui
1. Heading
<h1>Judul Besar</h1> <h2>Sub Judul</h2> <h3>Sub Judul Kecil</h3>
2. Paragraf
<p>Ini adalah paragraf.</p>
3. Link
<a href="https://example.com">Klik di sini</a>
4. Gambar
<img src="gambar.jpg" alt="Deskripsi gambar">
5. List
List Tidak Berurutan:<ul> <li>Item 1</li> <li>Item 2</li> </ul>List Berurutan:
<ol> <li>Langkah 1</li> <li>Langkah 2</li> </ol>
Langkah Praktik: Membuat Website Biodata
Sekarang kita praktik membuat website biodata sederhana.
<!DOCTYPE html>
<html>
<head>
<title>Biodata Saya</title>
</head>
<body>
<h1>Nama Saya</h1>
<p>Saya sedang belajar HTML.</p>
<h2>Hobi</h2>
<ul>
<li>Coding</li>
<li>Membaca</li>
<li>Gaming</li>
</ul>
</body>
</html>
Simpan file dengan nama index.html, lalu buka di browser.
Memahami Attribute dalam HTML
Attribute adalah informasi tambahan dalam tag.
Contoh:<a href="https://google.com" target="_blank">Buka Google</a>
- href → Tujuan link
- target="_blank" → Membuka tab baru
Struktur HTML Modern (SEO Friendly)
Dalam praktik profesional, HTML juga harus ramah SEO.
Contoh meta tag penting:<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Website belajar HTML">
Kesalahan Umum Pemula Saat Belajar HTML
- Tidak menutup tag
- Salah penempatan tag
- Tidak memahami struktur dasar
- Langsung lompat ke JavaScript tanpa memahami HTML
Latihan Agar Mahir HTML
- Buat halaman biodata
- Buat halaman artikel sederhana
- Buat halaman produk sederhana
- Coba tambahkan gambar dan link
- Gabungkan beberapa halaman dengan link navigasi
Langkah Setelah Menguasai HTML
Setelah memahami HTML, langkah selanjutnya adalah belajar CSS untuk mempercantik tampilan dan JavaScript untuk membuat website interaktif.
Kesimpulan
HTML adalah fondasi utama dalam dunia web development. Dengan memahami struktur dasar dan tag-tag penting, kamu sudah mengambil langkah pertama menjadi seorang developer.
Jangan hanya membaca. Praktik langsung dan buat project kecil agar pemahaman semakin kuat.
