Untuk mengelompokkan beberapa istilah dan deskripsi, letakkan satu atau lebih elemen dt sebelum satu atau lebih elemen dd di dalam dl. Panduan ini menunjukkan cara memilih pengelompokan yang tepat, membuat glosarium kecil di TextEdit pada Mac, dan memastikan hubungan antarunsurnya tetap jelas.

Bagaimana daftar deskripsi HTML mengelompokkan istilah?

Daftar deskripsi merepresentasikan hubungan antara nama dan nilai. Setiap kelompok memuat setidaknya satu istilah dan satu deskripsi, dengan semua istilah muncul sebelum deskripsi. Istilah berikutnya setelah sebuah deskripsi memulai kelompok baru. Hubungan ini ditentukan oleh urutan dokumen. Standar HTML: Elemen dl

Dalam glosarium, istilah bisa berupa kata tentang tata letak dan deskripsinya menjelaskan kata tersebut. Beberapa istilah berurutan dapat berbagi satu deskripsi. Anda tidak perlu mengulang penjelasan yang sama setelah setiap nama alternatif. MDN: Elemen istilah deskripsi

Pertanyaan praktisnya adalah apa saja yang termasuk dalam satu kelompok. Sebelum menulis markup, catat setiap hubungan yang dimaksud dengan bahasa biasa. Dalam contoh rekaan ini, “Gap” dan “Gutter” berbagi satu penjelasan, sedangkan “Tile” memiliki dua arti alternatif.

Hubungan yang dimaksud Struktur dalam satu kelompok
Satu istilah dengan satu deskripsi Satu dt, lalu satu dd
Beberapa istilah berbagi satu deskripsi Semua elemen dt, lalu satu dd
Satu istilah dengan deskripsi alternatif Satu dt, lalu beberapa elemen dd
Beberapa istilah berbagi deskripsi alternatif Semua elemen dt, lalu semua elemen dd
Satu deskripsi berisi beberapa paragraf Satu dd yang berisi paragraf-paragraf tersebut

Pola-pola ini mengikuti aturan pengelompokan dalam standar. Secara khusus, deskripsi terpisah merepresentasikan nilai alternatif; paragraf-paragraf yang termasuk dalam satu nilai tetap berada di dalam dd yang sama. Standar HTML: Semantik daftar deskripsi

Deskripsi mana yang sebaiknya berada dalam satu kelompok?

Gunakan uji keputusan ini: apakah setiap deskripsi dalam kelompok yang diusulkan dapat diterapkan secara wajar pada setiap istilah dalam kelompok tersebut? Jika tidak, pisahkan kontennya ke dalam kelompok-kelompok tersendiri. Ini adalah pemeriksaan editorial yang diturunkan dari model hubungan tersebut dan membantu menemukan pasangan yang tidak disengaja sebelum ditampilkan di halaman.

Beberapa istilah dengan satu deskripsi bersama

Fragmen ini memberikan satu penjelasan bersama untuk dua istilah glosarium rekaan. Kedua istilah muncul sebelum deskripsi, sesuai dengan pola beberapa istilah yang didokumentasikan MDN. MDN: Beberapa istilah, satu deskripsi

<dl>
  <dt>Gap</dt>
  <dt>Gutter</dt>
  <dd>The space between adjacent columns.</dd>
</dl>

Jangan menganggap ini sebagai dua entri terpisah yang kebetulan tidak memiliki deskripsi. Contoh ini dengan sengaja memperlakukan kedua nama tersebut sebagai satu kelompok. Jika glosarium Anda sendiri memberi keduanya makna yang berbeda, berikan deskripsi tersendiri untuk setiap nama.

Satu istilah dengan deskripsi alternatif

Sebuah deskripsi dapat diikuti deskripsi lain dalam kelompok yang sama. Di sini, glosarium rekaan menggunakan “Tile” untuk dua konsep yang berbeda. MDN: Elemen detail deskripsi

<dl>
  <dt>Tile</dt>
  <dd>A repeating unit in a visual pattern.</dd>
  <dd>A rectangular content block in a page layout.</dd>
</dl>

Untuk beberapa nama yang berbagi alternatif yang sama, letakkan istilah tambahan sebelum deskripsi pertama. Hindari anggapan bahwa istilah pertama hanya berpasangan dengan deskripsi pertama dan istilah kedua hanya dengan deskripsi kedua: hal itu memerlukan kelompok terpisah. MDN secara eksplisit mendokumentasikan penggabungan beberapa istilah dan deskripsi. MDN: Beberapa istilah dan deskripsi

Satu deskripsi dengan beberapa paragraf

