Proyek Mini: Halaman Artikel

Kenapa Halaman Penuh Itu Ujian Sesungguhnya

Sampai modul ini kamu memegang semua keping HTML: teks, link, gambar, audio, video, tabel, formulir, semantik, dan meta SEO. Tapi keping yang terpisah belum membuktikan apa-apa. Halaman artikel ini adalah ujian sesungguhnya: bisakah kamu merangkai semuanya menjadi satu halaman yang utuh, valid, dan siap publish?

Halaman artikel adalah proyek penutup karena memakai hampir semua yang kamu pelajari: semantik lengkap (header, nav, main, article, aside, footer), media (figure), SEO (title, meta description, Open Graph), dan entity karakter.

Langkah demi Langkah

Langkah 1: Kepala dokumen dan SEO. Di dalam head, pasang meta charset, title yang deskriptif dengan format "Judul Artikel | Nama Blog", meta name="description" berisi ringkasan satu sampai dua kalimat, dan meta property="og:title" supaya tautan artikelmu tampil cantik saat dibagikan di media sosial.

Langkah 2: header dan navigasi. header berisi identitas situs: h1 nama blog dan nav berisi link Beranda, Tentang, kategori. Ingat: h1 hanya satu per halaman, dan di sini ia milik nama situs, bukan judul artikel.

Langkah 3: main berisi article dan aside. Di dalam main, article menampung konten utama: h2 judul artikel, paragraf pembuka, figure berisi img plus figcaption, lalu h3 untuk sub bagian. aside-nya berisi info pendukung seperti "Tentang Penulis".

Langkah 4: Media dan entity karakter. Gambar artikel wajib punya alt deskriptif, width dan height, serta figcaption yang melengkapi. Di footer, tulis hak cipta dengan entity © supaya simbol copyright tampil benar tanpa masalah encoding.

Langkah 5: Validasi mandiri sebelum selesai. Baca ulang halamanmu dan cek: heading berurutan tanpa loncat level, setiap gambar punya alt bermakna, dan meta description terisi.

Kode Kerangka

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Judul Artikel | Blogku</title>
  <meta name="description" content="..." />
</head>
<body>
  <header>
    <h1>Blogku</h1>
    <nav><!-- link navigasi --></nav>
  </header>
  <main>
    <article>
      <!-- judul, paragraf, dan gambar artikel -->
    </article>
    <aside>
      <!-- tentang penulis -->
    </aside>
  </main>
  <footer>
    <!-- hak cipta -->
  </footer>
</body>
</html>

Kode Hasil

Contoh artikel "Resep Kopi Tubruk" yang sudah lengkap dan siap publish:

<main>
  <article>
    <h2>Resep Kopi Tubruk</h2>
    <p>Kopi tubruk adalah metode seduh paling sederhana...</p>
    <figure>
      <img src="https://picsum.photos/seed/kopi/800/450"
           alt="Bubuk kopi dan air panas dalam gelas kaca"
           width="800" height="450" />
      <figcaption>Bubuk kopi segar sebelum diseduh.</figcaption>
    </figure>
    <h3>Takaran</h3>
    <p>Perbandingan 1:15 antara kopi dan air...</p>
    <h3>Langkah Seduh</h3>
    <p>Tuang air panas, aduk perlahan, tunggu empat menit...</p>
  </article>
  <aside>
    <h2>Tentang Penulis</h2>
    <p>Barista dan penulis kuliner.</p>
  </aside>
</main>
<footer>
  <p>&copy; 2026 Blogku</p>
</footer>

Perhatikan heading yang tertib, figure lengkap dengan alt dan caption, serta entity © di footer.

Jebakan Umum

Salah: memakai dua h1, satu untuk nama blog dan satu untuk judul artikel. Mesin pencari jadi bingung mana judul utama halaman. Benar: satu h1 untuk nama situs, judul artikel h2, sub bagian h3.

Salah: menulis simbol copyright hasil copy paste langsung. Di file dengan encoding yang salah, karakter itu bisa tampil sebagai simbol rusak. Benar: selalu tulis entity © di dalam HTML.

Salah: meta Open Graph dipasang tapi title halaman dibiarkan "Document". Tautan yang dibagikan tampil tanpa judul jelas dan terlihat tidak profesional. Benar: isi title, description, dan og:title secara deskriptif.

Salah: menaruh article di luar main atau menaruh navigasi di dalam article. Benar: urutannya header, main berisi article dan aside, lalu footer, dengan navigasi selalu di dalam header.

Catatan teknis: Selamat, kamu menyelesaikan 45 modul HTML. Di seri CSS berikutnya, halaman-halaman seperti ini akan kamu sulap menjadi tampil memukau. Fondasinya sudah benar, sekarang tinggal polesannya.