MODUL 02 · STRUKTUR

HTML — Kerangka Halaman Dasar Web

HTML adalah "tulang" dari setiap website yang pernah kamu kunjungi. Di modul ini kamu akan belajar menyusun struktur halaman: judul, paragraf, gambar, tautan, dan form.

1. Apa Itu HTML?

HTML (HyperText Markup Language) bukan bahasa pemrograman dalam arti sesungguhnya — ia adalah bahasa markup, yang berarti tugasnya adalah memberi "label" pada konten supaya browser tahu cara menampilkannya. Setiap label ini disebut tag.

Bayangkan kamu menulis surat dan memberi catatan di pinggirnya: "ini judul", "ini paragraf", "ini gambar". HTML melakukan hal yang sama, tapi catatannya dibaca oleh browser, bukan manusia.

2. Anatomi Sebuah Tag

Sebagian besar tag HTML datang berpasangan: tag pembuka dan tag penutup, dengan konten di antaranya.

<p>Ini adalah sebuah paragraf.</p>

<p> adalah tag pembuka
Ini adalah sebuah paragraf. adalah konten/isi
</p> adalah tag penutup (perhatikan garis miring /)

Tag pembuka + konten + tag penutup ini secara bersama-sama disebut elemen. Beberapa tag tidak membutuhkan konten dan tidak punya tag penutup, contohnya <img> dan <br> — ini disebut tag kosong (void element).

3. Struktur Dasar Sebuah Halaman HTML

Setiap file HTML punya struktur kerangka yang sama:

<!DOCTYPE html>
<html>
<head>
  <title>Judul Halaman</title>
</head>
<body>
  <h1>Halo, Dunia!</h1>
  <p>Ini adalah halaman HTML pertamaku.</p>
</body>
</html>

Penjelasan Tiap Bagian

<!DOCTYPE html> — memberi tahu browser bahwa ini dokumen HTML5
<html> — pembungkus seluruh isi halaman
<head> — informasi tentang halaman (judul tab, metadata) yang tidak tampil di layar
<body> — semua konten yang benar-benar tampil di browser

4. Tag-Tag Dasar yang Wajib Diketahui

Heading (Judul)

HTML punya 6 level heading, dari <h1> (paling penting/besar) sampai <h6> (paling kecil).

<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Sub-sub Judul</h3>

Gunakan heading sesuai urutan tingkatannya — jangan lompat dari <h1> langsung ke <h4>, karena ini membingungkan struktur halaman (dan buruk untuk SEO).

Paragraf dan Teks

<p>Ini adalah paragraf biasa.</p>
<strong>Teks tebal</strong>
<em>Teks miring</em>
<br> <!-- baris baru -->

List (Daftar)

Ada dua jenis list: berurutan (numbered) dan tidak berurutan (bullet).

<ul>
  <li>Kopi</li>
  <li>Teh</li>
</ul>

<ol>
  <li>Bangun tidur</li>
  <li>Mandi</li>
</ol>

<ul> = unordered list (bullet •), <ol> = ordered list (angka 1, 2, 3), dan <li> = list item, dipakai di dalam kedua jenis list tersebut.

Tautan (Link)

<a href="https://google.com">Kunjungi Google</a>

Atribut href menentukan ke mana link itu mengarah. Tag <a> bisa membungkus teks atau bahkan gambar.

Gambar

<img src="kucing.jpg" alt="Kucing oranye tidur di sofa">

Jangan Lupa

Atribut alt wajib diisi — ini teks alternatif yang muncul kalau gambar gagal dimuat, dan juga dibaca oleh pembaca layar (screen reader) untuk pengguna tunanetra. Ini bukan opsional, ini bagian dari aksesibilitas web yang baik.

Form (Formulir)

<form>
  <label for="nama">Nama:</label>
  <input type="text" id="nama" name="nama">
  <button type="submit">Kirim</button>
</form>

Form adalah cara utama website mengumpulkan input dari pengguna — mulai dari kolom pencarian, formulir login, sampai keranjang belanja.

5. Referensi Cepat Tag Umum

Tag	Fungsi
`<h1>–<h6>`	Heading/judul, dari paling besar ke paling kecil
`<p>`	Paragraf teks
`<a>`	Tautan/link
`<img>`	Gambar
`<ul>/<ol>/<li>`	Daftar (bullet/angka) dan itemnya
`<div>`	Kontainer serbaguna untuk mengelompokkan elemen
`<span>`	Kontainer kecil untuk sebagian teks dalam satu baris
`<form>`	Formulir input
`<button>`	Tombol yang bisa diklik

6. div dan span: Si Kontainer Serbaguna

Dua tag ini tidak punya makna visual sendiri, tapi sangat penting untuk mengelompokkan elemen lain — terutama saat kamu mulai mengatur tampilan dengan CSS di modul berikutnya.

<div>
  <h2>Judul Kartu</h2>
  <p>Isi kartu di sini.</p>
</div>

<div> mengelompokkan elemen sebagai blok (biasanya melebar penuh), sementara <span> mengelompokkan teks dalam satu baris, misalnya untuk mewarnai sebagian kata saja.

7. Latihan Pemahaman

Soal 1: Apa perbedaan antara <ul> dan <ol>?

Jawaban: <ul> menghasilkan daftar dengan bullet (tidak berurutan), sedangkan <ol> menghasilkan daftar bernomor (berurutan/ordered).

Soal 2: Mengapa atribut alt pada tag <img> penting?

Jawaban: alt menyediakan teks alternatif jika gambar gagal dimuat, dan dibutuhkan oleh pembaca layar untuk membantu pengguna tunanetra memahami isi gambar.

Soal 3: Tulis kode HTML untuk membuat sebuah link ke "https://contoh.com" dengan teks "Kunjungi Situs"

Jawaban: <a href="https://contoh.com">Kunjungi Situs</a>

Rangkuman Modul Ini

HTML memberi struktur pada konten halaman lewat tag dan elemen.
Setiap halaman HTML punya kerangka dasar: doctype, html, head, body.
Heading, paragraf, list, link, gambar, dan form adalah elemen paling sering dipakai.
div dan span adalah kontainer serbaguna untuk pengelompokan, terutama untuk styling nanti.

Sekarang halaman HTML-mu sudah punya struktur, tapi tampilannya masih polos hitam-putih khas browser. Di modul selanjutnya, kamu akan belajar CSS untuk memberi warna, jarak, dan tata letak yang enak dilihat.