Pengenalan HTML: Fondasi Pembuatan Website

Jadi Anda ingin belajar bikin website? Langkah pertama yang harus dipahami adalah HTML — bahasa yang jadi fondasi setiap halaman web yang pernah Anda lihat di browser.

Tanpa HTML, tidak ada website. Sama aja kayak bangun rumah tanpa fondasi.

1. HTML Itu Apa Sih?

HTML kepanjangan dari HyperText Markup Language. Jangan kaget — ini bukan bahasa pemrograman kayak Python, Ruby, atau JavaScript. Ini bahasa markup.

Apa bedanya?

Bahasa pemrograman itu punya logika — misal: kalau angkanya ganjil, tampilkan pesan “Aneh”. Kalau nilainya positif, tambahkan ke total. Sedangkan HTML cuma nandain teks supaya browser ngerti — tidak ada logika, tidak ada perhitungan.

Contohnya:

<h1>Halo, Dunia!</h1>
<p>Ini paragraf pertama gue.</p>

Anda tulis gitu, browser baca, terus tampilin jadi halaman web yang bisa dilihat.

Simpel kan?

2. HTML Dari Dulu Sampai Sekarang

Dulu HTML cuma buat teks doang. Sekarang? Bisa audio, video, game, sampai aplikasi kompleks.

Versi	Tahun	Ceritanya
HTML 1.0	1993	Masih sangat basic, cuma teks dan link
HTML 2.0	1995	Standar pertama yang diakui
HTML 4.01	1999	Mulai ada CSS, styling dipisah
XHTML	2000	HTML versi “galak” — syntax-nya ketat
HTML5	2014	Ini yang kita pakai sekarang — lengkap banget

HTML5 itu game changer. Bisa audio, video, canvas, storage, dan banyak lagi. Kalau mau belajar HTML, langsung aja ke HTML5.

3. Gimana Cara HTML Bekerja?

Alurnya simpel:

Anda tulis kode HTML → Browser baca → Muncul halaman web

Contoh:

<!-- Anda tulis ini -->
<h1>Hello, World!</h1>

<!-- Browser nampilin ini -->
# Hello, World!

Gak perlu install apapun. Cukup text editor (Notepad pun bisa) dan browser (Chrome, Firefox, Edge).

4. Bikin File HTML Pertama

Yuk langsung praktek!

Langkah 1: Buka text editor. VS Code lebih enak, tapi Notepad juga bisa.

Langkah 2: Tulis kode ini:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halo Dunia</title>
</head>
<body>
    <h1>Halo, Dunia!</h1>
    <p>Ini halaman web pertama gue.</p>
</body>
</html>

Langkah 3: Simpan sebagai index.html

Langkah 4: Klik kanan file-nya → Open with → pilih Chrome/Firefox.

Boom! Anda punya website pertama.

5. Kenalan Sama Struktur HTML

Pasti agak bingung liat kode di atas. Santai, saya jelasin satu-satu.

DOCTYPE

<!DOCTYPE html>

Ini bilang ke browser: “Hei, ini HTML5 ya.” Tanpa ini, browser bisa salah baca dan tampilannya berantakan.

Tag `<html>`

<html lang="id">
    <!-- semua kode HTML di sini -->
</html>

Tag <html> adalah container utama yang membungkus semua kode HTML lainnya. Atribut lang="id" bilang ke browser kalau kontennya Bahasa Indonesia.

Tag `<head>`

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halo Dunia</title>
</head>

Ini bagian yang gak keliatan di halaman. Isinya:

charset="UTF-8" — supaya karakter khusus (emoji, aksara) muncul dengan benar
viewport — supaya website tampil bagus di HP juga
<title> — judul yang muncul di tab browser

Tag `<body>`

<body>
    <h1>Halo, Dunia!</h1>
    <p>Ini halaman web pertama gue.</p>
</body>

Ini konten yang keliatan — teks, gambar, tombol, video, semuanya ada di sini.

6. Elemen, Tag, Atribut — Apa Bedanya?

Istilah-istilah ini sering membingungkan pemula. Saya jelasin:

Tag

Tag itu label yang dikelilingi tanda kurung sudut < >.

<p>Halo</p>
|  |    |
|  |    +-- Tag penutup
|  +-- Konten
+-- Tag pembuka

Element

Element = Tag pembuka + Konten + Tag penutup. Jadi <p>Halo</p> itu satu element.

Atribut

Atribut itu info tambahan di tag. Kayak nama file yang dikasih ekstensi.

<a href="https://google.com">Google</a>
|    |                      |
|    |                      +-- Konten (teks yang diklik)
|    +-- Atribut href (URL tujuan)
+-- Tag pembuka

Self-Closing Tag

Beberapa tag gak perlu penutup karena gak ada konten-nya.

<img src="foto.jpg" alt="Foto profil">
<br>
<hr>

7. Block vs Inline — Kenapa Ini Penting?

Di HTML, ada dua tipe elemen:

Block Elements

Menempati seluruh lebar — mulai baris baru.

<div>
    <h1>Judul</h1>
    <p>Paragraf 1</p>
    <p>Paragraf 2</p>
</div>

Contoh: <div>, <h1> sampai <h6>, <p>, <ul>, <table>

Inline Elements

Hanya menempati lebar kontennya — tetap sejajar.

<p>Ini teks <strong>tebal</strong> dan <em>miring</em> dalam satu baris.</p>

Contoh: <span>, <a>, <strong>, <em>, <img>

Kenapa penting? Karena CSS beda treatment buat block dan inline. Block bisa dikasih width/height, inline biasanya enggak.

8. Komentar di HTML

Komentar gak keliatan di browser. Tapi berguna buat catatan.

<!-- Ini komentar -->
<p>Paragraf ini keliatan</p>

<!--
    Ini komentar
    yang panjang
-->

Saya sering pake komentar buat:

Nandain section tertentu
Nonaktifkan kode sementara (daripada hapus)
Kasih catatan buat tim

9. HTML Yang Bener vs Yang Salah

Ini sering bikin pusing pemula. Contoh:

<!-- ✅ Bener -->
<p>Halo, dunia!</p>

<!-- ❌ Salah (lupa tutup) -->
<p>Halo, dunia!

<!-- ❌ Salah (huruf gede semua) -->
<P>Halo, dunia!</P>

<!-- ✅ Nested bener -->
<div>
    <p>Paragraf di dalam div</p>
</div>

<!-- ❌ Nested salah (overlap) -->
<div>
    <p>Paragraf di dalam div
</div>
</p>

Tip: Kalau ragu, cek di W3C Validator — gratis dan langsung kasih tau salahnya di mana.

10. Recap

Konsep	Penjelasan Singkat
HTML	Bahasa markup buat struktur web
Tag	`<tagname>...</tagname>`
Element	Tag + konten + tag tutup
Atribut	Info tambahan di tag
Block element	Lebar penuh (div, p, h1)
Inline element	Lebar konten aja (span, a, strong)
DOCTYPE	Versi HTML
`<head>`	Metadata (judul, charset)
`<body>`	Konten yang keliatan
Komentar	`<!-- komentar -->`

Penutup

HTML itu dasarnya. Tanpa HTML, gak ada CSS, gak ada JavaScript, gak ada framework apapun.

Setelah pahami struktur dasar ini, Anda sudah siap bikin halaman web yang lebih kompleks. Di artikel selanjutnya, kita akan bedah Struktur Dasar HTML lebih dalam — DOCTYPE, <html>, <head>, <body>, dan cara nesting yang bener.