Selamat datang di dunia pengembangan web! Jika Anda baru memulai perjalanan ini, HTML (HyperText Markup Language) adalah fondasi mutlak yang harus Anda kuasai. HTML bukanlah bahasa pemrograman dalam artian tradisional (karena tidak mengandung logika), melainkan bahasa markup yang digunakan untuk menyusun struktur dan konten dari sebuah halaman web. Tanpa HTML, internet yang kita kenal saat ini hanya akan berupa teks polos tanpa tata letak.
HTML adalah singkatan dari HyperText Markup Language. Kata "markup" di sini merujuk pada cara kita menandai (memberi label) bagian-bagian teks untuk memberitahu browser bagaimana menampilkan konten tersebut. Misalnya, kita menandai kata tertentu sebagai judul utama (menggunakan <h1>) atau menandai teks lain sebagai paragraf (menggunakan <p>).
Pentingnya HTML tidak bisa dilebih-lebihkan. HTML membentuk kerangka kerja dari setiap halaman web. Bahasa lain seperti CSS (Cascading Style Sheets) bertugas untuk menghias dan menata tampilan kerangka tersebut, sementara JavaScript digunakan untuk menambahkan interaktivitas. Tanpa kerangka HTML yang solid, CSS dan JavaScript tidak memiliki tempat untuk "menempel".
Setiap dokumen HTML yang valid harus dimulai dengan deklarasi tipe dokumen, diikuti oleh struktur inti yang terdiri dari elemen <html>. Elemen ini kemudian dibagi menjadi dua bagian utama: <head> dan <body>.
Mari kita lihat struktur minimalnya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Judul Halaman Saya</title>
</head>
<body>
<h1>Ini Adalah Judul Utama</h1>
<p>Ini adalah paragraf pertama.</p>
</body>
</html>Penjelasan komponen kunci:
<!DOCTYPE html>: Memberi tahu browser bahwa dokumen ini ditulis menggunakan standar HTML5 terbaru.<html>: Elemen akar yang membungkus seluruh konten halaman.<head>: Berisi metadata tentang dokumen, seperti karakter encoding (<meta charset="UTF-8">) dan judul yang muncul di tab browser (<title>). Konten di sini tidak ditampilkan langsung di halaman utama.<body>: Ini adalah bagian terpenting bagi konten visual. Semua teks, gambar, tautan, dan elemen yang terlihat oleh pengguna ditempatkan di sini.Setelah memahami kerangka dasarnya, fokus berikutnya adalah mempelajari elemen-elemen yang membentuk konten. HTML terdiri dari pasangan tag pembuka dan penutup (misalnya <p> dan </p>), meskipun ada juga tag tanpa penutup (self-closing tags).
HTML menyediakan enam tingkatan heading, dari <h1> (paling penting) hingga <h6> (paling tidak penting):
<h1>Tingkat 1</h1>
<h3>Tingkat 3</h3>Elemen <p> digunakan untuk blok teks biasa. Anda juga bisa membuat teks tebal (<strong> atau <b>) atau miring (<em> atau <i>).
Tautan adalah inti dari "HyperText". Kita menggunakan tag <a> (anchor) dengan atribut href (hypertext reference) untuk menentukan tujuan:
<a href="https://www.google.com">Kunjungi Google</a>Gambar disisipkan menggunakan tag <img> yang merupakan tag tanpa penutup. Ini memerlukan atribut wajib src (sumber lokasi gambar) dan alt (teks alternatif untuk aksesibilitas dan SEO):
<img src="foto_saya.jpg" alt="Foto seorang programmer sedang mengetik">Setelah Anda nyaman dengan membuat struktur dasar dan menggunakan elemen-elemen umum di atas, langkah selanjutnya dalam belajar bahasa program HTML adalah memahami cara membuat daftar (menggunakan <ul>, <ol>, dan <li>), memahami atribut, dan yang paling krusial, memisahkan struktur dari tampilan.
Ingat, HTML adalah tentang semantik—memberi makna yang benar pada konten Anda. Ketika Anda menandai sesuatu sebagai judul utama (<h1>), Anda tidak hanya memberikannya ukuran font besar; Anda memberitahu mesin pencari dan pembaca layar bahwa ini adalah topik utama halaman tersebut. Teruslah berlatih, buat halaman sederhana, dan jangan takut untuk mengeksplorasi tag baru!