Step 1 - Cara Berpikir HTML Seperti Arsitek

Belajar fondasi HTML dengan cara pikir arsitek: struktur dulu, gaya belakangan, interaksi terakhir.

Kalau HTML dianggap sekadar kumpulan tag, belajar akan terasa berat. Tapi kalau dianggap sebagai blueprint bangunan digital, semuanya jadi masuk akal dalam sekali baca.

Kenapa cara pikir ini penting

Kebanyakan pemula langsung lompat ke styling. Akibatnya layout terlihat bagus sebentar, tapi berantakan saat konten berubah. HTML yang tepat membuat halaman:

• lebih mudah dibaca manusia dan mesin
• lebih cepat dirawat saat proyek membesar
• lebih kuat untuk SEO dan aksesibilitas

Step praktik

Step 1: Tentukan tujuan halaman dalam 1 kalimat

Contoh: “Halaman ini menjelaskan layanan, menunjukkan bukti, lalu mengajak user kontak.”
Kalimat ini akan menentukan blok HTML utama.

Step 2: Pecah jadi blok semantik

Gunakan pembagian:

• header untuk identitas dan navigasi
• main untuk isi utama
• section untuk kelompok konten
• aside untuk konteks tambahan
• footer untuk penutup

Step 3: Buat kerangka tanpa CSS dulu

<header>
  <h1>Jasa Landing Page UMKM</h1>
  <nav aria-label="Navigasi utama">
    <a href="#layanan">Layanan</a>
    <a href="#bukti">Bukti</a>
    <a href="#kontak">Kontak</a>
  </nav>
</header>

<main>
  <section id="layanan">
    <h2>Layanan</h2>
    <p>Kami bantu UMKM punya halaman jualan yang cepat dan jelas.</p>
  </section>

  <section id="bukti">
    <h2>Bukti</h2>
    <p>30+ klien, rata-rata konversi naik 18%.</p>
  </section>
</main>

<footer id="kontak">
  <h2>Kontak</h2>
  <p>Halo@contoh.com</p>
</footer>

Step 4: Uji dengan pertanyaan ini

• Kalau CSS dimatikan, apakah konten masih bisa dipahami?
• Apakah urutan heading logis (h1 -> h2 -> h3)?
• Apakah link sudah jelas tujuannya?

Studi kasus nyata

Kasus: Halaman promo kelas online

Masalah awal: semua elemen pakai div, CTA tenggelam, user bingung alur baca.
Solusi: ubah ke struktur semantik + heading berurutan + CTA ditempatkan di akhir section nilai.

Hasil yang biasanya muncul:

• waktu baca lebih fokus karena alur jelas
• section penting lebih mudah dipindai
• edit konten jadi cepat karena struktur rapi

Checklist latihan

• Tulis 1 kalimat tujuan halamanmu
• Bagi konten ke 3 section utama
• Tulis kerangka HTML semantik tanpa CSS
• Pastikan hanya ada 1 h1
• Uji halaman dengan CSS off

Checklist mengingat

• HTML adalah struktur, bukan dekorasi
• main hanya satu per halaman
• Heading harus berurutan
• Link harus bermakna tanpa konteks tambahan

Mini proyek

Buat halaman profil jasa freelance 1 file HTML berisi:

• header + nav
• 3 section (Tentang, Layanan, Testimoni)
• footer kontak

Target selesai: 30 menit, tanpa CSS dulu.

Progress belajar

Progress belajar topik HTML: 20%