Jika paragraf kedua memperluas penjelasan pertama, letakkan keduanya di dalam satu dd. Sebuah dd menerima konten alir, termasuk paragraf. Ini mempertahankan satu deskripsi sekaligus memungkinkan struktur internal yang mudah dibaca. Ringkasan teknis MDN: Detail deskripsi

<dl>
  <dt>Canvas</dt>
  <dd>
    <p>The working area for a composition.</p>
    <p>In this glossary, the term refers to the whole area.</p>
  </dd>
</dl>

Buat contoh lengkap di TextEdit pada Mac Anda

Mulailah dengan file baru agar Anda dapat memeriksa hasilnya tanpa mengubah dokumen yang sudah ada. Di TextEdit, pilih File > New, lalu Format > Make Plain Text. Apple mendokumentasikan langkah ini sebagai titik awal untuk menulis file HTML. Apple: Bekerja dengan dokumen HTML di TextEdit pada Mac

Tempelkan dokumen lengkap di bawah ini. Dokumen ini menggabungkan tiga keputusan di atas menjadi satu glosarium kecil. Setiap kelompok memiliki pembungkus div sendiri, yaitu struktur yang didukung untuk menerapkan gaya atau atribut pada seluruh kelompok. MDN: Membungkus kelompok nama-nilai

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Layout glossary</title>
</head>
<body>
  <h1>Layout glossary</h1>
  <dl>
    <div>
      <dt>Gap</dt>
      <dt>Gutter</dt>
      <dd>The space between adjacent columns.</dd>
    </div>
    <div>
      <dt>Tile</dt>
      <dd>A repeating unit in a visual pattern.</dd>
      <dd>A rectangular content block in a page layout.</dd>
    </div>
    <div>
      <dt>Canvas</dt>
      <dd>
        <p>The working area for a composition.</p>
        <p>In this glossary, the term refers to the whole area.</p>
      </dd>
    </div>
  </dl>
</body>
</html>

Pilih File > Save, beri nama file layout-glossary.html, lalu klik Save. Jika TextEdit menanyakan ekstensi yang akan digunakan, pilih Use .html. Inilah langkah penyimpanan yang didokumentasikan Apple untuk file HTML yang ditulis tangan. Apple: Membuat file HTML

Buka file yang disimpan di browser. Bandingkan teks yang ditampilkan dengan tiga hubungan yang diharapkan: “Gap” dan “Gutter” berbagi satu penjelasan; “Tile” memiliki dua deskripsi; “Canvas” memiliki satu deskripsi yang memuat dua paragraf. Gunakan perbandingan ini untuk memeriksa hubungan konten yang Anda maksud, meskipun jarak bawaan browser tampak berbeda dari desain yang Anda inginkan.

Pertahankan pengelompokan saat mengedit

HTML mendukung kelompok istilah-deskripsi langsung di dalam dl, atau kelompok yang dibungkus dalam elemen div. Pilih satu struktur untuk digunakan di seluruh daftar tertentu. Dalam versi terbungkus di atas, pertahankan istilah dan deskripsi setiap kelompok langsung di dalam pembungkusnya; jangan membungkus istilah dan deskripsi dalam kontainer terpisah. Standar HTML: Model konten daftar deskripsi

Saat merevisi contoh, gunakan pemeriksaan singkat ini:

  1. Temukan kelompok yang ingin Anda ubah.
  2. Pertahankan seluruh istilahnya sebelum deskripsi.
  3. Tentukan apakah teks penjelas yang baru merupakan nilai lain atau paragraf lain dari nilai yang sedang ada.
  4. Tambahkan kelompok lengkap baru saat memperkenalkan istilah yang tidak terkait.
  5. Simpan dokumen dan muat ulang pratinjau browser.

Misalnya, menambahkan “Panel” di antara dua deskripsi “Tile” akan memutus hubungan yang dimaksud: deskripsi berikutnya akan menjadi bagian dari kelompok yang baru dimulai. Letakkan istilah baru dan deskripsinya dalam pembungkus tersendiri. Ini mengikuti aturan standar bahwa istilah yang ditemukan setelah deskripsi akan memulai kelompok lain. Standar HTML: Algoritma pengelompokan

Jika TextEdit membuka kembali file sebagai teks berformat, gunakan File > Open, pilih dokumennya, klik Show Options, lalu pilih Ignore rich text commands sebelum membukanya. Untuk file berikutnya, pilih Display HTML files as HTML code instead of formatted text di TextEdit > Settings > Open and Save. Apple: Melihat dokumen HTML sebagai kode

Fokuskan tinjauan akhir pada makna: identifikasi istilah, identifikasi deskripsi yang digunakan bersama, dan pastikan bahwa pergantian paragraf tidak tanpa sengaja menjadi nilai terpisah. Setelah hubungan-hubungan tersebut benar, glosarium siap diberi gaya penyajian sesuai kebutuhan dokumen Anda.

Sumber