HyperText Markup Language, atau yang lebih dikenal dengan akronim HTML, adalah tulang punggung dari setiap halaman web yang Anda kunjungi. Jika web adalah sebuah bangunan, maka HTML adalah kerangkanya. Mempelajari HTML adalah langkah pertama dan paling fundamental bagi siapa pun yang bercita-cita menjadi pengembang web, baik itu di sisi depan (frontend) maupun full-stack.
HTML bukanlah bahasa pemrograman dalam artian tradisional seperti JavaScript atau Python. HTML adalah bahasa markup yang digunakan untuk menyusun (struktur) konten di internet. Ia memberi tahu browser bagaimana menampilkan teks, gambar, tautan, tabel, dan elemen lainnya sehingga menjadi tampilan yang terorganisir dan bermakna bagi pengguna.
Mengapa ini penting? Karena tanpa struktur yang tepat, semua data di internet akan terlihat seperti paragraf teks tak berujung. Dengan menguasai HTML, Anda dapat menentukan mana bagian yang merupakan judul utama (h1), mana yang merupakan paragraf biasa (p), dan bagaimana informasi dikelompokkan.
Setiap dokumen HTML yang valid harus mengikuti struktur dasar tertentu. Ini adalah fondasi yang harus Anda hafal di luar kepala:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Judul Halaman</title>
</head>
<body>
<!-- Konten Anda di sini -->
</body>
</html>
Penjelasan singkatnya:
<!DOCTYPE html>: Mendefinisikan bahwa dokumen ini adalah HTML5.<html>: Elemen akar yang membungkus seluruh halaman.<head>: Berisi metadata tentang dokumen, seperti judul yang muncul di tab browser, pengaturan karakter (charset), dan tautan ke CSS/JavaScript.<body>: Berisi semua konten yang terlihat oleh pengguna, seperti teks, gambar, dan link.Setelah memahami kerangka, fokuslah pada elemen-elemen yang paling sering digunakan untuk membangun struktur konten:
HTML5 memperkenalkan elemen-elemen semantik yang membantu mesin pencari dan teknologi bantu memahami struktur halaman lebih baik:
<header>: Untuk konten pengantar atau navigasi.<nav>: Untuk blok navigasi.<main>: Konten utama yang unik dari dokumen tersebut.<section>: Mengelompokkan konten terkait.<article>: Konten independen (misalnya posting blog).<aside>: Konten sampingan atau sidebar.<footer>: Informasi penutup halaman.Mengatur teks adalah tugas utama HTML:
<h1>Judul Terbesar</h1>
<p>Ini adalah paragraf biasa.</p>
<a href="url_anda">Ini adalah Hyperlink</a>
<img src="gambar.jpg" alt="Deskripsi gambar">
<ul>
<li>Item daftar satu</li>
</ul>
Teori saja tidak cukup dalam dunia koding. Cara terbaik untuk menguasai HTML adalah dengan segera membuka editor teks (seperti VS Code, Sublime Text, atau bahkan Notepad) dan mulai mengetik. Coba buat halaman sederhana yang berisi judul, beberapa paragraf, sebuah daftar tak berurutan, dan setidaknya satu tautan ke halaman lain (bahkan jika tautannya mengarah ke Google).
Perhatikan selalu bahwa setiap tag pembuka (misalnya <p>) harus ditutup dengan tag penutup yang sesuai (</p>), kecuali untuk elemen self-closing seperti <img> atau <br>. Kesalahan dalam penutupan tag adalah kesalahan paling umum yang dihadapi pemula.
Setelah Anda nyaman dengan struktur dasar ini, langkah selanjutnya adalah mengintegrasikan CSS (Cascading Style Sheets) untuk memperindah tampilan, dan JavaScript untuk menambahkan interaktivitas. Namun, ingatlah pepatah lama: Tanpa fondasi HTML yang kuat, rumah web Anda akan mudah runtuh. Jadi, fokuslah menancapkan pemahaman tentang struktur markup ini sedalam mungkin.