Proyek HTML: Membuat Rangka Wireframe Portal Berita
Dalam alur kerja profesional, sebelum menyentuh CSS atau JavaScript, seorang developer harus memastikan struktur HTML-nya kokoh. Wireframe HTML adalah cetak biru digital yang mendefinisikan letak elemen-elemen kunci tanpa terdistraksi oleh desain visual.
Untuk proyek portal berita seperti SatuMedia, kita akan menggunakan elemen semantik agar mesin pencari (SEO) dan pembaca layar (Screen Reader / A11y) dapat memahami hierarki informasi dengan mudah.
1. Anatomi Struktur Portal Berita
Portal berita yang baik umumnya memiliki empat bagian utama:
-
Header (
<header>): Berisi logo, navigasi utama (<nav>), dan kolom pencarian. -
Main Content (
<main>): Inti halaman yang berisi berita utama (Headline) di dalam<article>, dan daftar berita terbaru di dalam<section>. -
Sidebar (
<aside>): Bagian pelengkap yang berisi kategori populer, berita trending, dan slot iklan (MGID/AdSense). -
Footer (
<footer>): Berisi link internal, kebijakan privasi, dan informasi hak cipta.
2. Tutorial: Implementasi Kode Wireframe
Mari kita buat kerangka dasar untuk halaman depan portal berita. Perhatikan penggunaan tag semantik yang secara jelas memisahkan setiap area fungsional halaman.
<!DOCTYPE html>
<html lang="id">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SatuMedia - Portal Berita Terpercaya</title>
</head>
<body> <header> <h1>SatuMedia</h1> <nav> <ul> <li><a href="#">Nasional</a></li> <li><a href="#">Teknologi</a></li> <li><a href="#">Ekonomi</a></li> </ul> </nav> <form action="/search" method="GET"> <label for="search">Cari Berita:</label> <input type="text" id="search" name="q" placeholder="Masukkan kata kunci..."> <button type="submit">Cari</button> </form> </header> <hr> <div class="layout-wrapper"> <main> <article> <header> <h2>Inovasi MacBook M4: Revolusi Performa Developer</h2> <p><time datetime="2026-04-21">Dipublikasikan pada: 21 April 2026</time></p> </header> <p>Performa chip M4 memberikan lompatan besar bagi para backend developer yang menggunakan Laravel...</p> <a href="/berita/macbook-m4">Baca Selengkapnya »</a> </article> <section> <h3>Berita Terbaru</h3> <ul> <li> <article> <h4><a href="#">Update Laravel 11: Fitur Baru yang Wajib Dicoba</a></h4> </article> </li> <li> <article> <h4><a href="#">Tips Mengamankan API dengan Middleware</a></h4> </article> </li> </ul> </section> </main> <aside> <section> <h3>Trending Saat Ini</h3> <ol> <li><a href="#">Hasil Pertandingan Bola Tadi Malam</a></li> <li><a href="#">Kurs Rupiah Hari Ini Melonjak</a></li> </ol> </section> <section> <h4>Sponsor</h4> <div class="ad-slot"> <p>[ Slot Iklan MGID / AdSense ]</p> </div> </section> </aside> </div> <hr> <footer> <p>© 2026 SatuMedia. Seluruh Hak Cipta Dilindungi.</p> <nav> <ul> <li><a href="/tentang-kami">Tentang Kami</a></li> <li><a href="/privasi">Kebijakan Privasi</a></li> <li><a href="/kontak">Hubungi Redaksi</a></li> </ul> </nav> </footer> </body>
</html>
Tips Profesional untuk Developer
-
Gunakan Tag
<time>: Pada wireframe di atas, perhatikan penggunaan<time datetime="2026-04-21">. Ini adalah cara semantik untuk memberi tahu Google secara pasti kapan sebuah berita diterbitkan. -
Elemen
<form>: Pastikan kolom pencarian selalu dibungkus menggunakan<form>dengan method yang sesuai (biasanyaGETuntuk pencarian) agar berfungsi normal saat divalidasi. -
Kerangka yang Bersih: Pada tahap ini, jangan khawatir jika tampilan di browser terlihat polos dengan teks hitam-putih yang berderet ke bawah. Wireframe HTML difokuskan 100% pada struktur data. Tata letak (layout) kiri-kanan nantinya akan diurus menggunakan CSS Flexbox atau Grid.
