Panduan Lengkap HTML Dasar: Langkah Pertama Menjadi Web Developer

Apakah Anda pernah bertanya-tanya bagaimana sebuah halaman web dibentuk? Ketika Anda membuka browser dan mengunjungi situs berita, media sosial, atau toko online, semua tampilan visual tersebut berdiri di atas satu fondasi utama: HTML.

Artikel ini dirancang khusus bagi Anda yang ingin mempelajari HTML dari nol dengan cara yang mudah, praktis, dan profesional.

1. Apa Itu HTML?

HTML adalah singkatan dari HyperText Markup Language. HTML bukanlah bahasa pemrograman (programming language), melainkan bahasa markah (markup language) yang digunakan untuk menentukan struktur dan konten dari sebuah halaman web.

Untuk memudahkannya, bayangkan pembangunan sebuah rumah:

HTML adalah kerangka beton, dinding, pintu, dan jendelanya (struktur dasar).
CSS adalah cat dinding, dekorasi, dan tata letaknya (tampilan visual).
JavaScript adalah sistem kelistrikan dan perabotan otomatisnya (fungsi interaktif).

Tanpa HTML, Anda tidak bisa menampilkan teks, gambar, tombol, atau tautan di internet.

2. Anatomi Sebuah Tag HTML

Sebagian besar elemen HTML dibangun menggunakan tag pembuka dan tag penutup. Berikut adalah anatomi dasar penulisan tag HTML:

<p class="deskripsi">Hello, World!</p>

<p> : Tag pembuka (Opening Tag). Mengindikasikan awal dari sebuah elemen paragraf.
class="deskripsi" : Atribut (Attribute). Memberikan informasi tambahan pada elemen (biasanya digunakan untuk CSS/JS).
Hello, World! : Konten (Content). Teks atau teks bercampur elemen lain yang akan ditampilkan.
</p> : Tag penutup (Closing Tag). Mengindikasikan akhir dari elemen paragraf (ditandai dengan garismiring /).

3. Struktur Dasar Dokumen HTML

Setiap file HTML memiliki struktur standar yang wajib diikuti agar browser dapat membaca dan menampilkan halaman web dengan benar.

Berikut adalah kode dokumen HTML5 paling dasar:

<!DOCTYPE html>

<head>

<title>Halaman Web Pertama Saya</title>

</head>

<body>

<h1>Selamat Datang di Website Saya</h1>

<p>Ini adalah paragraf pertama yang saya buat menggunakan HTML dasar.</p>

</body>

</html>

Penjelasan Komponen Utama:

<!DOCTYPE html> : Memberitahu browser bahwa dokumen ini menggunakan standar HTML5 terbaru.
<html lang="id">> : Elemen utama (root) yang membungkus seluruh dokumen. Atribut lang="id" menunjukkan bahwa konten menggunakan bahasa Indonesia.
<head> : Berisi metadata (informasi tentang dokumen) yang tidak ditampilkan langsung di area layar browser, seperti judul halaman, set karakter, dan tautan ke file CSS.
<title> : Menentukan judul halaman yang muncul di tab browser.
<body> : Berisi semua konten visual yang dilihat oleh pengunjung web, seperti teks, gambar, video, dan tombol.

4. Elemen-Elemen Penting dalam HTML

Mari pelajari elemen-elemen yang paling sering digunakan dalam pembuatan situs web.

A. Judul (Heading)

HTML menyediakan 6 tingkatan judul, mulai dari <h1> (paling penting/terbesar) hingga <h6> (paling kecil).

<h1>Judul Utama Artikel (H1)</h1>

<h2>Sub-judul Bagian (H2)</h2>

<h3>Sub-bagian (H3)</h3>

Tips SEO: Gunakan hanya satu tag <h1> per halaman untuk menentukan topik utama halaman Anda.

B. Paragraf dan Teks Format

Untuk menampilkan teks biasa dan memberikan penekanan:

<p>Ini adalah teks paragraf biasa.</p>

<p>Anda bisa membuat teks menjadi <strong>tebal (bold)</strong> atau <em>miring (italic)</em>.</p>

C. Tautan (Hyperlink)

Tautan dibuat menggunakan tag <a> (anchor) dengan atribut href yang berisi alamat tujuan.

<a href="https://www.google.com" target="_blank">Buka Google di Tab Baru</a>

D. Menampilkan Gambar

Untuk menampilkan gambar, gunakan tag <img>. Tag ini termasuk self-closing tag (tidak memerlukan tag penutup).

src : Jalur/lokasi file gambar.
alt : Teks alternatif yang muncul jika gambar gagal dimuat (sangat penting untuk aksesibilitas dan SEO).

E. Daftar (List)

Terdapat dua jenis daftar utama dalam HTML:

Unordered List (<ul>) – Daftar menggunakan bullet points.
Ordered List (<ol>) – Daftar menggunakan angka/urutan.

<ul>

<li>JavaScript</li>

</ul>

<ol>

<li>Unduh Code Editor</li>

<li>Buat file index.html</li>

<li>Buka di browser</li>

</ol>

5. Membuat Form Sederhana

Formulir digunakan untuk menerima masukan (input) dari pengguna, seperti halaman login atau pendaftaran.

<label for="nama">Nama Lengkap:</label><br>

<label for="email">Alamat Email:</label><br>

<label for="pesan">Pesan:</label><br>

<button type="submit">Kirim Pesan</button>

</form>

6. Praktik Terbaik Penulisan HTML (Best Practices)

Untuk menghasilkan kode yang bersih dan profesional, terapkan kebiasaan berikut sejak awal:

Gunakan Indentasi yang Rapi: Selalu berikan jarak spasi/tab untuk elemen anak di dalam elemen induk.
Gunakan Huruf Kecil (Lowercase): Tulis tag dan atribut menggunakan huruf kecil (contoh: <p>, bukan <P>).
Selalu Isi Atribut alt pada Gambar: Membantu mesin pencari dan pengguna berkebutuhan khusus.
Gunakan HTML Semantik: Manfaatkan elemen seperti <header>, <nav>, <main>, <article>, dan <footer> alih-alih selalu menggunakan <div>.

Ringkasan

Memahami HTML adalah langkah mendasar dan wajib bagi siapa saja yang ingin mendalami dunia pemprograman web. Dengan menguasai struktur dasar, tag teks, link, gambar, dan form, Anda sudah memiliki modal yang cukup untuk membangun struktur halaman web sederhana.

Langkah Selanjutnya: Cobalah membuat sebuah file bernama index.html di komputer Anda, salin contoh kode di atas, lalu buka file tersebut dengan browser pilihan Anda! Setelah lancar dengan HTML, Anda siap untuk melangkah ke tahap berikutnya: mempercantik halaman dengan CSS.