Bab 01: Mengenal HTML dan Cara Kerjanya
Halo teman-teman coder pemula, selamat datang di dunia HTML. Kalau kamu baru mulai belajar web development dan masih bingung harus mulai dari mana, HTML adalah titik start paling masuk akal. Bisa dibilang, HTML itu kerangka utama sebuah website. Tanpa HTML, tampilan web cuma bakal jadi halaman kosong yang nggak bisa ngapa-ngapain.
Di Bab 01 ini, kamu akan belajar mengenal HTML, kenapa HTML wajib dipelajari oleh pemula, dan bagaimana cara kerjanya di balik layar browser. Materinya disusun pelan-pelan, tanpa istilah ribet, dan disertai contoh sederhana supaya kamu benar-benar paham, bukan sekadar hafal.
Materi di bab ini aku susun berdasarkan pengalaman praktik membangun website, termasuk kesalahan-kesalahan umum yang sering dilakukan pemula saat pertama kali belajar HTML. Jadi kamu nggak cuma belajar teori, tapi juga menghindari jebakan klasik yang sering bikin orang nyerah di awal.
Setelah menyelesaikan bab ini, kamu akan:
- Memahami fungsi HTML dalam website
- Mengenal struktur dasar dokumen HTML
- Siap lanjut ke materi HTML berikutnya tanpa rasa bingung
Kalau kamu sudah siap membangun fondasi web development yang kuat, yuk kita mulai langkah pertamamu di dunia HTML.
Apa itu HTML?
HTML adalah singkatan dari HyperText Markup Language, yaitu bahasa dasar yang digunakan untuk membangun struktur sebuah halaman website. Sederhananya, HTML bertugas memberi tahu browser mana yang disebut judul, mana paragraf, mana gambar, dan mana tautan. Tanpa HTML, browser cuma akan melihat teks acak tanpa bentuk yang jelas.
Kalau diibaratkan membangun rumah, HTML itu kerangka utamanya. Dia menentukan letak dinding, pintu, jendela, dan atap. Warna cat dan dekorasinya nanti diurus oleh CSS, sementara interaksi seperti tombol dan animasi ditangani oleh JavaScript. Makanya, saat kamu belajar HTML untuk pemula, HTML selalu jadi langkah pertama sebelum masuk ke teknologi web lainnya.
Hal penting yang perlu dipahami sejak awal, HTML bukan bahasa pemrograman. HTML termasuk bahasa markup, artinya fungsinya hanya untuk menandai atau memberi struktur pada konten, bukan untuk membuat logika seperti perhitungan atau percabangan. Justru karena sifatnya ini, HTML relatif mudah dipelajari, bahkan oleh orang yang belum pernah ngoding sama sekali.
Dalam praktiknya, hampir semua website di internet dari blog sederhana sampai aplikasi web besar pasti menggunakan HTML sebagai fondasi awalnya. Jadi, memahami apa itu HTML dan fungsinya akan sangat membantu kamu saat melangkah lebih jauh ke dunia web development.
Sebagai pemula, kamu nggak perlu langsung hafal semua tag HTML. Fokus dulu memahami konsep dasarnya: HTML digunakan untuk menyusun struktur konten. Soal tampilan dan interaksi, itu akan kita bahas di materi berikutnya secara bertahap.
Sejarah Singkat HTML
HTML bukan teknologi baru yang tiba-tiba muncul barengan sama media sosial. Ceritanya dimulai tahun 1991, saat seorang ilmuwan bernama Tim Berners-Lee memperkenalkan HTML sebagai cara sederhana untuk berbagi dokumen di internet. Waktu itu, tujuan HTML masih polos banget biar dokumen bisa saling terhubung lewat link. Belum kepikiran soal desain cakep atau animasi halus.
Versi awal HTML sangat sederhana. Tag yang tersedia masih sedikit, dan tampilannya pun ya…bisa dibilang apa adanya. Tapi justru dari kesederhanaan itu, HTML berkembang cepat. Seiring waktu, kebutuhan website makin kompleks, dan HTML ikut berevolusi lewat berbagai versi, mulai dari HTML 2.0, HTML 3.2, sampai HTML 4.01.
Titik penting dalam sejarah HTML terjadi saat lahirnya HTML5. Versi ini membawa banyak fitur modern seperti tag <header>, <footer>, <article>, dan dukungan multimedia tanpa perlu plugin tambahan. Sejak HTML5, website nggak cuma jadi tempat baca teks, tapi juga bisa jadi aplikasi web yang interaktif.
Kalau ditarik ke masa sekarang, HTML sudah menjadi fondasi utama web development. Walaupun tampilannya sering ketutupan oleh CSS dan JavaScript, HTML tetap bekerja di balik layar sebagai kerangka utama. Bisa dibilang, sehebat apa pun teknologi web hari ini, semuanya tetap berdiri di atas HTML. Kini HTML sudah berumur puluhan tahun, tapi belum pensiun. Justru sampai sekarang, setiap website modern masih setia pakai HTML sebagai pondasinya.
Cara Kerja HTML
Setelah tahu apa itu HTML dan sedikit sejarahnya, sekarang muncul pertanyaan klasik pemula:
“HTML itu sebenarnya kerja gimana sih?”
Sederhananya begini: HTML tidak dijalankan, tapi dibaca.
Saat kamu membuka sebuah website, browser (seperti Chrome, Firefox, atau Edge) akan membaca file HTML dari atas ke bawah, lalu menerjemahkannya menjadi tampilan visual yang bisa kamu lihat di layar. HTML memberi tahu browser: ini judul, ini paragraf, ini gambar, ini link. Browser yang bertugas menampilkannya.
Urutan kerjanya kira-kira seperti ini:
- Kamu mengetik alamat website di browser
- Browser mengambil file HTML dari server
- Browser membaca struktur HTML
- Konten ditampilkan sesuai tag yang digunakan
HTML sendiri tidak menentukan warna, animasi, atau efek keren. Dia fokus ke struktur konten. Makanya, HTML sering bekerja bareng CSS dan JavaScript. HTML bilang apa isinya, CSS mengatur tampilannya, dan JavaScript mengurus interaksinya. Kerja tim, bukan solo karier.
Yang perlu kamu pahami sebagai pemula, browser sangat patuh pada HTML. Kalau struktur HTML kamu rapi, browser akan menampilkan halaman dengan rapi juga. Tapi kalau tag-nya berantakan? Ya tampilannya bisa ikut berantakan. Bukan salah browser, tapi salah penulisnya (alias kita sendiri).
Karena itulah, saat belajar HTML untuk pemula, fokus utamanya bukan menghafal semua tag, tapi memahami alur kerja HTML dan bagaimana browser membacanya. Kalau konsep ini sudah klik di kepala, belajar HTML selanjutnya bakal terasa jauh lebih mudah.
HTML itu kayak resep masakan. Kalau urutannya benar dijamin masakannya jadi tapi kalau loncat-loncat ya… rasanya bisa aneh, tapi kokinya tetap kamu.
Struktur Dasar HTML
Setiap halaman website yang dibuat dengan HTML punya struktur dasar yang sama. Mau itu blog sederhana atau website besar, fondasinya tetap mirip. Kalau strukturnya benar, browser bisa memahami isi halaman dengan baik. Kalau strukturnya berantakan… ya browser tetap nurut, tapi hasilnya bisa bikin dahi berkerut.
Struktur dasar HTML terdiri dari beberapa bagian utama yang wajib ada. Berikut contoh paling sederhana dari dokumen HTML:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>Ini adalah halaman HTML pertamaku.</p>
</body>
</html>Sekarang kita bahas satu per satu biar nggak cuma lihat kodenya doang.
1. <!DOCTYPE html> Baris ini memberi tahu browser bahwa dokumen yang kamu buat menggunakan HTML versi modern (HTML5). Ibaratnya, ini seperti bilang ke browser:
“Santai, ini HTML zaman sekarang, bukan HTML jadul.”
Walaupun kelihatannya sepele <!DOCTYPE html> penting supaya browser menampilkan halaman dengan standar yang benar.
2. <html> Tag <html> adalah pembungkus utama dari seluruh isi halaman web. Semua elemen HTML, mulai dari judul sampai paragraf, berada di dalam tag ini. Kalau diibaratkan rumah, <html> itu bangunannya.
3. <head> Bagian <head> berisi informasi tentang halaman, bukan konten yang langsung terlihat oleh pengunjung. Di sinilah biasanya kita menaruh:
- Judul halaman <title>
- Meta tag
- Link ke CSS
- Informasi SEO
Walaupun pengunjung nggak melihat isinya secara langsung, bagian ini penting banget untuk browser dan mesin pencari.
4. <title> Tag <title> menentukan judul halaman yang muncul di tab browser dan hasil pencarian Google.Judul ini juga punya pengaruh ke SEO, jadi jangan asal-asalan ya.
5. <body> Nah, ini bagian paling “hidup”. Semua yang terlihat oleh pengunjung ada di dalam <body>:
- teks
- gambar
- link
- tombol
- video
Kalau <head> itu otak, <body> itu badannya.
Catatan Penting untuk Pemula
Saat belajar HTML di awal, kamu nggak perlu langsung hafal semua tag. Yang paling penting adalah memahami alur struktur HTML:
- Mulai dari DOCTYPE
- Masuk ke <html>
- Lalu dibagi menjadi <head> dan <body>
Kalau struktur ini sudah nyantol di kepala, belajar tag HTML lainnya bakal jauh lebih gampang. Struktur HTML itu kayak kerangka manusia. Tulangnya rapi=berdiri tegap. Tulangnya acak ya… agak susah jalan.
Tag-Tag Penting dalam HTML
Kalau HTML itu bahasa, maka tag adalah kosakatanya. Tanpa tag, browser bakal bengong, kayak dikasih chat tapi tanpa tanda baca.
Tag HTML dipakai untuk menandai jenis konten, supaya browser tahu mana judul, mana paragraf, mana gambar, dan mana link. Hampir semua tag HTML ditulis dengan pasangan pembuka dan penutup, walaupun ada juga yang cuma satu (nanti kita bahas).
Secara umum, bentuk tag HTML itu seperti ini:
<tag>Isi konten</tag>Nah, berikut ini tag-tag HTML yang WAJIB kamu kenal:
1. <h1> sampai <h6> adalah Tag Judul. Dan tag ini dipakai buat judul dan subjudul:
- <h1> = judul utama halaman
- <h2> = sub judul
- <h3> = sub-sub judul
- sampai <h6>
Contoh:
<h1>Belajar HTML untuk Pemula</h1><h2>Mengenal Tag HTML</h2>Catatan penting:
Dalam satu halaman, cukup satu <h1>. Jangan semua judul kamu jadikan <h1>, nanti browser bingung, Google juga ikut garuk-garuk kepala.
2. <p> adalah Tag Paragraf
Ini tag paling sering dipakai. Semua teks panjang biasanya dibungkus dengan <p>.
Contoh:
<p>HTML adalah dasar dari semua website.</p>Tanpa <p>, teks kamu bisa nempel satu sama lain dan kelihatan berantakan. Jadi jangan pelit pakai paragraf, biar pembaca juga betah.
3. <a> adalah Tag Link
Tag <a> dipakai untuk membuat link (tautan), baik ke halaman lain maupun ke website lain.
Contoh:
<a href="https://apikabe.com">Belajar coding di Apikabe</a>Tag ini penting banget karena website tanpa link itu kayak jalan buntu. Dari sisi SEO juga, link membantu mesin pencari memahami hubungan antar halaman.
4. <img> adalah Tag Gambar
Tag ini dipakai untuk menampilkan gambar. Berbeda dari tag lain, <img> tidak punya tag penutup.
Contoh:
<img src="gambar.jpg" alt="Contoh struktur HTML">Atribut alt WAJIB diisi.Selain buat aksesibilitas, ini juga bantu SEO dan pengalaman pengguna.
5. <ul>, <ol>, dan <li> adalah Tag List
Kalau kamu mau bikin daftar, pakailah tag list.
- <ul> → daftar tanpa urutan
- <ol> → daftar berurutan
- <li> → item daftar
Contoh:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Tag ini bikin konten lebih rapi dan enak dibaca, terutama untuk tutorial dan panduan belajar.
6. <strong> dan <em> adalah Penekanan Teks
Dipakai untuk menekankan kata atau kalimat.
- <strong> = teks penting
- <em> = penekanan (biasanya miring)
Contoh:
<p><strong>HTML</strong> adalah fondasi website.</p>Ini lebih baik daripada sekadar mempertebal teks pakai gaya visual, karena browser dan mesin pencari juga paham maknanya.
Kenapa Tag HTML Itu Penting?
Saat kamu belajar HTML pertama kali, memahami tag itu jauh lebih penting daripada menghafalnya. Tag membantu:
- Browser menampilkan halaman dengan benar
- Pengguna membaca konten dengan nyaman
- Mesin pencari memahami struktur halaman
HTML yang rapi = website lebih profesional. Dan iya…lebih enak dilihat, dan lebih enak diindeks.
Kesalahan Umum Pemula saat Belajar HTML
Setiap orang yang belajar HTML untuk pemula hampir pasti pernah melakukan kesalahan yang sama. Santai aja, ini bukan dosa besar justru dari sini kamu bakal lebih cepat paham kalau tahu jebakan-jebakannya sejak awal.
1. Lupa Menutup Tag HTML
Ini kesalahan paling klasik.
Contoh salah:
<p>Ini paragraf
Contoh benar:
<p>Ini paragraf</p>
Beberapa browser memang baik hati dan tetap menampilkan teksnya. Tapi jangan ketipu. Di balik layar, struktur HTML kamu sudah kacau. Biasakan selalu menutup tag, biar halaman tetap rapi dan gampang dikembangkan.
2. Pakai Semua Judul dengan <h1>
Banyak pemula mikir:
“Judul kan harus gede, ya udah
<h1>semua.”
Padahal:
<h1>→ judul utama halaman<h2>→ subjudul<h3>→ anak subjudul
Kalau semua pakai <h1>, struktur halaman jadi nggak jelas. Ini bikin pembaca bingung dan mesin pencari juga kesulitan memahami topik halaman.
3. Nulis HTML Tapi Lupa Struktur Dasarnya
Ada yang langsung nulis begini:
<h1>Halo Dunia</h1>
<p>Belajar HTML</p>
Padahal seharusnya HTML punya kerangka dasar.
Kalau kamu melewatkan struktur ini, website tetap bisa tampil, tapi nggak rapi secara standar. Ibarat bangun rumah tanpa denah.
4. Mengira HTML Itu Bahasa Pemrograman
Ini miskonsepsi umum banget.
HTML bukan bahasa pemrograman.
HTML tidak bisa:
- melakukan perhitungan
- membuat logika if-else
- mengolah data
HTML cuma mengatur struktur konten.
Kalau mau website jadi interaktif, baru nanti kenalan sama JavaScript. Jadi jangan stres duluan, HTML memang sengaja dibuat sederhana untuk pemula.
5. Tidak Memakai Atribut alt pada Gambar
Banyak pemula pakai:
<img src="gambar.jpg">
Padahal yang benar:
<img src="gambar.jpg" alt="Contoh struktur HTML dasar">
Atribut alt penting untuk:
- aksesibilitas
- SEO
- teks cadangan kalau gambar gagal dimuat
Ini detail kecil, tapi kelihatan profesional banget kalau kamu sudah terbiasa.
7. Langsung Fokus Tampilan, Lupa Struktur
Pemula sering pengen:
“Yang penting warnanya cakep dulu.”
Padahal saat awal belajar HTML, fokus utama itu struktur, bukan gaya.
Tampilan gaya itu urusan CSS. HTML tugasnya bikin kerangka yang kuat dulu. Masa baru bangun pondasi kok mau dicat duluan.
Kalau kamu pernah melakukan satu (atau semua) kesalahan di atas, tenang… kamu normal. Yang penting sekarang kamu:
- sadar kesalahannya
- tahu cara memperbaikinya
- lanjut belajar dengan struktur yang benar
Contoh HTML Sederhana
Di bagian ini, kita bakal bikin satu file HTML utuh, lengkap dari atas sampai bawah. Contoh ini cocok banget buat kamu yang baru belajar mengenal HTML karena sudah pakai struktur standar yang benar dan siap dikembangkan ke tahap selanjutnya.
Contoh Struktur HTML Lengkap
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Belajar HTML untuk Pemula</title>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>
Ini adalah contoh halaman HTML sederhana.
Saya sedang belajar HTML dari nol.
</p>
<a href="https://apikabe.com">Belajar coding di Apikabe</a>
</body>
</html>
Penjelasan setiap bagian, Tenang… kita bedah pelan-pelan ya
<!DOCTYPE html> Baris ini memberi tahu browser bahwa dokumen ini adalah HTML versi modern (HTML5).
Tanpa ini, browser bisa masuk mode jadul dan tampilan jadi aneh.
<html lang=”id”> Atribut lang menunjukkan bahasa utama halaman.
Kenapa ini penting?
- Membantu mesin pencari memahami bahasa konten
- Membantu screen reader (aksesibilitas)
- Baik untuk SEO
Karena kontennya bahasa Indonesia, pakai:
<html lang="id">
Kalau bahasa Inggris:
<html lang="en">
<meta charset=”UTF-8″> Ini WAJIB, apalagi buat website bahasa Indonesia.
Fungsinya:
- Menampilkan huruf dengan benar
- Mencegah teks jadi aneh
Tanpa ini, karakter seperti:
é, ó, “ ”, atau emoji
bisa rusak tampilannya.
<title> Judul halaman yang muncul di:
- Tab browser
- Hasil pencarian Google
Ini bukan judul konten, tapi judul halaman.
Satu halaman → satu <title>.
<body> Semua konten yang terlihat oleh pengunjung ada di dalam <body>:
- Judul
- Paragraf
- Gambar
- Link
Kalau nggak di dalam <body>, ya… nggak kelihatan
Jadi apa perlu lang & meta charset atau nggak? Jawaban jujurnya PERLU dan DISARANKAN dari awal. Alasannya:
- Ini best practice
- SEO friendly
- Profesional
- Nggak bikin ribet
Daripada nanti benerin ulang, mending biasakan dari sekarang. Nah kalau contoh HTML kamu:
- ada <!DOCTYPE>
- ada <html lang=””>
- ada <meta charset=”UTF-8″>
- struktur rapi
Itu tandanya kamu belajar HTML dengan cara yang BENAR
Kesimpulan
Di bab pertama ini, kamu sudah mengambil langkah awal yang penting untuk belajar HTML, mulai dari mengenal HTML, memahami sejarah singkatnya, sampai tahu cara kerja HTML di browser, semuanya jadi pondasi sebelum kamu masuk ke tahap coding yang lebih teknis. Di sini juga terlihat jelas bahwa HTML bukan bahasa pemrograman, melainkan bahasa markup yang berfungsi mengatur struktur konten website.
Kamu juga sudah belajar struktur dasar HTML, mengenal tag-tag penting, memahami kesalahan umum pemula, dan melihat contoh HTML sederhana yang rapi dan sesuai standar. Dengan pemahaman ini, kamu tidak lagi sekadar ngetik kode tapi mulai mengerti kenapa HTML ditulis seperti itu dan bagaimana cara kerjanya saat ditampilkan di browser.
Kalau kamu ingin melanjutkan perjalanan belajar secara lebih terstruktur dan bertahap, kamu bisa lanjut ke halaman Belajar HTML Edisi Lengkap yang berisi panduan dari dasar sampai siap dipakai membangun website sungguhan. Materinya disusun khusus untuk pemula, jadi kamu bisa belajar dengan alur yang jelas tanpa loncat-loncat.Ingat, menguasai HTML itu bukan soal cepat-cepatan, tapi soal konsisten. Selama kamu paham konsep dasar seperti mengenal HTML dan cara kerjanya, bab-bab selanjutnya akan terasa jauh lebih ringan dan menyenangkan.
Ke Bab selanjutnya: Bab 02: Persiapan Awal Belajar HTML