Sections & Articles

Setelah lesson ini, kamu dapat memilih section, article, dan aside sesuai hubungan serta kemandirian konten.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Sebuah halaman berisi kabar komunitas, jadwal, dan catatan tambahan. Semuanya “bagian”, tetapi belum tentu memiliki peran yang sama.

Memilih section, article, dan aside sesuai hubungan serta kemandirian konten.

PAHAMI KONSEPNYA

Section mengelompokkan sebuah tema

Gunakan section ketika sekelompok konten memiliki tema yang jelas, biasanya dengan heading. Contohnya bagian “Kegiatan Mendatang” yang berisi beberapa kegiatan. Jangan memilih section hanya karena membutuhkan kotak untuk styling.

Article dapat berdiri sendiri

Article cocok untuk tulisan, ulasan, atau kabar yang tetap bermakna jika dipisahkan dari halaman. Satu section kumpulan kabar dapat berisi beberapa article. Ini bukan aturan bahwa semua paragraf harus dibungkus article.

Aside berhubungan secara tambahan

Aside memuat informasi sampingan, seperti tips terkait bacaan. Letaknya tidak harus di sisi kanan layar. Pilih berdasarkan hubungan isi, bukan posisi visual. Jika tidak ada makna khusus untuk pembungkus, div tetap boleh digunakan.

CONTOH / KONTEKS

Contoh memperjelas konsep.

CONTOH HTML

<main>
  <h1>Kabar Taman Baca</h1>
  <section>
    <h2>Cerita Komunitas</h2>
    <article><h3>Sudut Buku Baru</h3><p>Kami menata rak untuk pembaca kecil.</p></article>
  </section>
  <aside><h2>Tips Membaca</h2><p>Istirahatkan mata secara berkala.</p></aside>
</main>

HASIL DI BROWSER

Section mengelompokkan cerita. Article berisi kabar mandiri. Aside menambahkan tips yang terkait tetapi bukan inti kabar.

KESALAHAN YANG SERING TERJADI

<section><section><p>Satu kalimat biasa.</p></section></section>

Pembungkus tanpa tema hanya menambah kerumitan. Pakai section saat ada pengelompokan isi yang bermakna dan biasanya sebuah heading.

COBA BERSAMA

Praktik memperjelas pemahaman.

01 Ulasan buku yang dapat dipublikasikan sendiri paling sesuai dibungkus dengan…

articlenavaside hanya karena berada di kiri

Boleh mencoba berkali-kali. Tugas mandiri berikutnya menjadi bukti penyelesaian lesson.

TULIS · LIHAT · PAHAMI

Susun buletin kebun

Buat main dengan h1. Di dalamnya, buat section berjudul h2 “Kabar Kebun”, sebuah article dengan h3 dan paragraf tentang panen, serta aside berjudul h2 dengan tips tambahan.

<main>
  <h1>Buletin Kebun</h1>
  <!-- Kelompok kabar dan tips -->
</main>

index.htmlHTMLLn 1, Col 14 baris2 spasi

Pintasan & bantuan editor

Ctrl + Space: Tampilkan saran · ↑ ↓ memilih · Enter menerima · Esc menutup
Shift + Alt + F: Rapikan kode
Ctrl/⌘ + F: Cari dan ganti teks
Ctrl/⌘ + [ / ]: Kurangi / tambah indentasi
Tab: Pindah fokus; dalam snippet, pindah ke isian berikutnya. Esc lalu Tab untuk keluar.
Ctrl/⌘ + Z: Batalkan perubahan, termasuk format

Saran berasal dari bahasa, snippet, dan konteks lokal kode. Format berjalan di browser.

Preview dokumen

Ctrl/⌘ + Enter menjalankan preview. Preview memakai gaya bantu baca. Script dan pengiriman form dinonaktifkan. Ilustrasi contoh: assets/observatory.svg.

BAWA PEMAHAMAN INI BERSAMAMU

Praktik memberi dasar.

Section mengelompokkan tema.
Article adalah unit konten yang dapat berdiri sendiri.
Aside memuat informasi tambahan; makna tidak ditentukan posisi visual.

Struktur semantikTeks bermakna

Lesson tuntas setelah tugas mandiri memenuhi tujuan. Kamu bebas membaca kembali kapan saja.

Hubungkan dengan konsep lain

Semantic HTML °Heading °Landmark °

Library: Tiga bahasa di balik satu halaman ↗

Ke lesson berikutnya →