Cara Membuat Struktur HTML untuk Website Berita: Header, Artikel, Sidebar, dan Footer
Daftar Isi
Website berita menuntut struktur informasi yang lebih kompleks daripada landing page. Landing page biasanya membawa pembaca melalui satu alur promosi, sedangkan halaman berita perlu membedakan identitas penerbit, navigasi kategori, artikel utama, metadata publikasi, isi berita, informasi penulis, konten terkait, sidebar, dan footer. Pada tutorial ini kita akan membuat halaman artikel untuk situs berita fiktif bernama Kabar Kota dengan HTML semantik dan CSS native. Fokus utamanya bukan sistem editorial, database, komentar, atau pengambilan data secara dinamis, melainkan struktur dokumen yang dapat menjadi fondasi untuk tahap tersebut. Contoh menggunakan elemen seperti header, nav, main, article, aside, section, time, figure, dan footer sesuai fungsi kontennya. Hasil akhir berupa satu file index.html yang dapat dibuka langsung di browser modern dan tidak membutuhkan framework, package manager, JavaScript, atau koneksi ke server.
Pembaca diasumsikan sudah memahami semantik HTML dan pernah membangun landing page, sehingga pembahasan bergerak selangkah lebih jauh: bagaimana landmark tingkat halaman berbeda dari bagian internal artikel, kapan memakai article atau aside, bagaimana menghubungkan label tanggal yang dibaca manusia dengan nilai mesin melalui atribut datetime, serta bagaimana membuat dua kolom yang kembali menjadi satu kolom pada layar sempit. Untuk menjaga proyek sepenuhnya reproduktif, foto berita diganti dengan figure berisi panel ilustrasi CSS sehingga tidak ada file gambar yang perlu diunduh. Seluruh isi berita, nama, dan penerbit adalah contoh fiktif untuk pembelajaran. Enam langkah berikut membangun file secara bertahap, kemudian menyediakan versi lengkap yang bisa dibandingkan dengan pekerjaan Anda. Struktur tersebut sengaja memisahkan keputusan semantik dari presentasi agar halaman tetap mempunyai urutan baca yang masuk akal ketika CSS tidak dimuat.
Landasan Sains dan Prinsip Kerja Metode
HTML menyatakan struktur dan makna dokumen; CSS mengontrol presentasi visual. Prinsip ini penting pada halaman berita karena sebuah layar dapat memperlihatkan banyak kotak yang secara visual serupa tetapi mempunyai peran berbeda. header tingkat halaman menampung identitas situs dan navigasi, sementara main menandai konten utama dokumen. Di dalamnya, article cocok untuk berita utama karena kontennya merupakan komposisi mandiri yang dapat dipahami sebagai satu unit. Sebuah header lain dapat digunakan di dalam article untuk judul dan metadata artikel; penggunaan header tidak terbatas pada satu kali per dokumen. Sebaliknya, main pada praktik halaman biasa sebaiknya mewakili satu konten utama yang unik, bukan diulang pada setiap kartu. Dengan memodelkan hubungan konten terlebih dahulu, kita tidak perlu memilih tag berdasarkan bentuk kotak atau posisi kolom semata.
Sidebar sering menimbulkan salah paham karena nama “side” terdengar seperti instruksi posisi visual. Elemen aside sebenarnya menyatakan konten yang berhubungan secara tidak langsung atau bersifat tangensial terhadap konten di sekitarnya; posisinya dapat berada di kanan, kiri, atau bahkan di bawah pada viewport sempit. Dalam proyek ini aside memuat daftar artikel terpopuler dan ringkasan redaksi, sehingga konten utama masih masuk akal jika sidebar dihilangkan. CSS Grid kemudian menempatkan article dan aside menjadi dua kolom hanya saat ruang layar cukup. Ini memisahkan semantik dari layout: perubahan dari dua kolom desktop ke satu kolom ponsel tidak mengharuskan kita mengubah HTML. Prinsip serupa berlaku untuk footer. footer tingkat halaman memuat informasi penerbit dan navigasi tambahan, sedangkan footer di dalam artikel dapat dipakai untuk informasi yang berkaitan dengan artikel, seperti identitas penulis.
Metadata juga mempunyai struktur, bukan sekadar teks dekoratif. Elemen time dapat membawa nilai tanggal/waktu yang dapat diproses mesin melalui datetime, sementara teks yang terlihat tetap dapat ditulis dalam format yang nyaman dibaca. Contohnya, pengguna melihat “30 September 2026, 09.30 WIB”, sedangkan atributnya dapat berisi 2026-09-30T09:30:00+07:00. Nilai tersebut menyertakan offset UTC +07:00 yang sesuai dengan WIB. Untuk hierarki heading, halaman memiliki satu h1 sebagai judul artikel; bagian tambahan seperti “Berita terpopuler” menggunakan heading tingkat lebih rendah yang mencerminkan struktur konten. Kita juga tidak akan menggunakan heading sekadar untuk memperbesar teks. Ukuran visual diatur CSS. Pendekatan tersebut membuat struktur lebih mudah ditinjau melalui document outline secara konseptual, inspector browser, atau teknologi bantu tanpa bergantung pada bentuk visual akhirnya.
Formula, Komposisi Bahan, atau Spesifikasi Parameter
Spesifikasi berikut menjadi kontrak teknis proyek. Semua selector, elemen, dan ukuran yang disebut akan digunakan secara konsisten dalam index.html. Breakpoint 800 piksel dan lebar maksimum 1180 piksel merupakan keputusan desain tutorial, bukan standar HTML yang harus dipakai setiap situs berita. Tujuannya adalah menghasilkan baseline yang mudah diperiksa: dokumen memiliki landmark yang jelas, artikel dan sidebar dapat dibedakan secara semantik, metadata tanggal mempunyai representasi mesin, serta layout beradaptasi tanpa JavaScript. Dengan kontrak ini, debugging dapat dilakukan dengan mencocokkan struktur HTML terhadap selector CSS dan hasil browser.
| Komponen | Spesifikasi/Rasio | Fungsi Teknis |
|---|---|---|
| Dokumen | 1 file index.html | Menyimpan HTML dan CSS internal tanpa dependency eksternal. |
| Header situs | 1 header tingkat halaman | Memuat identitas Kabar Kota dan navigasi kategori. |
| Navigasi | 4 tautan internal | Menghubungkan navigasi dengan #utama, #kota, #teknologi, dan #ekonomi. |
| Main | 1 elemen main | Mewakili konten utama unik pada halaman artikel. |
| Artikel utama | 1 article dengan 1 h1 | Mengelompokkan judul, metadata, figure, isi, dan footer artikel. |
| Metadata waktu | time dengan datetime ber-offset +07:00 | Menyediakan waktu yang terbaca pengguna dan nilai terstruktur pada markup. |
| Sidebar | 1 aside | Menampung berita terpopuler dan informasi redaksi yang bersifat pendamping. |
| Layout konten | 1 kolom; 2fr 1fr mulai 800px | Menjaga urutan baca mobile dan menyediakan kolom sidebar pada layar lebar. |
| Container | max-width 1180px; padding efektif 20px | Membatasi panjang area halaman dan menjaga jarak dari tepi viewport. |
| Footer situs | 1 footer tingkat halaman | Menutup halaman dengan identitas penerbit dan navigasi tambahan. |
aside hanya karena suatu kotak ingin ditempatkan di sebelah kanan. Gunakan elemen tersebut bila isi memang bersifat pendamping atau tangensial. Posisi visual ditentukan CSS. Perhatikan juga bahwa atribut datetime harus mewakili tanggal/waktu yang dimaksud; jangan menyalin nilai contoh ke berita nyata tanpa menyesuaikan tanggal, jam, dan offset zona waktunya.Panduan Langkah Kerja Bertahap
Bangun Dokumen dan Header Situs
Buat folder proyek, misalnya kabar-kota, kemudian buat file index.html. Kita mulai dengan dokumen HTML5 mandiri, encoding UTF-8, metadata viewport, judul tab, serta header tingkat halaman. Navigasi menggunakan fragment URL agar dapat diuji tanpa membuat file kategori tambahan. Target #utama akan ditempatkan pada main, sedangkan tiga target kategori akan ditempatkan di bagian footer pada versi lengkap. Pada tahap pertama, tiga target terakhir memang belum dibuat; snippet ini merupakan bagian file yang sedang dibangun, bukan versi akhir.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kabar Kota - Transportasi Publik dan Ruang Kota</title>
</head>
<body>
<header class="site-header">
<div class="container header-row">
<a class="brand" href="#utama">Kabar Kota</a>
<nav aria-label="Navigasi utama">
<ul class="nav-list">
<li><a href="#kota">Kota</a></li>
<li><a href="#teknologi">Teknologi</a></li>
<li><a href="#ekonomi">Ekonomi</a></li>
</ul>
</nav>
</div>
</header>
<main class="container" id="utama">
<p>Konten artikel akan ditempatkan di sini.</p>
</main>
</body>
</html>Simpan file lalu buka index.html langsung dengan browser modern. Hasil yang diharapkan masih menggunakan style bawaan: nama Kabar Kota, tiga link kategori, dan teks sementara di dalam main. Klik brand Kabar Kota dan periksa address bar; fragment #utama harus muncul dan mengacu pada elemen main. Tiga link kategori belum mempunyai target pada tahap ini, sehingga jangan menganggapnya selesai. Gunakan inspector untuk memastikan terdapat satu main dan nav mempunyai label “Navigasi utama”. Setelah kerangka terverifikasi, teks sementara akan diganti dengan artikel pada langkah berikut. Metode bertahap ini memudahkan kita membedakan masalah struktur dokumen dari masalah CSS.
Susun Article, Judul, dan Metadata Publikasi
Ganti paragraf sementara dalam main dengan struktur article berikut. Header internal artikel memuat label rubrik, h1, ringkasan atau dek, serta metadata penulis dan waktu. Tidak ada konflik antara header situs dengan header artikel karena keduanya mempunyai konteks berbeda. Nama penulis dan isi berita adalah fiktif. Nilai datetime="2026-09-30T09:30:00+07:00" mewakili 30 September 2026 pukul 09.30 dengan offset UTC +07:00; teks “WIB” yang terlihat sesuai dengan offset tersebut untuk contoh ini.
<article class="news-article">
<header class="article-header">
<p class="category">Kota</p>
<h1>Koridor Transportasi Baru Mendorong Penataan Ruang Kota</h1>
<p class="lead">Pemerintah kota menyiapkan integrasi halte, jalur pejalan kaki, dan ruang publik di sepanjang koridor utama.</p>
<p class="article-meta">
Oleh <strong>Nadia Pratama</strong> ·
<time datetime="2026-09-30T09:30:00+07:00">30 September 2026, 09.30 WIB</time>
</p>
</header>
<div class="article-body">
<p>Kabar Kota — Rencana penataan koridor transportasi memasuki tahap konsultasi publik. Fokus awal berada pada hubungan antara halte, trotoar, dan fasilitas penyeberangan.</p>
</div>
</article>Simpan dan refresh browser. Expected result adalah artikel dengan label “Kota”, satu judul utama, ringkasan, identitas penulis, waktu publikasi, serta paragraf pembuka. Karena CSS belum ada, ukuran h1 mengikuti stylesheet bawaan browser. Gunakan DevTools Elements untuk memilih elemen time dan memastikan atribut datetime tetap lengkap, termasuk +07:00. Cari elemen h1 dan pastikan hanya satu yang digunakan untuk judul artikel dalam proyek ini. Jika header situs ikut berubah menjadi bagian artikel karena tag salah tertutup, periksa susunan tag mulai dari article, header, sampai div class="article-body". Struktur yang benar sekarang menjadi fondasi untuk figure dan isi panjang.
Lengkapi Isi Berita, Figure, dan Footer Artikel
Artikel berita membutuhkan tubuh konten yang dapat dibaca secara linear. Pada langkah ini, ganti article pendek dari langkah sebelumnya dengan versi berikut yang menambahkan figure, caption, subjudul, beberapa paragraf, dan footer penulis. Panel visual di dalam figure hanyalah ilustrasi CSS, bukan foto jurnalistik; role="img" dan aria-label memberikan nama bagi representasi visual tersebut. Untuk proyek nyata, Anda dapat menggantinya dengan elemen img dan teks alternatif yang sesuai dengan fungsi gambar. Footer di dalam article sengaja dipisahkan dari footer situs yang akan dibuat kemudian.
<article class="news-article">
<header class="article-header">
<p class="category">Kota</p>
<h1>Koridor Transportasi Baru Mendorong Penataan Ruang Kota</h1>
<p class="lead">Pemerintah kota menyiapkan integrasi halte, jalur pejalan kaki, dan ruang publik di sepanjang koridor utama.</p>
<p class="article-meta">
Oleh <strong>Nadia Pratama</strong> ·
<time datetime="2026-09-30T09:30:00+07:00">30 September 2026, 09.30 WIB</time>
</p>
</header>
<figure class="article-figure">
<div class="visual-placeholder" role="img" aria-label="Ilustrasi halte, bus, dan jalur pejalan kaki pada koridor kota">
Ilustrasi koridor transportasi
</div>
<figcaption>Ilustrasi untuk proyek pembelajaran; bukan foto peristiwa nyata.</figcaption>
</figure>
<div class="article-body">
<p>Kabar Kota — Rencana penataan koridor transportasi memasuki tahap konsultasi publik. Fokus awal berada pada hubungan antara halte, trotoar, dan fasilitas penyeberangan.</p>
<p>Tim perencana menempatkan akses pejalan kaki sebagai bagian dari perjalanan, bukan fasilitas terpisah. Evaluasi lapangan juga mencakup jarak perpindahan antarmoda dan titik penyeberangan.</p>
<h2>Integrasi ruang menjadi perhatian</h2>
<p>Area di sekitar halte dirancang agar fungsi transportasi tidak memutus akses menuju pertokoan dan fasilitas umum. Masukan warga akan digunakan untuk meninjau rancangan sebelum tahap berikutnya.</p>
<h2>Tahap konsultasi masih berlangsung</h2>
<p>Rencana yang dibahas belum menggambarkan hasil akhir pembangunan. Jadwal dan detail teknis dapat berubah setelah evaluasi dan proses pengambilan keputusan selesai.</p>
</div>
<footer class="article-footer">
<p><strong>Tentang penulis:Refresh halaman. Expected result adalah satu artikel utuh secara struktur, walaupun panel ilustrasi belum menarik karena CSS belum dipasang. Periksa bahwa figcaption berada di dalam figure dan dua subjudul isi menggunakan h2, bukan h1 tambahan. Baca halaman dari atas ke bawah tanpa memikirkan layout: judul, metadata, figure, isi, dan informasi penulis semestinya tetap logis. Inspector dapat digunakan untuk memastikan footer penulis benar-benar berada di dalam article. Jika bagian setelah figure tiba-tiba tampil sebagai caption atau bagian footer, kemungkinan ada tag penutup yang hilang; bandingkan hierarkinya dengan snippet sebelum mengubah CSS.
Tambahkan Sidebar dan Footer Tingkat Halaman
Sekarang kita membutuhkan pembungkus layout yang memuat artikel serta aside sebagai saudara. Ubah isi main sehingga artikel yang sudah dibuat ditempatkan dalam div class="content-grid", kemudian letakkan snippet aside berikut sesudah penutup article tetapi sebelum penutup content-grid. Setelah main, tambahkan footer situs. Tiga section kecil pada footer mendapat ID yang cocok dengan navigasi awal. Pada situs produksi, link kategori biasanya menuju URL halaman kategori; fragment dipakai di tutorial ini agar seluruh demonstrasi tetap berada dalam satu file.
<aside class="sidebar" aria-label="Konten tambahan">
<section class="sidebar-card">
<h2>Berita terpopuler</h2>
<ol>
<li><a href="#artikel-transportasi">Penataan koridor transportasi menjadi perhatian warga</a></li>
<li><a href="#teknologi">Layanan digital kota diperbarui</a></li>
<li><a href="#ekonomi">Pasar lokal menambah ruang usaha</a></li>
</ol>
</section>
<section class="sidebar-card">
<h2>Tentang redaksi</h2>
<p>Kabar Kota adalah penerbit fiktif yang digunakan untuk latihan struktur HTML.</p>
</section>
</aside><footer class="site-footer">
<div class="container footer-grid">
<div>
<strong>Kabar Kota</strong>
<p>Contoh website berita untuk pembelajaran HTML semantik.</p>
</div>
<nav aria-label="Navigasi footer">
<section id="kota">
<h2>Kota</h2>
<p><a href="#artikel-transportasi">Artikel transportasi</a></p>
</section>
<section id="teknologi">
<h2>Teknologi</h2>
<p>Kategori demonstrasi.</p>
</section>
<section id="ekonomi">
<h2>Ekonomi</h2>
<p>Kategori demonstrasi.</p>
</section>
</nav>
</div>
</footer>Agar tautan “Artikel transportasi” mempunyai target, tambahkan id="artikel-transportasi" pada elemen article, sehingga tag pembukanya menjadi <article class="news-article" id="artikel-transportasi"> pada source asli. Expected result setelah refresh adalah sidebar muncul setelah artikel karena CSS Grid belum diterapkan, kemudian footer situs berada paling bawah. Klik seluruh tautan navigasi dan periksa fragment pada address bar. #kota, #teknologi, #ekonomi, dan #artikel-transportasi sekarang harus mempunyai target nyata. Gunakan inspector untuk memastikan aside bukan anak dari article; keduanya harus menjadi saudara di dalam pembungkus content-grid. Pemeriksaan posisi DOM ini penting sebelum kita mengandalkan layout visual dua kolom.
Terapkan Layout Responsif dan Presentasi Berita
Tambahkan blok style berikut di dalam head, sesudah title. CSS dibuat mobile-first: content-grid pada dasarnya satu kolom, kemudian media query mulai 800 piksel membuat kolom artikel dan sidebar dengan rasio 2fr 1fr. Selector hanya menggunakan class yang sudah kita buat. max-width khusus article-body menahan panjang baris teks artikel, sedangkan container halaman tetap cukup luas untuk sidebar. Panel figure mendapatkan tinggi minimum dan warna gradien karena ia menggantikan kebutuhan aset gambar.
<style>
* { box-sizing: border-box; }
body {
margin: 0;
font-family: Georgia, "Times New Roman", serif;
color: #172033;
background: #ffffff;
line-height: 1.7;
}
a { color: #164e8a; }
a:focus-visible {
outline: 3px solid #f59e0b;
outline-offset: 3px;
}
.container {
width: min(100% - 40px, 1180px);
margin-inline: auto;
}
.site-header {
border-bottom: 1px solid #dce2ea;
background: #ffffff;
}
.header-row {
padding-block: 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.brand {
color: #9b1c1c;
font: 800 1.6rem/1 system-ui, sans-serif;
text-decoration: none;
}
.nav-list {
display: flex;
gap: 18px;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.nav-list a {
font-family: system-ui, sans-serif;
font-weight: 700;
text-decoration: none;
}
.content-grid {
display: grid;
gap: 40px;
padding-block: 48px;
}
.article-header h1 {
margin: 8px 0 16px;
font-size: clamp(2.1rem, 6vw, 4.2rem);
line-height: 1.05;
}
.category {
color: #9b1c1c;
font-family: system-ui, sans-serif;
font-weight: 800;
text-transform: uppercase;
}
.lead {
color: #3d4859;
font-size: 1.25rem;
}
.article-meta {
color: #5b6574;
font-family: system-ui, sans-serif;
font-size: 0.95rem;
}
.article-figure {
margin: 32px 0;
}
.visual-placeholder {
min-height: 320px;
padding: 24px;
display: grid;
place-items: center;
border-radius: 12px;
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
color: #164e8a;
font: 800 1.25rem/1.4 system-ui, sans-serif;
text-align: center;
}
figcaption {
margin-top: 8px;
color: #687386;
font-size: 0.9rem;
}
.article-body {
max-width: 72ch;
font-size: 1.08rem;
}
.article-body h2 {
margin-top: 32px;
line-height: 1.2;
}
.article-footer {
margin-top: 36px;
padding-top: 20px;
border-top: 1px solid #dce2ea;
}
.sidebar {
display: grid;
align-content: start;
gap: 20px;
}
.sidebar-card {
padding: 22px;
border: 1px solid #dce2ea;
border-radius: 12px;
background: #f8fafc;
}
.sidebar-card h2 {
margin-top: 0;
font: 800 1.2rem/1.3 system-ui, sans-serif;
}
.sidebar-card li + li { margin-top: 12px; }
.site-footer {
padding-block: 40px;
background: #172033;
color: #ffffff;
}
.site-footer a { color: #bfdbfe; }
.footer-grid {
display: grid;
gap: 28px;
}
.site-footer nav {
display: grid;
gap: 20px;
}
.site-footer h2 {
margin: 0;
font: 700 1rem/1.3 system-ui, sans-serif;
}
@media (min-width: 800px) {
.content-grid {
grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
}
.footer-grid {
grid-template-columns: 1fr 2fr;
}
.site-footer nav {
grid-template-columns: repeat(3, 1fr);
}
}
</style>Simpan dan refresh. Pada viewport di bawah 800 piksel, expected result adalah artikel, sidebar, lalu footer dalam aliran vertikal. Ketika viewport mencapai 800 piksel, artikel dan sidebar berubah menjadi dua kolom; footer juga membagi area identitas dan navigasi, sedangkan tiga kategori footer berjajar. Buka mode responsive design pada DevTools dan ubah lebar melintasi breakpoint untuk memverifikasi perubahan. Tekan Tab agar terlihat outline fokus pada link. Bila sidebar tetap berada di bawah pada desktop, inspect .content-grid dan pastikan artikel serta aside benar-benar anak langsungnya serta media query sedang aktif.
Satukan File Lengkap dan Lakukan Audit Struktur
Gunakan source berikut sebagai versi final index.html. File ini menggabungkan seluruh struktur dan CSS, sehingga dapat dipakai untuk membandingkan hasil tahap demi tahap. Tidak ada dependency eksternal, aset gambar, font web, atau JavaScript. Buka file secara langsung melalui browser; server lokal tidak diperlukan untuk fitur yang digunakan pada proyek ini. Isi editorial bersifat fiktif dan panel figure dinyatakan sebagai ilustrasi, sehingga ketika mengadaptasi proyek untuk penerbit nyata Anda perlu mengganti teks, atribusi, tanggal, dan aset dengan data yang sah.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kabar Kota - Transportasi Publik dan Ruang Kota</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; font-family: Georgia, "Times New Roman", serif; color: #172033; background: #ffffff; line-height: 1.7; }
a { color: #164e8a; }
a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
.container { width: min(100% - 40px, 1180px); margin-inline: auto; }
.site-header { border-bottom: 1px solid #dce2ea; background: #ffffff; }
.header-row { padding-block: 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.brand { color: #9b1c1c; font: 800 1.6rem/1 system-ui, sans-serif; text-decoration: none; }
.nav-list { display: flex; gap: 18px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.nav-list a { font-family: system-ui, sans-serif; font-weight: 700; text-decoration: none; }
.content-grid { display: grid; gap: 40px; padding-block: 48px; }
.article-header h1 { margin: 8px 0 16px; font-size: clamp(2.1rem, 6vw, 4.2rem); line-height: 1.05; }
.category { color: #9b1c1c; font-family: system-ui, sans-serif; font-weight: 800; text-transform: uppercase; }
.lead { color: #3d4859; font-size: 1.25rem; }
.article-meta { color: #5b6574; font-family: system-ui, sans-serif; font-size: 0.95rem; }
.article-figure { margin: 32px 0; }
.visual-placeholder { min-height: 320px; padding: 24px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #164e8a; font: 800 1.25rem/1.4 system-ui, sans-serif; text-align: center; }
figcaption { margin-top: 8px; color: #687386; font-size: 0.9rem; }
.article-body { max-width: 72ch; font-size: 1.08rem; }
.article-body h2 { margin-top: 32px; line-height: 1.2; }
.article-footer { margin-top: 36px; padding-top: 20px; border-top: 1px solid #dce2ea; }
.sidebar { display: grid; align-content: start; gap: 20px; }
.sidebar-card { padding: 22px; border: 1px solid #dce2ea; border-radius: 12px; background: #f8fafc; }
.sidebar-card h2 { margin-top: 0; font: 800 1.2rem/1.3 system-ui, sans-serif; }
.sidebar-card li + li { margin-top: 12px; }
.site-footer { padding-block: 40px; background: #172033; color: #ffffff; }
.site-footer a { color: #bfdbfe; }
.footer-grid { display: grid; gap: 28px; }
.site-footer nav { display: grid; gap: 20px; }
.site-footer h2 { margin: 0; font: 700 1rem/1.3 system-ui, sans-serif; }
@media (min-width: 800px) {
.content-grid { grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); }
.footer-grid { grid-template-columns: 1fr 2fr; }
.site-footer nav { grid-template-columns: repeat(3, 1fr); }
}
</style>
</head>
<body>
<header class="site-header">
<div class="container header-row">
<a class="brand" href="#utama">Kabar Kota</a>
<nav aria-label="Navigasi utama">
<ul class="nav-list">
<li><a href="#kota">Kota</a></li>
<li><a href="#teknologi">Teknologi</a></li>
<li><a href="#ekonomi">Ekonomi</a></li>
</ul>
</nav>
</div>
</header>
<main class="container" id="utama">
<div class="content-grid">
<article class="news-article" id="artikel-transportasi">
<header class="article-header">
<p class="category">Kota</p>
<h1>Koridor Transportasi Baru Mendorong Penataan Ruang Kota</h1>
<p class="lead">Pemerintah kota menyiapkan integrasi halte, jalur pejalan kaki, dan ruang publik di sepanjang koridor utama.</p>
<p class="article-meta">
Oleh <strong>Nadia Pratama</strong> ·
<time datetime="2026-09-30T09:30:00+07:00">30 September 2026, 09.30 WIB</time>
</p>
</header>
<figure class="article-figure">
<div class="visual-placeholder" role="img" aria-label="Ilustrasi halte, bus, dan jalur pejalan kaki pada koridor kota">Ilustrasi koridor transportasi</div>
<figcaption>Ilustrasi untuk proyek pembelajaran; bukan foto peristiwa nyata.</figcaption>
</figure>
<div class="article-body">
<p>Kabar Kota — Rencana penataan koridor transportasi memasuki tahap konsultasi publik. Fokus awal berada pada hubungan antara halte, trotoar, dan fasilitas penyeberangan.</p>
<p>Tim perencana menempatkan akses pejalan kaki sebagai bagian dari perjalanan, bukan fasilitas terpisah. Evaluasi lapangan juga mencakup jarak perpindahan antarmoda dan titik penyeberangan.</p>
<h2>Integrasi ruang menjadi perhatian</h2>
<p>Area di sekitar halte dirancang agar fungsi transportasi tidak memutus akses menuju pertokoan dan fasilitas umum. Masukan warga akan digunakan untuk meninjau rancangan sebelum tahap berikutnya.</p>
<h2>Tahap konsultasi masih berlangsung</h2>
<p>Rencana yang dibahas belum menggambarkan hasil akhir pembangunan. Jadwal dan detail teknis dapat berubah setelah evaluasi dan proses pengambilan keputusan selesai.</p>
</div>
<footer class="article-footer">
<p><strong>Tentang penulis:</strong> Nadia Pratama adalah nama fiktif yang digunakan untuk demonstrasi struktur halaman berita.</p>
</footer>
</article>
<aside class="sidebar" aria-label="Konten tambahan">
<section class="sidebar-card">
<h2>Berita terpopuler</h2>
<ol>
<li><a href="#artikel-transportasi">Penataan koridor transportasi menjadi perhatian warga</a></li>
<li><a href="#teknologi">Layanan digital kota diperbarui</a></li>
<li><a href="#ekonomi">Pasar lokal menambah ruang usaha</a></li>
</ol>
</section>
<section class="sidebar-card">
<h2>Tentang redaksi</h2>
<p>Kabar Kota adalah penerbit fiktif yang digunakan untuk latihan struktur HTML.</p>
</section>
</aside>
</div>
</main>
<footer class="site-footer">
<div class="container footer-grid">
<div>
<strong>Kabar Kota</strong>
<p>Contoh website berita untuk pembelajaran HTML semantik.</p>
</div>
<nav aria-label="Navigasi footer">
<section id="kota">
<h2>Kota</h2>
<p><a href="#artikel-transportasi">Artikel transportasi</a></p>
</section>
<section id="teknologi">
<h2>Teknologi</h2>
<p>Kategori demonstrasi.</p>
</section>
<section id="ekonomi">
<h2>Ekonomi</h2>
<p>Kategori demonstrasi.</p>
</section>
</nav>
</div>
</footer>
</body>
</html>Buka versi lengkap dan lakukan audit dari struktur menuju presentasi. Expected result pada desktop adalah header di atas, artikel pada kolom lebih lebar, sidebar pada kolom kanan, lalu footer gelap. Pada layar sempit semuanya kembali tersusun vertikal. Klik seluruh fragment dan pastikan URL serta target cocok. Tekan Tab untuk memeriksa fokus tautan. Di inspector, pastikan terdapat satu main, satu article utama, satu aside, serta dua footer dengan konteks berbeda: satu berada di dalam artikel dan satu berada setelah main. Verifikasi juga bahwa article dan aside adalah anak langsung content-grid. Jika tersedia, validator HTML dapat menjadi pemeriksaan tambahan untuk sintaks, tetapi hasil validator tidak menggantikan pemeriksaan urutan baca, konten, keyboard, dan responsivitas secara manual.
Verifikasi Akhir dan Parameter Kelayakan
Parameter kelayakan proyek sebaiknya dapat diperiksa tanpa bergantung pada kesan visual. Gunakan index.html lengkap, DevTools, address bar, dan keyboard untuk menguji lima kondisi di bawah. Kondisi “sebelum” menggambarkan struktur sederhana atau tahap awal sebelum metode diterapkan, bukan benchmark situs berita lain. Target menilai apakah hubungan semantik dan layout yang sengaja dirancang benar-benar hadir: konten utama dikenali, metadata mempunyai bentuk terstruktur, sidebar bukan bagian artikel secara tidak sengaja, layout berubah pada breakpoint, dan fragment mempunyai target yang konsisten. Dengan cara ini, perubahan desain berikutnya dapat dilakukan tanpa kehilangan fondasi dokumen.
| Parameter | Sebelum Menerapkan Metode | Sesudah Menerapkan Metode (Target) |
|---|---|---|
| Landmark utama | Konten belum dibedakan menjadi header, main, aside, dan footer. | Header situs, satu main, aside pendamping, dan footer situs dapat diidentifikasi pada DOM. |
| Struktur artikel | Judul, metadata, dan isi belum dikelompokkan. | Satu article memuat header artikel, satu h1, figure, isi, dan footer artikel. |
| Metadata waktu | Tanggal hanya berupa teks biasa atau belum tersedia. | Elemen time menampilkan waktu dan memiliki datetime 2026-09-30T09:30:00+07:00. |
| Responsivitas | Belum ada aturan pemisahan kolom. | Di bawah 800px satu kolom; mulai 800px content-grid menggunakan rasio 2fr dan 1fr. |
| Target navigasi | Fragment belum mempunyai target lengkap. | #utama, #kota, #teknologi, #ekonomi, dan #artikel-transportasi masing-masing cocok dengan ID pada dokumen. |
Solusi Masalah di Lapangan (FAQ Teknis)
1. Mengapa sidebar muncul di bawah artikel meskipun layar sudah lebar?
Gejala tersebut dapat berasal dari beberapa hal, jadi periksa yang paling sederhana lebih dahulu. Pastikan viewport benar-benar berukuran minimal 800 piksel dan metadata viewport tetap ada pada dokumen. Selanjutnya inspect elemen content-grid: media query seharusnya menerapkan grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr). Artikel dan aside juga harus menjadi anak langsung dari grid. Jika aside tanpa sengaja ditempatkan di dalam article, grid hanya melihat satu anak utama sehingga susunan tidak seperti target. Periksa pula kurung kurawal CSS di sekitar media query. Setelah diperbaiki, ubah viewport dari bawah ke atas 800 piksel; perpindahan satu menjadi dua kolom harus dapat diamati secara konsisten.
2. Bolehkah semua kotak tambahan menggunakan aside?
Tidak. aside mempunyai makna semantik, bukan sekadar cara mendapatkan kolom samping. Gunakan ketika konten bersifat tidak langsung atau tangensial terhadap konten utama di sekitarnya, seperti daftar berita lain atau informasi redaksi dalam contoh ini. Jika sebuah kotak merupakan bagian penting dari alur artikel, konten tersebut mungkin lebih tepat tetap berada di article, menggunakan section bila memiliki bagian bertema, atau memakai elemen lain sesuai maknanya. CSS dapat menempatkan elemen apa pun ke kolom kanan tanpa menjadikannya aside. Untuk verifikasi, bayangkan sidebar dihapus: jika artikel utama masih utuh dan masuk akal, keputusan menggunakan aside biasanya lebih mudah dipertanggungjawabkan daripada ketika informasi esensial artikel hilang.
3. Mengapa klik kategori hanya menggulir ke footer, bukan membuka halaman kategori?
Itu adalah perilaku yang disengaja pada proyek satu file ini. Tautan seperti href="#teknologi" merupakan fragment URL dan hanya mencari elemen dengan id="teknologi" pada dokumen yang sama. Situs berita nyata biasanya memiliki routing atau file/URL kategori sendiri, misalnya URL yang disediakan sistem penerbitan. Jangan mengubah fragment menjadi path buatan yang sebenarnya tidak ada hanya agar contoh terlihat lebih realistis. Jika proyek Anda sudah memiliki halaman kategori nyata, ganti nilai href dengan URL yang memang tersedia. Untuk baseline tutorial, verifikasi melalui address bar bahwa fragment berubah dan browser menuju section footer yang ID-nya cocok. Itu membuktikan navigasi internal berfungsi sesuai rancangan contoh.
4. Mengapa waktu terlihat benar tetapi nilai datetime perlu diperhatikan?
Teks visual dan atribut datetime dapat berbeda format karena melayani kebutuhan berbeda. Pada contoh, manusia membaca “30 September 2026, 09.30 WIB”, sedangkan markup menyimpan 2026-09-30T09:30:00+07:00. Kesalahan terjadi jika editor mengubah teks yang terlihat tetapi lupa menyesuaikan atribut, atau memakai offset zona waktu yang tidak sesuai. Browser belum tentu memberikan tanda visual bahwa dua nilai tersebut bertentangan. Karena itu, inspect elemen time dan bandingkan tanggal, jam, serta zona waktunya dengan informasi publikasi sebenarnya. Jika berita diperbarui, kebijakan editorial dapat pula memerlukan waktu modifikasi terpisah; jangan diam-diam mengganti waktu publikasi dengan waktu edit jika keduanya mempunyai makna berbeda.
Kesimpulan dan Rencana Aksi
Struktur halaman berita yang kuat dibangun dari hubungan konten sebelum dibangun dari kolom visual. Dalam proyek Kabar Kota, header tingkat halaman menangani identitas dan navigasi, main menampung konten unik, article mengemas berita sebagai unit mandiri, aside menyimpan materi pendamping, dan footer situs menyediakan penutup serta navigasi tambahan. Di dalam artikel, time, figure, figcaption, heading, dan footer artikel memberikan struktur yang lebih kaya daripada kumpulan div tanpa makna. Rencana aksi berikutnya adalah mengganti konten fiktif dengan materi Anda sendiri, mengganti panel ilustrasi dengan gambar yang benar bila diperlukan, lalu menguji ulang teks alternatif, tanggal, link, keyboard, dan breakpoint. Setelah struktur statis stabil, Anda dapat memisahkan CSS ke file eksternal atau menghubungkan template dengan CMS pada proyek yang lebih besar. Perubahan tersebut sebaiknya mempertahankan prinsip yang sama: data editorial boleh datang dari sistem dinamis, tetapi HTML yang dihasilkan tetap perlu mempunyai struktur semantik, urutan baca logis, target navigasi valid, dan presentasi responsif.
Ditulis dan diedit oleh Ahmad Ismail Al Malik