Selamat datang di dunia pengembangan web! Jika Anda baru memulai, mempelajari HTML (HyperText Markup Language) adalah langkah pertama yang paling fundamental dan krusial. HTML bukanlah bahasa pemrograman; melainkan bahasa markup yang digunakan untuk menyusun struktur konten di halaman web. Anggap saja HTML sebagai kerangka tulang belulang sebuah bangunan, yang menentukan di mana letak dinding, jendela, dan pintu.
Setiap situs web yang Anda kunjungi, mulai dari mesin pencari hingga media sosial, semuanya dibangun di atas fondasi HTML. HTML mendefinisikan elemen-elemen seperti paragraf (<p>), judul (<h1> sampai <h6>), tautan (<a>), dan gambar (<img>). Tanpa HTML, web hanyalah teks tanpa format.
Alasan utama mengapa Anda harus memprioritaskan html belajar adalah karena ini adalah gerbang menuju CSS (untuk gaya visual) dan JavaScript (untuk interaktivitas). Tidak ada yang bisa dilewati. Memahami bagaimana menandai konten dengan benar adalah keterampilan dasar yang harus dikuasai setiap developer front-end, bahkan mereka yang fokus pada back-end pun perlu mengerti struktur dasar ini.
Setiap dokumen HTML yang valid harus mengikuti struktur dasar tertentu. Struktur ini memastikan browser dapat menginterpretasikan konten Anda dengan benar. Mari kita lihat tiga komponen inti:
<!DOCTYPE html>: Deklarasi ini wajib ada di baris pertama. Ini memberitahu browser bahwa dokumen ini adalah HTML5.<html>: Elemen akar yang membungkus seluruh konten halaman.<head>: Berisi metadata tentang dokumen, seperti judul halaman (yang muncul di tab browser) dan tautan ke file CSS. Konten di sini tidak terlihat langsung di halaman utama.<body>: Inilah bagian yang berisi semua konten yang akan dilihat pengguna—teks, gambar, tabel, dll.Contoh sederhana dari struktur ini terlihat seperti ini:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Halaman Saya</title>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>Ini paragraf pertama saya.</p>
</body>
</html>
HTML bekerja menggunakan 'tag'. Tag biasanya muncul berpasangan: tag pembuka (misalnya <p>) dan tag penutup (</p>). Konten ditempatkan di antara kedua tag tersebut.
Selain tag, ada juga 'atribut'. Atribut memberikan informasi tambahan tentang elemen HTML dan selalu ditempatkan di tag pembuka. Atribut ditulis sebagai pasangan nama="nilai". Contoh paling umum adalah atribut href pada tag tautan (<a href="url">Teks Link</a>) atau atribut src pada tag gambar (<img src="gambar.jpg" alt="Deskripsi Gambar">).
Seiring perkembangan web, kita bergerak dari sekadar menggunakan tag seperti <div> untuk segala hal menjadi menggunakan tag semantik. Tag semantik adalah tag yang jelas menggambarkan jenis konten yang dikandungnya. Contoh tag semantik meliputi:
<header>: Untuk bagian pengantar atau navigasi utama.<main>: Untuk konten utama halaman.<article> atau <section>: Untuk mengelompokkan konten terkait.<footer>: Untuk informasi akhir halaman seperti hak cipta atau kontak.Menggunakan struktur semantik sangat penting tidak hanya untuk keterbacaan kode oleh developer lain, tetapi juga krusial untuk aksesibilitas (membantu pengguna pembaca layar) dan optimasi mesin pencari (SEO). Mesin pencari lebih mudah memahami hierarki konten Anda jika Anda menggunakan tag yang tepat.
Setelah Anda nyaman membuat struktur dasar dan menggunakan tag-tag umum, langkah selanjutnya dalam perjalanan html belajar Anda adalah mengintegrasikan teknologi pendukung. Fokuskan waktu Anda untuk menguasai:
HTML adalah fondasi yang akan selalu Anda gunakan. Dengan dedikasi untuk memahami strukturnya hari ini, Anda telah meletakkan batu pertama yang kokoh untuk karir pengembangan web yang sukses di masa depan. Teruslah berlatih dan bereksperimen!