Daftar Publikasi

Profil penulis yang meyakinkan ditopang daftar karya. Bagian 3 mengisi section Publikasi — konten inti halaman ini — dengan dua daftar: buku yang diterbitkan dan cerita pendek terpilih. Sebelum mengetik satu tag pun, kita perlu memutuskan jenis list untuk masing-masing, karena keputusan itu ditentukan makna konten, bukan tampilan yang diinginkan.

Membaca Kebutuhan Konten #

Tiga buku Dewi terbit berurutan: 2019, 2021, lalu 2024. Urutan itu menyimpan cerita perkembangan kariernya — menukar posisi butir berarti menulis ulang kronologi. Daftar seperti ini memakai ol. Sementara itu, tiga cerita pendek terpilih berasal dari majalah dan antologi yang berbeda; ketiganya adalah karya pilihan, bukan rangkaian berurutan — menukar posisinya tidak mengubah makna. Daftar seperti ini memakai ul.

Aturan cepatnya kita kenal dari chapter Memilih Jenis List: bila menukar posisi dua butir mengubah makna, pakai ol; bila tidak, pakai ul. Kedua jenis muncul berdampingan pada section yang sama karena masing-masing daftar dinilai sendiri.

Daftar Karya pada Berkas #

Potongan berikut sama persis dengan baris 35–51 pada berkas index.html:

    <!-- Bagian: publikasi -->
    <section id="publikasi">
      <h2>Publikasi</h2>
      <p>Daftar berikut memuat karya terpilih Dewi menurut tahun terbit.</p>
      <h3>Buku</h3>
      <ol>
        <li>Jejak Kabut di Bukit (<time datetime="2019">2019</time>)</li>
        <li>Rumah di Ujung Musim (<time datetime="2021">2021</time>)</li>
        <li>Suara dari Peron Tiga (<time datetime="2024">2024</time>)</li>
      </ol>
      <h3>Cerita Pendek</h3>
      <ul>
        <li>Penjaga Warung Kopi — majalah Cerita Kita, <time datetime="2018">2018</time></li>
        <li>Surat untuk Rani — antologi Dua Belas Suara, <time datetime="2022">2022</time></li>
        <li>Terminal Sebelum Subuh — majalah Cerita Kita, <time datetime="2023">2023</time></li>
      </ul>
    </section>

Daftar Buku: ol #

1. <h3>Buku</h3>: sub-judul dalam section. Heading mengikuti jenjang — h2 untuk judul section, h3 untuk kelompok di dalamnya.
2. <ol>: daftar bernomor. Nomor 1–3 yang tampil di browser bukan hiasan; ia urutan terbit yang bermakna.
3. <li> per buku: memuat judul karya dan tahun terbit dalam tanda kurung. Kurung menandai tahun sebagai keterangan, bukan bagian judul.
4. <time datetime="2019">2019</time>: tahun dibungkus elemen time dengan atribut datetime berisi nilai yang dapat dibaca mesin. Isi elemen — teks yang tampil — tetap bebas formatnya.

Daftar Cerita Pendek: ul #

1. <ul>: daftar sederajat tanpa urutan bermakna. Penanda bawaan berupa bulatan, dan itu memang satu-satunya perbedaan tampilannya dengan ol.
2. <li> per karya: judul, sumber penerbitan, lalu tahun — dipisah tanda hubung em. Pola penulisan sama untuk semua butir agar daftar mudah dipindai.
3. Elemen time tetap dipakai: meski wadahnya berubah, tahun tetap data yang layak dibaca mesin.

Tahun sebagai Data dengan time #

Tahun bisa saja ditulis teks biasa — “2019” tanpa pembungkus apa pun — dan tampilannya sama persis. Perbedaannya ada di makna: atribut datetime memberi nilai yang dapat dipahami browser, mesin pencari, dan skrip pihak ketiga tanpa menebak format. Nilainya mengikuti format standar: YYYY untuk tahun, YYYY-MM bila bulan diketahui, hingga YYYY-MM-DD untuk tanggal lengkap.

Hasil di Tahap Ini #

Muat ulang index.html di browser. Section Publikasi kini tampil di bawah foto: daftar buku bernomor 1 sampai 3, disusul daftar cerita pendek dengan penanda bulatan. Perhatikan bahwa nomor dan bulatan tampil dari ol dan ul tanpa satu baris CSS pun — tampilan daftar memang bawaan browser, dan kelak CSS list-style-type bisa mengubahnya tanpa mengubah markup.

Inilah keadaan halaman pada akhir Bagian 3 — biografi dan foto di atas, dua daftar publikasi di bawahnya:

Pada demo, berkas assets/foto.svg diganti placeholder SVG agar gambarnya langsung terlihat; markup dan teksnya sama persis dengan berkas proyek.

Ringkasan Bagian 3 #

Section Publikasi terisi: buku sebagai ol karena urutan terbit bermakna, cerita pendek sebagai ul karena urutannya bebas, dan seluruh tahun terbungkus time dengan datetime berformat mesin. Konten halaman kini tinggal kekurangan satu bagian — kontak — yang kita lengkapi pada Bagian 4.