Dua halaman berdiri; halaman ketiga menjadi yang terpadat. Kegiatan adalah alasan orang bergabung ke komunitas, maka halamannya menggabungkan dua wadah berbeda dalam satu main: tiga article untuk kegiatan besar, lalu satu table untuk jadwal rutin sepanjang pekan — kombinasi yang jarang kita latih bersamaan.

Pengantar dan Tautan Fragment #

Buat src/kegiatan.html dengan kerangka yang sama — ganti title menjadi “Kegiatan — Kopi.dev” beserta meta description versinya, salin header beranda, lalu buka elemen main dengan judul dan pengantar berikut — sama persis dengan baris 23-24 berkas final:

html 
    <h1>Kegiatan Komunitas</h1>
    <p>Tiga kegiatan besar menanti pada November 2026, dan semuanya terbuka bagi anggota baru — cukup datang dan kenalkan diri. Di luar tanggal itu, komunitas bergerak mengikuti <a href="#jadwal-rutin">jadwal rutin sepanjang pekan</a>.</p>

Bedah potongan ini:

  1. h1 dan janji isi (baris 1-2): judul lalu paragraf yang merangkum isi — tiga kegiatan besar plus jadwal rutin.
  2. Tautan fragment (baris 2): href="#jadwal-rutin" menunjuk section tabel di akhir halaman ini — fragment dalam halaman yang sama, tanpa nama berkas. Pengunjung yang hanya butuh jadwal mingguan melompat langsung melewati tiga article.
  3. Teks tautan menyebut isi (baris 2): “jadwal rutin sepanjang pekan”, bukan “klik di sini” — pengunjung tahu target lompatan sebelum menekannya, kebiasaan chapter Link Text yang Jelas.

Tiga Article Kegiatan #

Setelah pengantar, tiga kegiatan besar ditulis sebagai article yang menempel langsung di main. Yang pertama:

html 
    <!-- Kegiatan: workshop HTML dasar -->
    <article id="workshop-html-dasar">
      <h2>Workshop HTML Dasar</h2>
      <p>Sabtu, <time datetime="2026-11-07">7 November 2026</time>, 10.00–12.00 WIB.</p>
      <p>Membangun halaman pertama dari nol: struktur dokumen, teks, tautan, dan gambar. Kursi dibatasi 20 orang agar pemateri sempat memeriksa kode tiap peserta.</p>
      <address>
        Ruang Cendana, Jalan Kenari No. 12, Jakarta Selatan 12130
      </address>
      <p><a href="https://www.example.com/daftar-workshop" target="_blank" rel="noopener">Daftar kursi workshop</a></p>
    </article>

Dua kegiatan berikutnya — Sesi Latihan Bersama dan Diskusi Bulanan — menempel di bawahnya dengan pola sama; masing-masing membawa id, tanggal ber-time, address, dan tautan pendaftarannya sendiri. Mari kita bedah pola article ini:

  1. article ber-id (baris 2): kegiatan berdiri sendiri — dicabut dari halaman dan dikirim lewat surel, informasi “Workshop HTML Dasar” tetap utuh dan masuk akal. Uji dicabut dari chapter Elemen article menentukan pilihan ini.
  2. h2 judul kegiatan (baris 3): di beranda judul yang sama berlevel h3 karena hidup di dalam section ber-h2; di sini article-nya menempel langsung di main, maka levelnya naik — level mengikuti kedalaman struktur.
  3. Baris tanggal ber-time (baris 4): datetime memuat tanggal mesin-baca, teks layar memuat keterangan manusiawi — tanggal ini pengunjung catat ke kalender.
  4. address lokasi (baris 6-8): alamat tempat kegiatan — persis peran address pada proyek panduan wisata, satu kesatuan yang boleh multi-baris tanpa p.
  5. Tautan pendaftaran eksternal (baris 9): target="_blank" membuka tab baru, rel="noopener" menutup celah keamanannya — pasangan dari chapter Membuka Link di Tab Baru; example.com berperan sebagai server pendaftaran fiktif.

