Belajar HTML - Pengertian dan Dasar Membuat Halaman Website untuk Pemula

Halo teman-teman,

Pernah nggak sih kalian penasaran gimana caranya sebuah website bisa muncul di browser? Atau mungkin ada yang pengin banget bikin halaman web sendiri tapi bingung harus mulai dari mana? Tenang, kalian nggak sendirian!

Nah, di artikel ini kita akan mulai dari dasar dengan kenalan sama HTML, bahasa utama yang dipakai untuk membangun halaman web. Ibarat rumah, HTML itu adalah kerangkanya. Yuk kita bahas bareng-bareng!

Apa Itu HTML

HTML adalah singkatan dari HyperText Markup Language, yaitu bahasa standar yang digunakan untuk membangun struktur halaman web. Dengan HTML, kamu bisa menentukan bagian-bagian penting dalam halaman seperti teks, gambar, link, hingga formulir.

Kalau kamu mau membuat halaman profil, blog pribadi, atau landing page sederhana—HTML adalah langkah awal yang wajib dikuasai. Kamu juga bisa membaca dokumentasi resmi seperti di MDN Web Docs HTML Guide untuk referensi lebih lanjut. HTML digunakan oleh semua website, dari yang kecil sampai platform besar sekalipun.

Bayangkan kamu lagi membangun rumah. HTML itu fondasi dan kerangkanya—yang mengatur mana yang jadi ruang tamu, kamar tidur, jendela, dan pintu. HTML menyusun struktur dan konten dari sebuah halaman.

Elemen dan Tag dalam HTML

Di dalam HTML, semua struktur dibangun dari yang namanya elemen. Setiap elemen ditulis menggunakan tag. Tag ini bisa diibaratkan seperti label yang membungkus konten agar browser tahu cara menampilkannya.

Biasanya tag datang berpasangan: pembuka dan penutup. Misalnya, tag  dipakai untuk membuat paragraf:

<p>Halo, ini paragraf!</p>

 adalah tag pembuka
 adalah tag penutup
Di tengahnya adalah isi paragraf

Ada juga tag yang nggak punya pasangan, disebut self-closing tag. Contohnya <img> untuk menampilkan gambar, atau   untuk membuat baris baru.

Struktur Dasar Dokumen HTML

Berikut ini adalah contoh struktur dasar dari sebuah file HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Halo Dunia!</h1>
    <p>Selamat datang di halaman HTML pertamaku.</p>
  </body>
</html>

Penjelasan singkatnya seperti ini:

<!DOCTYPE html>: mendeklarasikan bahwa ini adalah HTML versi 5
<html>: elemen utama pembungkus seluruh halaman
<head>: tempat metadata, judul, dan link ke file eksternal seperti CSS
<title>: isi teks yang tampil di tab browser
<body>: semua isi yang tampil langsung ke pengunjung

Bagaimana HTML Ditampilkan di Browser

Browser seperti Google Chrome atau Firefox akan membaca tag HTML dari atas ke bawah dan mengubahnya jadi tampilan visual. Untuk memahami lebih dalam cara kerja browser, kamu bisa kunjungi How Browsers Work yang menjelaskan secara teknis proses rendering HTML di balik layar., dan mengubahnya jadi tampilan visual. Misalnya, <h1> akan tampil besar sebagai judul,  jadi paragraf biasa, dan <a> jadi tautan yang bisa diklik.

Yang ditampilkan hanya isi dari tag—bukan tag-nya itu sendiri. Oleh karena itu, menulis tag dengan benar itu penting supaya halaman tampil sesuai harapan.

Gambaran Struktur HTML

Struktur HTML bisa dibayangkan seperti pohon bertingkat, dengan elemen saling bersarang:

HTML
├── head
│   └── title
└── body
    ├── h1
    └── p

Semakin banyak elemen di halaman, struktur ini akan makin kompleks. Tapi dengan memahami konsep dasarnya, kamu akan lebih mudah membangun halaman web yang rapi dan terorganisir.

Yuk Coba Bikin Halaman Pertama!

Waktunya praktek! Coba ikuti langkah-langkah berikut untuk membuat halaman pertamamu:

Buka teks editor seperti Notepad, Notepad++, atau Visual Studio Code
Ketik kode berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Halaman Coba</title>
  </head>
  <body>
    <h1>Halo HTML!</h1>
    <p>Ini adalah paragraf pertama.</p>
  </body>
</html>

Simpan filenya dengan nama latihan.html
Klik dua kali file itu untuk membukanya di browser
Tada! Kamu baru saja membuat halaman HTML pertamamu 🎉

Apa Selanjutnya?

Di artikel selanjutnya, kita akan membahas tentang editor HTML terbaik dan bagaimana cara menulis kode dengan lebih efisien. Memilih editor yang pas bisa mempercepat proses belajarmu.

Setelah itu, kita juga akan lanjut membahas elemen-elemen penting seperti heading, paragraf, tautan, gambar, dan masih banyak lagi. Ini akan jadi bekal penting sebelum kamu masuk ke tahap belajar CSS dan JavaScript.

Kalau kamu punya pertanyaan, jangan ragu untuk tulis di kolom komentar. Semangat belajar dan sampai ketemu di materi berikutnya!