Belajar HTML Dasar untuk Pemula: Panduan Lengkap dan Mudah Memahami Fondasi Web

Pernahkah Anda penasaran bagaimana sebuah halaman website bisa menampilkan teks, gambar, tombol, hingga video? Semua hal menakjubkan yang Anda lihat di internet saat ini bermuara pada satu fondasi yang sama, yaitu HTML.

Jika Anda baru saja memutuskan untuk terjun ke dunia web development atau desain grafis web, HTML adalah gerbang pertama yang wajib Anda lalui. Kabar baiknya, HTML sama sekali tidak seseram yang dibayangkan. Artikel ini akan membimbing Anda memahami HTML dasar secara mendalam, santai, dan langsung bisa Anda praktikkan.

---

Apa Itu HTML?

HTML adalah singkatan dari Hypertext Markup Language. Di sini ada satu miskonsepsi yang sering terjadi di kalangan pemula: HTML bukanlah bahasa pemrograman.

HTML adalah bahasa markah (markup language). Tugas utamanya bukan mengolah logika atau menghitung matematika (seperti bahasa pemrograman Python atau JavaScript), melainkan untuk menstrukturkan dan menyusun konten pada sebuah halaman web.

Jika kita mengibaratkan sebuah website sebagai sebuah bangunan rumah:

• HTML adalah pondasi, batu bata, dan kerangka dindingnya.
• CSS adalah cat warna, dekorasi, dan desain interiornya.
• JavaScript adalah sistem kelistrikan, pintu otomatis, dan fungsi-fungsi interaktif lainnya.

Tanpa HTML, tidak akan ada halaman web di internet.

---

Memahami Anatomi Elemen HTML

HTML bekerja menggunakan Tag (tanda markah) untuk memberi tahu browser bagaimana sebuah konten harus ditampilkan. Mari kita lihat anatomi dasar dari sebuah elemen HTML berikut:

<p class="deskripsi">Halo Dunia, saya sedang belajar HTML!</p>

Mari kita bedah satu per satu bagian di atas:

1. Tag Pembuka (

   ): Menandakan awal dari sebuah elemen. Dalam contoh ini, p berarti paragraph (paragraf).

2. Atribut (class="deskripsi"): Informasi tambahan yang disisipkan di dalam tag pembuka. Atribut memiliki nama (class) dan nilai ("deskripsi"), berguna untuk memberikan identitas yang nantinya bisa dihias menggunakan CSS.
3. Konten (Halo Dunia...): Teks atau isi yang akan muncul di layar pengguna.
4. Tag Penutup (
   ): Menandakan akhir dari elemen. Cirinya adalah menggunakan tanda garis miring (/).

---

Struktur Dokumen HTML yang Wajib Ada

Setiap kali Anda membuat file HTML baru (biasanya disimpan dengan ekstensi .html), ada struktur standar yang wajib Anda tulis. Struktur ini menjadi kerangka utama agar browser tahu bahwa dokumen tersebut adalah dokumen web yang sah.

Berikut adalah boilerplate atau struktur dasar HTML5:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman HTML Pertamaku</title>
</head>
<body>
    <h1>Selamat Datang di Dunia Web Developer!</h1>
    <p>Ini adalah paragraf pertama yang saya buat menggunakan kode HTML dasar.</p>
</body>
</html>

Penjelasan Struktur:

• : Deklarasi untuk memberi tahu browser bahwa dokumen ini menggunakan standar HTML5 terbaru.
• : Tag utama yang membungkus seluruh konten web. Atribut lang="id" menandakan bahwa bahasa utama situs ini adalah bahasa Indonesia.
• : Bagian "otak" dari web. Berisi informasi meta (metadata), judul halaman, dan tautan ke file CSS/JavaScript. Apa yang ditulis di dalam tidak akan muncul langsung di halaman utama web, kecuali elemen