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

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

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)

<li>JavaScript</li>

</ol>

Hasil:

A. HTML

B. CSS

C. JavaScript

Menggunakan Huruf Kecil (a, b, c)

<li>JavaScript</li>

</ol>

Menggunakan Angka Romawi Besar (I, II, III)

</ol>

Menggunakan Angka Romawi Kecil (i, ii, iii)

</ol>

Mengatur Nomor Awal

<li>Item Kelima</li>

<li>Item Keenam</li>

</ol>

Hasil akan dimulai dari angka 5.

Menggunakan CSS (Lebih Modern)

</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.

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>

</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)

Vivo Y12 PD1901BF_EXMA

Wednesday, 6 May 2026