Memahami Dasar Pemrograman HTML

Struktur dasar dokumen web.

HyperText Markup Language, atau yang lebih dikenal sebagai HTML, adalah tulang punggung dari setiap halaman web yang Anda lihat di internet. HTML bukanlah bahasa pemrograman dalam artian tradisional karena tidak memiliki logika seperti variabel atau loop, melainkan sebuah bahasa markup yang digunakan untuk mendefinisikan struktur dan konten dari sebuah halaman web. Memahami dasar pemrograman HTML adalah langkah pertama krusial bagi siapa pun yang ingin memasuki dunia pengembangan web.

Apa Itu HTML dan Fungsinya?

HTML berfungsi untuk memberi tahu browser (seperti Chrome, Firefox, atau Safari) bagaimana menata teks, gambar, tautan, tabel, dan elemen lain di layar. Setiap konten di web dibungkus dalam apa yang disebut "tag". Tag inilah yang memberikan makna struktural pada konten tersebut. Misalnya, tag <h1> memberi tahu browser bahwa teks di dalamnya adalah judul utama, sedangkan tag <p> menandakan sebuah paragraf.

Struktur Fundamental Dokumen HTML

Setiap dokumen HTML yang valid harus memiliki struktur dasar tertentu agar dapat diproses dengan benar oleh browser. Struktur ini memastikan bahwa browser mengenali jenis dokumen dan memisahkan bagian metadata dari konten yang terlihat oleh pengguna.

1. Deklarasi Dokumen (Doctype)

Baris pertama dalam dokumen HTML modern harus selalu berupa deklarasi <!DOCTYPE html>. Ini memberi tahu browser bahwa dokumen tersebut ditulis menggunakan standar HTML5, standar terbaru dan paling umum digunakan saat ini.

2. Elemen Root (html)

Seluruh konten halaman web harus dibungkus di dalam tag <html>. Ini adalah elemen induk dari semua elemen lainnya.

3. Bagian Kepala (head) dan Tubuh (body)

Di dalam tag <html>, terdapat dua bagian utama:

<head>: Berisi informasi meta tentang dokumen, seperti judul halaman yang muncul di tab browser (menggunakan tag <title>), tautan ke file CSS, dan pengaturan karakter (misalnya, <meta charset="UTF-8">). Informasi di bagian head tidak ditampilkan langsung sebagai konten di halaman.
<body>: Berisi semua konten yang akan dilihat oleh pengguna, seperti teks, gambar, tautan, dan semua elemen visual lainnya.

Contoh Struktur Dasar HTML

Berikut adalah contoh bagaimana struktur dasar ini terlihat dalam kode:

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

Memahami Tag dan Atribut

Tag adalah penanda struktural, seringkali datang berpasangan: tag pembuka (misalnya, <p>) dan tag penutup (misalnya, </p>). Tag yang tidak memiliki konten penutup disebut tag kosong, seperti <br> (untuk baris baru) atau <img> (untuk gambar).

Atribut memberikan informasi tambahan tentang elemen, dan selalu diletakkan di dalam tag pembuka. Contoh atribut yang sangat umum adalah href pada tag tautan (<a>) dan src pada tag gambar (<img>).

Contoh penggunaan atribut:

<a href="https://www.contoh.com">Kunjungi Situs Lain</a>
<img src="gambar.jpg" alt="Deskripsi Gambar">

Atribut alt pada gambar sangat penting untuk aksesibilitas dan SEO, karena menyediakan deskripsi teks jika gambar gagal dimuat atau dibaca oleh pembaca layar.

Elemen Konten Utama HTML

Selain struktur dasar, Anda perlu menguasai beberapa elemen inti:

Heading: Dari <h1> hingga <h6>, digunakan untuk menandai hierarki judul.
Paragraf: <p>.
Tautan (Links): <a> digunakan untuk menavigasi antar halaman.
Daftar (Lists): Baik terurut (<ol>) maupun tidak terurut (<ul>), dengan item daftar <li>.
Struktur Semantik (HTML5): Elemen modern seperti <header>, <nav>, <main>, <section>, dan <footer> membantu memberikan makna yang lebih jelas pada struktur halaman dibandingkan hanya menggunakan tag <div> generik.

Menguasai dasar pemrograman HTML ini membuka pintu untuk menambahkan gaya menggunakan CSS dan fungsionalitas menggunakan JavaScript. HTML adalah fondasi yang harus dikuasai sebelum melangkah lebih jauh dalam pengembangan web frontend. Ingatlah selalu untuk menjaga struktur tetap bersih dan menggunakan tag sesuai semantiknya untuk hasil terbaik.