Belajar HTML Dasar Hingga Mahir dengan Mudah
Bandung 06-05-2026
HTML (HyperText Markup Language) adalah fondasi utama dalam pembuatan website. Jika kamu ingin menjadi web developer, memahami HTML adalah langkah pertama yang wajib dikuasai. Kabar baiknya, HTML termasuk bahasa yang mudah dipelajari bahkan untuk pemula sekalipun.
Artikel ini akan membimbing kamu dari dasar hingga ke tahap mahir dengan cara yang sederhana dan mudah dipahami.
Apa Itu HTML?
HTML adalah bahasa markup yang digunakan untuk membuat struktur halaman web. Dengan HTML, kamu bisa menampilkan teks, gambar, video, tabel, dan berbagai elemen lainnya di browser.
Contoh sederhana HTML:
<!DOCTYPE html>
<html>
<head>
<title>Website Pertama Saya</title>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>Ini adalah website pertama saya.</p>
</body>
</html>
Struktur Dasar HTML
Setiap
halaman HTML memiliki struktur dasar seperti ini:
- <!DOCTYPE html> → Menentukan versi HTML
- <html> → Elemen utama
- <head> → Berisi metadata (judul, link CSS, dll)
- <body> → Isi utama yang ditampilkan ke pengguna
Tag-Tag Dasar HTML
Berikut beberapa tag penting yang wajib kamu tahu:
a. Heading (Judul)
<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
b. Paragraf
<p>Ini adalah paragraf.</p>
c. Link
<a href="https://google.com">Kunjungi Google</a>
d. Gambar
<img src="gambar.jpg" alt="Deskripsi gambar">
Membuat List (Daftar)
Ordered List (Berurutan)
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
Unordered List (Tidak Berurutan)
<ul>
<li>Item A</li>
<li>Item B</li>
</ul>
Membuat Tabel
<table
border="1">
<tr>
<th>Nama</th>
<th>Umur</th>
</tr>
<tr>
<td>Andi</td>
<td>20</td>
</tr>
</table>
Form Input (Interaksi User)
<form><label>Nama:</label>
<input type="text" name="nama">
<br>
<button type="submit">Kirim</button>
</form>
HTML Semantik (Level Menengah)
HTML semantik membantu struktur website lebih rapi dan SEO-friendly.
Contoh:
<header></header>
<nav></nav>
<main></main>
<section></section>
<article></article>
<footer></footer>
Untuk naik ke level mahir, lakukan hal berikut:
- Latihan membuat halaman web sederhana setiap hari
- Pelajari struktur layout website (header, sidebar, footer)
- Gabungkan HTML dengan CSS dan JavaScript
- Coba tiru desain website populer (latihan cloning)
- Gunakan tools seperti browser DevTools
Kesalahan Umum Pemula
- Lupa menutup tag
- Penulisan struktur tidak rapi
- Tidak menggunakan tag semantik
- Terlalu banyak inline style
berikut contoh kode HTML sederhana yang menampilkan judul dan paragraf:
<!DOCTYPE html>
<html>
<head>
<title>Contoh HTML Sederhana</title>
</head>
<body>
<h1>Belajar HTML Itu Mudah</h1>
<p>Ini adalah contoh paragraf pertama saya dalam HTML.</p>
</body>
</html>
Penjelasan singkat:
- <h1> → digunakan untuk menampilkan judul utama
- <p> → digunakan untuk membuat paragraf
- Semua isi yang terlihat di halaman berada di dalam tag <body>
Berikut contoh list berurutan (ordered list) dalam HTML:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Ordered List</title>
</head>
<body>
<h2>Daftar Kegiatan Harian</h2>
<ol>
<li>Bangun pagi</li>
<li>Belajar HTML</li>
<li>Mengerjakan tugas</li>
<li>Istirahat</li>
</ol>
</body>
</html>
Penjelasan:
<ol> → digunakan untuk membuat list berurutan (ordered list)
<li> → digunakan untuk setiap item dalam list
Hasilnya akan tampil dengan nomor urut seperti:
1. Bangun pagi
2. Belajar HTML
3. Mengerjakan tugas
4. Istirahat
Berikut beberapa contoh cara mengubah tipe penomoran pada ordered list (<ol>) di HTML:
Menggunakan Huruf (A, B, C)
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
Hasil:
A. HTML
B. CSS
C. JavaScript
Menggunakan Huruf Kecil (a, b, c)
<ol type="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
Menggunakan Angka Romawi Besar (I, II, III)
<ol type="I">
<li>Bab 1</li>
<li>Bab 2</li>
<li>Bab 3</li>
</ol>
Menggunakan Angka Romawi Kecil (i, ii, iii)
<ol type="i">
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ol>
Mengatur Nomor Awal
<ol start="5">
<li>Item Kelima</li>
<li>Item Keenam</li>
</ol>
Hasil akan dimulai dari angka 5.
Menggunakan CSS (Lebih Modern)
<ol style="list-style-type: square;">
<li>Item 1</li>
<li>Item 2</li>
</ol>
Beberapa nilai list-style-type:
- decimal (default angka)
- upper-alpha
- lower-alpha
- upper-roman
- lower-roman
Inline CSS (Langsung di Tag HTML)
CSS ditulis langsung di dalam atribut style pada elemen HTML.
<p style="color: blue; font-size: 18px;">
Ini paragraf berwarna biru
</p>
Kelebihan: Cepat dan praktis untuk perubahan kecil
Kekurangan: Tidak rapi, Sulit digunakan untuk banyak elemen
Internal CSS (Di Dalam File HTML)
CSS ditulis di dalam tag <style> pada bagian <head>.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Internal CSS</title>
<style>
p {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<p>Ini paragraf dengan Internal CSS</p>
</body>
</html>
Kelebihan: Lebih rapi dibanding inline, Cocok untuk satu halaman
Kekurangan: Tidak bisa digunakan ulang di banyak halaman
External CSS (File Terpisah)
Ini cara paling direkomendasikan. CSS ditulis di file terpisah (misalnya style.css), lalu dihubungkan ke HTML.
File HTML:
<!DOCTYPE html>
<html>
<head>
<title>Contoh External CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Belajar CSS</h1>
<p>Ini menggunakan External CSS</p>
</body>
</html>
File CSS (style.css):
h1 {
color: red;
}
p {
color: gray;
font-size: 18px;
}
Kelebihan: Kode lebih rapi dan terstruktur, Bisa digunakan di banyak halaman, Mudah maintenance
Kekurangan: Harus membuat file tambahan
Tips Tambahan
Pastikan file CSS berada di path yang benar
Gunakan nama class atau id untuk styling spesifik:
<p class="teks-merah">Contoh teks</p>
.teks-merah {
color: red;
}
Belajar HTML itu seperti belajar membangun pondasi rumah. Semakin kuat pemahaman dasar kamu, semakin mudah untuk naik ke tahap berikutnya seperti CSS, JavaScript, bahkan framework seperti Laravel atau React.
Mulailah dari yang sederhana, konsisten latihan, dan jangan takut mencoba. Dalam waktu singkat, kamu akan mampu membuat website sendiri dari nol.
- Inline CSS → untuk kebutuhan cepat
- Internal CSS → untuk satu halaman
- External CSS → untuk proyek profesional (paling disarankan)