Tabel Jadwal Rutin #

Penutup halaman berpindah ke tabel — pertemuan tetap yang berulang tiap pekan lebih mudah dipindai sebagai baris-kolom:

html 
    <!-- Jadwal rutin mingguan -->
    <section id="jadwal-rutin">
      <h2>Jadwal Rutin Komunitas</h2>
      <p>Di luar kegiatan besar, tiap pekan berisi pertemuan tetap:</p>
      <table>
        <caption>Pertemuan rutin Kopi.dev sepanjang pekan</caption>
        <thead>
          <tr><th scope="col">Hari</th><th scope="col">Kegiatan</th><th scope="col">Waktu</th><th scope="col">Tempat</th></tr>
        </thead>
        <tbody>
          <tr><th scope="row">Senin</th><td>Forum tanya jawab</td><td>19.00–21.00</td><td>Daring</td></tr>
          <tr><th scope="row">Rabu</th><td>Sesi latihan</td><td>19.00–21.00</td><td>Kedai Sebelah</td></tr>
          <tr><th scope="row">Sabtu</th><td>Kelas dasar</td><td>10.00–12.00</td><td>Ruang Cendana</td></tr>
        </tbody>
      </table>
    </section>

Mari kita bedah baris demi baris:

  1. Section penampung tabel (baris 2): tabel dibungkus section ber-h2 dan id="jadwal-rutin" — id inilah target tautan fragment dari pengantar halaman; tabel sendiri tidak ber-id.
  2. caption (baris 6): nama tabel yang diumumkan pembaca layar sebelum isi — tanpa caption pengunjung menebak dari kolom saja, materi chapter Caption.
  3. thead dengan scope="col" (baris 7-9): tiap kepala kolom terikat kolomnya — pembaca layar mengumumkan “Hari: Senin”, bukan sekadar “Senin”.
  4. tbody dengan scope="row" (baris 10-14): hari menjadi th ber-scope row — baris dibaca sebagai kesatuan “Rabu, sesi latihan, 19.00–21.00, Kedai Sebelah”. Kombinasi kedua scope ini inti chapter Atribut scope dan tanda tabel aksesibel dari chapter Accessible Tables.
  5. Satu baris satu tr (baris 8, 11-13): sel-sel satu baris data ditulis sebaris pada kode — tiga data tetap terbaca sebagai tiga baris yang jelas di berkas sumber.

Hasil pada Browser #

Simpan berkas dan muat halaman. Tiga article tampil berurutan; tabel di bawahnya menampilkan tiga baris jadwal. Klik “jadwal rutin sepanjang pekan” di pengantar — halaman menggulir turun ke tabel. Klik “Daftar kursi workshop” — tab baru terbuka, halaman kegiatan tetap tinggal.

Inilah keadaan kegiatan.html pada akhir Bagian 3 — klik tautan “jadwal rutin sepanjang pekan” di pengantarnya dan halaman bergulir ke tabel; tautan pendaftaran juga hidup dan terbuka di tab baru:

Pada demo, hanya tautan antarhalaman yang dimatikan (nilainya diganti #) — tautan fragment #jadwal-rutin tetap menggulir di dalam demo (dengan satu elemen <base> tambahan yang tidak diperlukan pada berkas tersimpan) dan tiga tautan pendaftaran terbuka di tab baru. Menu masih salinan beranda dan footer belum termasuk; keduanya dirapikan pada Bagian 5.

Ringkasan Bagian 3 #

  • Kegiatan besar ditulis article ber-id dengan h2, time, address, dan tautan pendaftaran eksternal yang aman.
  • Jadwal rutin ditulis table ber-caption, thead scope="col", dan tbody scope="row" — tabel aksesibel penuh.
  • Section penampung tabel memegang id untuk tautan fragment dari pengantar halaman.

Bagian berikutnya menutup rangkaian halaman dengan yang paling interaktif: form pesan pada kontak.html.