Pemrograman web modern dimulai dari fondasi yang kokoh, dan fondasi tersebut adalah HyperText Markup Language (HTML). HTML bukanlah bahasa pemrograman dalam artian tradisional (seperti JavaScript atau Python) karena ia tidak memiliki logika atau kemampuan komputasi, melainkan merupakan bahasa markup yang berfungsi untuk mendefinisikan struktur dan konten dari sebuah halaman web. Memahami HTML secara lengkap adalah langkah pertama yang krusial bagi siapa pun yang bercita-cita menjadi pengembang web.
Setiap dokumen HTML harus dimulai dengan deklarasi DOCTYPE. Deklarasi ini memberitahu browser versi HTML mana yang digunakan. Saat ini, standar yang paling umum adalah HTML5. Setelah itu, seluruh konten situs web dibungkus dalam tag <html>. Di dalam tag ini, terdapat dua bagian utama: <head> dan <body>.
Bagian <head> berisi meta-informasi tentang dokumen, seperti judul halaman (yang muncul di tab browser), tautan ke file CSS, metadata penting untuk mesin pencari, dan pengaturan karakter set (seperti UTF-8). Bagian <body> adalah wadah untuk semua konten yang terlihat oleh pengguna, termasuk teks, gambar, tautan, tabel, dan formulir.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Judul Halaman Saya</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Konten Utama</h1>
<p>Ini adalah paragraf pertama.</p>
</body>
</html>
Seiring berkembangnya standar HTML, penekanan beralih dari sekadar tampilan visual ke makna (semantik) dari konten. HTML5 memperkenalkan banyak elemen baru yang sangat membantu dalam mendefinisikan struktur bagian-bagian halaman web secara logis. Menggunakan elemen semantik dengan benar membantu aksesibilitas dan SEO.
Untuk kerangka utama, kita menggunakan elemen seperti <header> (untuk judul dan navigasi atas), <nav> (untuk tautan navigasi utama), <main> (untuk konten unik halaman), <article> atau <section> (untuk mengelompokkan konten terkait), <aside> (untuk konten sampingan), dan <footer> (untuk informasi penutup).
Contoh penandaan tingkat judul adalah <h1> hingga <h6>, di mana <h1> harus unik per halaman sebagai judul utama. Teks diformat menggunakan <p> (paragraf), sementara penekanan atau penyorotan menggunakan <em> (teks miring/penekanan) atau <strong> (teks tebal/penting).
Dua komponen kunci dari web adalah menghubungkan konten (hyperlinks) dan menampilkan media. Tautan dibuat menggunakan tag jangkar (anchor) <a>. Atribut paling penting di sini adalah href, yang menentukan URL tujuan. Jika tautan mengarah ke bagian lain di halaman yang sama, kita menggunakan ID sebagai jangkar.
Untuk menampilkan gambar, kita menggunakan tag <img>. Tag ini bersifat "self-closing" (tidak memerlukan tag penutup). Dua atribut wajib adalah src (sumber file gambar) dan alt (teks alternatif). Teks alternatif sangat penting karena akan dibaca oleh pembaca layar (screen readers) bagi pengguna tunanetra dan ditampilkan jika gambar gagal dimuat. Pengelolaan media modern juga mencakup tag <video> dan <audio>.
Pemrograman web HTML lengkap tidak akan sempurna tanpa kemampuan mengumpulkan data dari pengguna melalui formulir. Formulir didefinisikan dengan tag <form>. Di dalamnya, berbagai jenis input dikendalikan oleh tag <input> dengan atribut type yang bervariasi (text, password, radio, checkbox, submit, dll.).
Setiap elemen input idealnya dibungkus bersama dengan label menggunakan tag <label>, dihubungkan menggunakan atribut for yang sesuai dengan id elemen input. Ini meningkatkan pengalaman pengguna dan aksesibilitas. Selain input sederhana, HTML5 juga memperkenalkan tipe input yang lebih spesifik seperti email, url, date, dan range, yang memberikan validasi dasar bawaan dari browser.
Untuk memastikan bahwa implementasi HTML Anda terlihat rapi di perangkat mobile, penggunaan tag meta viewport dalam <head> adalah non-negosiasi: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Ini memaksa browser mobile untuk mengatur lebar halaman sesuai dengan lebar layar perangkat, bukan mengasumsikan lebar desktop standar. Meskipun styling (CSS) yang menentukan tata letak responsif, struktur HTML yang semantik memastikan bahwa konten dapat diatur ulang (re-flow) dengan baik saat ukuran layar berubah. HTML adalah fondasi yang harus dibangun dengan baik sebelum lapisan presentasi (CSS) dan perilaku (JavaScript) diterapkan. Dengan menguasai elemen-elemen inti ini, Anda telah menguasai 80% dari struktur halaman web yang solid.