Panduan Lengkap Belajar Membuat HTML dari Dasar

HTML (HyperText Markup Language) adalah tulang punggung dari setiap halaman web. Tanpa HTML, internet yang kita kenal hari ini tidak akan ada. Memahami dasar-dasar HTML adalah langkah pertama dan paling krusial bagi siapa pun yang ingin terjun ke dunia pengembangan web, baik itu untuk membuat blog sederhana, landing page, maupun aplikasi web kompleks.

Artikel ini dirancang untuk memberikan pemahaman yang solid tentang struktur dasar HTML, cara kerjanya, serta elemen-elemen penting yang wajib Anda kuasai.

Simbol Struktur Dasar HTML HTML <html> </html> Struktur Utama

Apa Itu HTML dan Mengapa Penting?

HTML adalah bahasa markup standar untuk membuat dan menyajikan konten di World Wide Web. Kata "markup" berarti HTML menggunakan serangkaian "tag" untuk mendefinisikan struktur dan makna bagian-bagian konten—misalnya, ini adalah paragraf, ini adalah judul, dan ini adalah tautan.

Pentingnya HTML terletak pada perannya sebagai fondasi. Semua halaman web, sekaya apa pun konten visualnya (CSS) atau interaktivitasnya (JavaScript), harus dimulai dengan struktur HTML yang valid. Tanpa struktur ini, peramban (browser) tidak tahu bagaimana menampilkan informasi kepada pengguna.

Struktur Dasar Dokumen HTML

Setiap dokumen HTML harus mengikuti struktur dasar yang baku agar dapat dikenali dengan benar oleh peramban. Struktur ini memastikan aksesibilitas dan perilaku yang konsisten.

Berikut adalah kerangka minimal yang harus Anda miliki:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Halaman Saya</title>
</head>
<body>
    <!-- Konten yang terlihat oleh pengguna di sini -->
    <h1>Selamat Datang</h1>
    <p>Ini adalah paragraf pertama.</p>
</body>
</html>
Kunci Pemahaman: Tag <head> berisi metadata (informasi tentang halaman, tidak terlihat langsung), sedangkan tag <body> berisi semua konten visual yang akan dilihat pengguna.

Mengenal Tag Paling Umum

HTML dibangun dari elemen yang terdiri dari tag pembuka, konten, dan tag penutup (kecuali elemen kosong seperti <br>).

1. Judul (Headings)

Digunakan untuk menandai hierarki judul, dari yang paling penting (h1) hingga yang kurang penting (h6).

<h1>Judul Utama Halaman (Hanya boleh satu per halaman)</h1>
<h2>Sub Judul Bagian</h2>
<h3>Judul Topik Lebih Kecil</h3>

2. Paragraf dan Teks

Tag <p> digunakan untuk mendefinisikan paragraf teks standar.

<p>Ini adalah teks paragraf biasa.</p>
<strong>Teks ini penting (bold)</strong> atau <b>teks tebal</b>.
<em>Teks ini penekanan (miring)</em> atau <i>teks miring</i>.

3. Tautan (Links)

Tautan adalah elemen inti web yang memungkinkan navigasi antar halaman. Ini menggunakan atribut href.

<a href="https://www.contohwebsite.com">Kunjungi Contoh Website</a>

4. Gambar (Images)

Tag gambar <img> adalah elemen kosong (self-closing). Ia membutuhkan atribut src (sumber gambar) dan alt (teks alternatif).

<img src="gambar/logo.png" alt="Logo perusahaan kami yang keren" width="200">

Memahami Atribut

Atribut memberikan informasi tambahan tentang elemen HTML. Atribut selalu diletakkan di dalam tag pembuka dan biasanya muncul sebagai pasangan nama="nilai". Contoh yang sudah kita lihat adalah lang="id" pada tag <html>, href pada tag <a>, dan src pada tag <img>.

Atribut sangat penting untuk fungsionalitas. Tanpa atribut alt pada gambar, pembaca layar (screen reader) tidak dapat mendeskripsikan gambar tersebut kepada pengguna tunanetra. Ini adalah praktik terbaik dalam pengembangan web modern.

Langkah Selanjutnya: CSS dan JavaScript

Setelah Anda menguasai struktur dasar HTML, Anda siap untuk meningkatkan tampilan dan fungsionalitas halaman Anda. HTML mengatur struktur, CSS mengatur presentasi (warna, tata letak, font), dan JavaScript mengatur perilaku (interaksi dinamis).

Mulailah dengan membuat satu file HTML, dan coba ubah struktur di dalamnya. Praktik langsung adalah cara tercepat untuk memahami bagaimana setiap tag memengaruhi dokumen akhir. Selamat belajar membuat HTML!

Related Posts