HyperText Markup Language (HTML) adalah tulang punggung dari setiap halaman web yang kita lihat di internet. Ini bukan bahasa pemrograman seperti JavaScript atau Python; HTML adalah bahasa markup yang digunakan untuk menyusun konten, menentukan struktur, dan memberi makna pada teks, gambar, tautan, dan elemen lainnya di dalam peramban (browser). Mempelajari dasar-dasar HTML adalah langkah pertama wajib bagi siapa pun yang ingin terjun ke dunia pengembangan web.
Ilustrasi struktur dasar dokumen HTML.
Setiap dokumen HTML yang valid dimulai dengan deklarasi tipe dokumen dan harus dibungkus dalam tag <html>. Di dalamnya, terdapat dua bagian utama: <head> dan <body>.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Judul Halaman Saya</title>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>Ini adalah konten yang terlihat.</p>
</body>
</html>
HTML bekerja menggunakan elemen yang didefinisikan oleh tag. Kebanyakan tag hadir berpasangan: tag pembuka (seperti <p>) dan tag penutup (seperti </p>). Konten berada di antara keduanya.
Untuk mengatur teks, kita menggunakan berbagai tag heading (judul) dan paragraf:
<h1> (paling penting/besar) hingga <h6> (paling kecil).<p>.<strong> untuk penekanan kuat (biasanya tebal) dan <em> untuk penekanan suara (biasanya miring).
Atribut memberikan informasi tambahan tentang suatu elemen dan selalu diletakkan di dalam tag pembuka. Contoh paling umum adalah atribut href pada tautan atau src pada gambar.
<a href="https://www.contoh.com">Kunjungi Situs Contoh</a>
<img src="gambar.jpg" alt="Deskripsi Gambar" width="100">
Perhatikan bahwa tag <img> adalah elemen kosong (self-closing), yang berarti ia tidak memerlukan tag penutup terpisah karena tidak membungkus konten apa pun.
Tautan adalah fitur utama yang membuat web menjadi "web". Tautan dibuat menggunakan tag anchor (jangkar), yaitu <a>. Atribut href (Hypertext Reference) menentukan tujuan tautan tersebut. Tautan dapat mengarah ke halaman lain di situs yang sama, situs eksternal, atau bahkan alamat email.
Untuk membuat tautan terbuka di tab baru, tambahkan atribut target="_blank". Ini adalah praktik yang baik untuk tautan eksternal agar pengunjung tidak langsung meninggalkan situs Anda.
Menambahkan visual sangat penting. Gambar dimasukkan menggunakan <img> dengan atribut src (sumber file) dan alt (teks alternatif). Atribut alt sangat krusial untuk aksesibilitas dan SEO, karena dibaca oleh pembaca layar dan ditampilkan jika gambar gagal dimuat.
Meskipun HTML5 telah memperkenalkan tag untuk video (<video>) dan audio (<audio>), prinsip dasarnya tetap sama: menentukan sumber file media melalui atribut src.
Dalam perkembangan HTML modern (HTML5), kita didorong untuk menggunakan tag semantik. Tag semantik bukan hanya tentang tata letak visual, tetapi tentang makna konten. Misalnya, daripada menggunakan <div> untuk segalanya, lebih baik menggunakan <header> untuk bagian kepala situs, <nav> untuk navigasi, dan <article> atau <section> untuk mengelompokkan konten. Penggunaan semantik membantu mesin pencari dan teknologi bantu memahami struktur halaman Anda dengan lebih baik.
Menguasai dasar-dasar struktur, tag utama, dan atribut adalah fondasi yang kokoh. Dari sini, langkah selanjutnya adalah mengintegrasikan CSS untuk gaya visual dan JavaScript untuk interaktivitas.