Step 2 - Layout HTML Untuk Konten Nyata

Menyusun layout HTML yang tahan perubahan konten, bukan layout cantik sesaat.

Di step ini kita masuk ke layout yang dipakai di kondisi nyata: konten berubah-ubah, judul panjang, gambar kadang tidak ada.

Prinsip anti-mainstream

Bukan “bagaimana bikin bagus”, tapi “bagaimana tetap waras saat konten berubah”.

Step praktik

Step 1: Definisikan blok konten yang bisa tumbuh

Misalnya artikel punya blok:

• hero
• isi inti
• referensi
• CTA lanjut

Step 2: Buat kerangka yang robust

<article>
  <header>
    <p>Kategori: Tutorial</p>
    <h1>Belajar HTML Untuk diterapkan</h1>
    <p>Ringkasan pendek agar pembaca tahu nilai artikelnya.</p>
  </header>

  <section>
    <h2>Masalah yang sering terjadi</h2>
    <p>Konten panjang tapi struktur tidak jelas.</p>
  </section>

  <section>
    <h2>Solusi langkah demi langkah</h2>
    <ol>
      <li>Atur heading</li>
      <li>Kelompokkan paragraf</li>
      <li>Tambahkan daftar aksi</li>
    </ol>
  </section>

  <footer>
    <h2>Langkah berikutnya</h2>
    <a href="/docs/css/css-dasar">Lanjut ke CSS Dasar</a>
  </footer>
</article>

Step 3: Sisipkan pola list untuk aksi

List bukan ornamen. List mempercepat user mengeksekusi ide.

Step 4: Pastikan alur baca menurun

Urutan harus menjawab:

1. ini apa
2. kenapa penting
3. gimana caranya
4. apa aksi lanjutannya

Studi kasus nyata

Kasus: Dokumentasi onboarding tim

Sebelumnya: satu halaman penuh paragraf tanpa anchor.
Sesudahnya: section jelas + list langkah + footer aksi lanjut.

Efek di tim:

• anggota baru lebih cepat paham
• pertanyaan berulang berkurang
• update dokumen lebih gampang

Checklist latihan

• Ubah 1 konten panjang jadi 4 section jelas
• Tambahkan 1 ordered list untuk langkah kerja
• Tambahkan 1 CTA lanjut di footer artikel
• Cek apakah alur baca sudah menjawab 4 pertanyaan utama

Checklist mengingat

• Layout kuat harus tahan perubahan konten
• Struktur menang dari style
• Setiap section harus punya tujuan
• Footer bukan formalitas, tapi arah lanjut

Mini proyek

Bangun 1 artikel dokumentasi internal tim berisi:

• masalah
• solusi langkah
• checklist implementasi
• link langkah berikutnya

Target: pembaca bisa eksekusi tanpa tanya balik.

Progress belajar

Progress belajar topik HTML: 40%