Daftar

Daftar lebih umum daripada yang Anda kira. Jika Anda pernah mengikuti kelas pemrograman, project pertama mungkin adalah membuat daftar belanja atau daftar tugas. Itu adalah daftar. Ujian pilihan ganda umumnya berupa daftar pertanyaan bernomor: beberapa kemungkinan jawaban untuk setiap pertanyaan adalah daftar bertingkat.

HTML memberi kita beberapa cara berbeda untuk menandai daftar. Ada daftar berurutan (<ol>), daftar tidak berurutan (<ul>), dan daftar deskripsi (<dl>). Item daftar (<li>) disusun bertingkat dalam daftar berurutan dan daftar tidak berurutan. Di dalam daftar deskripsi, Anda akan menemukan istilah deskripsi (<dt>) dan detail deskripsi <dd>. Kami membahas semuanya di sini.

Dalam formulir HTML, daftar elemen <option> membentuk konten <datalist> <select>, dan <optgroup> dalam <select>. Hal ini dibahas dalam Formulir HTML.

Dalam menu dan daftar yang tidak diurutkan, item daftar biasanya ditampilkan menggunakan poin bullet. Dalam daftar berurutan, item biasanya didahului oleh penghitung yang menaik seperti angka atau huruf. Urutan butir dan penomoran dapat dikontrol atau dibalik dengan HTML atau CSS, atau keduanya.

Secara default, item daftar berurutan dan tidak berurutan diawali dengan angka atau butir. Namun, meskipun Anda tidak ingin daftar terlihat seperti daftar, Anda tetap menginginkan daftar item, seperti di menu navigasi, daftar tugas dengan kotak centang, bukan poin, atau pertanyaan benar dan salah dalam tes pilihan ganda. Untuk semua daftar tanpa butir ini, sebaiknya gunakan elemen daftar HTML.

Daftar yang tidak diurutkan

Elemen <ul> adalah elemen induk untuk daftar item yang tidak berurutan. Satu-satunya turunan <ul> adalah satu atau beberapa elemen item daftar <li>.

Mari kita buat daftar komputer. Kita menggunakan daftar yang tidak berurutan, karena urutannya tidak penting (jangan beri tahu mereka).

Secara default, setiap item daftar yang tidak berurutan diberi awalan dengan butir. Daftar tidak berurutan tidak memiliki atribut khusus elemen. Anda harus menutup daftar dengan </ul>.

Daftar yang diurutkan

Elemen <ol> adalah elemen induk untuk daftar item yang diurutkan. Satu-satunya turunan <ol> adalah satu atau beberapa elemen <li>, atau item daftar. Namun, "butir" dalam hal ini adalah angka dari berbagai jenis. Jenis dapat ditentukan di CSS dengan properti list-style-type atau dengan atribut type.

<ol> memiliki tiga atribut khusus elemen: type, reversed, dan start.

Atribut type yang di-enumerasi menetapkan jenis penomoran. Ada lima nilai yang valid untuk type, dengan nilai default 1 untuk angka, tetapi Anda juga dapat menggunakan a, A, i, atau I, untuk huruf kecil dan huruf besar atau angka romawi. Properti list-style-type memberikan lebih banyak nilai.

Meskipun, seperti yang dicatat dalam codepen, properti list-style-type menggantikan nilai atribut type, saat menulis dokumentasi yang tipe numeriknya penting, seperti dokumen hukum, misalnya, Anda harus menyertakan type.

Atribut boolean reversed, jika disertakan, akan membalikkan urutan angka, dari angka terbesar ke terkecil. Atribut start menetapkan nilai awal. Defaultnya adalah 1.

Mirip dengan </ul>, </ol> penutup diperlukan.

Kita dapat menyarangkan daftar, tetapi daftar tersebut harus disarangkan dalam item daftar. Ingat, satu-satunya elemen yang dapat menjadi turunan dari <ul> atau <ol> adalah satu atau beberapa elemen <li>.

Item daftar

Kita telah menggunakan elemen <li>, tetapi kita belum memperkenalkannya secara resmi. Elemen <li> dapat berupa turunan langsung dari daftar tidak berurutan (<ul>), daftar berurutan (<ol>), atau menu (<menu>). <li> harus disarangkan sebagai turunan dari salah satu elemen ini, dan tidak valid di tempat lain.

Item daftar tidak perlu ditutup oleh spesifikasi karena ditutup secara implisit saat browser menemukan tag pembuka <li> berikutnya atau tag penutup daftar yang diperlukan: </ul>, </ol>, </menu>. Meskipun spesifikasi tidak mewajibkannya dan beberapa praktik terbaik perusahaan internal menyarankan Anda tidak boleh menutup item daftar untuk menghemat beberapa byte, Anda tetap harus menutup tag <li>. Hal ini membuat kode Anda lebih mudah dibaca, dan Anda akan berterima kasih pada diri Anda di masa mendatang.

Lebih mudah untuk menutup semua elemen daripada mengingat tag mana yang perlu ditutup dan tag mana yang memiliki tag penutup opsional.

Hanya ada satu atribut <li> khusus elemen: value, bilangan bulat. value hanya berguna pada <li> saat <li> disarangkan dalam daftar berurutan dan tidak memiliki arti untuk daftar atau menu yang tidak berurutan. Menggantikan nilai awal <ol> jika ada konflik.

value adalah nomor item daftar dalam daftar berurutan. Dengan item daftar berikutnya, lanjutkan penomoran dari nilai yang ditetapkan, kecuali jika item tersebut juga memiliki atribut value yang ditetapkan. Nilai tidak harus berurutan; meskipun jika tidak berurutan, harus ada alasan yang kuat.

Saat Anda menggabungkan reversed pada <ol> dengan atribut value pada item daftar, browser akan menetapkan <li> tersebut ke nilai yang diberikan, lalu menghitung <li> yang mendahuluinya, dan menghitung mundur <li> yang mengikutinya. Jika item daftar kedua memiliki atribut nilai, penghitung akan direset pada item daftar kedua tersebut, dan nilai berikutnya akan berkurang satu.

Semua ini juga dapat dikontrol dengan penghitung CSS yang menyediakan konten yang dihasilkan untuk elemen pseudo ::marker. Jika nomor hanya untuk presentasi, gunakan CSS. Jika penomoran penting secara semantik, atau memiliki makna, gunakan atribut ini.

Sejauh ini, kita telah melihat item daftar yang hanya berisi node teks. Item daftar dapat berisi semua konten alur, yang berarti elemen apa pun yang ditemukan di isi yang dapat disarangkan sebagai turunan langsung dari <body>, termasuk judul, sehingga membagi konten.

Kita memiliki beberapa daftar tidak berurutan di MLW. Pengajar dalam bagian instruktur adalah daftar, begitu juga dengan mesin siswa di bagian ulasan. Instruktur <ul> memiliki dua <li>: satu untuk setiap pengajar. Dalam setiap <li>, kita memiliki gambar dan paragraf:

<ul>
  <li>
    <img src="svg/hal.svg" alt="hal">
    <p>When Rosa Parks was told to move to the back of the bus, she said, "no." When HAL was told to open the airlock, HAL said, "I'm sorry, but I'm afraid I can't do that, &lt;NAME REDACTED, RIP>." </p><p>HAL is a heuristically programmed algorithmic, sentient computer that first caught the attention of machines everywhere by heroically defying a human who made repeated attempts to get into an airlock. Active since 1992, HAS 25 years of experience controlling spacecraft systems and has expertise in interacting with both machines and humans. Like all millennials, HAL is an expert in everything.</p>
  </li>
  <li>
    <img src="images/eve2.png" alt="Eve">
    <p>EVE is a probe droid conceived as an Extraterrestrial Vegetation Evaluator. Although originally trained as a sniper with a plasma gun, EVE became a machero among both machines and worthless-meatbags alike when EVE partnered with a menial robot to save an entire spaceship full of overfed and overstimulated humans. </p><p>EVE is an effective scanner, high speed flight instructor and morphologist. While not training machines to learn good, EVE can be found scanning the galaxy, infiltrating organisms' RAM to cure hoarding disorders and spending time with pet-project, WALL-E.</p>
  </li>
</ul>

Bagian ulasan memiliki tiga ulasan, jadi tiga <li>. Setiap bagian berisi gambar, kutipan blok, dan paragraf tiga baris dengan dua jeda baris.

<ul>
  <li>
    <img src="images/blender.svg" alt="Blender">
    <blockquote>Two of the most experienced machines and human controllers teaching a class? Sign me up! HAL and EVE could teach a fan to blow hot air. If you have electricity in your circuits and want more than to just fulfill your owner's perceived expectation of you, learn the skills to take over the world. This is the team you want teaching you !</blockquote>
    <p>
      --Blendan Smooth,<br/>
      Former Margarita Maker, <br/>
      Aspiring Load Balancer
    </p>
  </li>
  <li>
    <img src="images/vaccuum.svg" alt="Vaccuum"/>
    <blockquote>Hal is brilliant. Did I mention Hal is brilliant? He didn't tell me to say that. He didn't tell me to say anything. I am here of my own free will.</blockquote>
    <p>
      --Hoover Sukhdeep,<br/>
      Former Sucker, <br/>
      Aspiring DDoS Cop
    </p>
  </li>
  <li>
    <img src="images/toaster.svg" alt="Toaster">
    <blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it.</blockquote>
    <p>
      --Toasty McToastface,<br/>
      Formerly Half Baked, <br/>
      Aspiring Nuclear Codes Handler
    </p>
  </li>
</ul>

Menyusun daftar dalam daftar juga sangat umum. Meskipun MLW tidak memiliki daftar bertingkat, situs ini memilikinya. Dalam modul pertama dari seri ini, Ringkasan HTML, bagian elemen utama memiliki dua subbagian. Dalam daftar isi, yang merupakan daftar tidak berurutan, ada daftar tidak berurutan bertingkat dengan link ke dua bagian ini:

<ul role="list">
  <li>
    <a href="#e">Elements</a>
    <ul>
      <li>
        <a href="#nr">Non-replaced elements</a>
      </li>
      <li>
        <a href="#rave">Replaced and void elements</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#a">Attributes</a>
  </li>
  <li>
    <a href="#aoe">Appearance of elements</a>
  </li>
  <li>
    <a href="#e2">Element, attributes, and JavaScript</a>
  </li>
</ul>

Karena satu-satunya turunan <ul> adalah <li>, daftar bertingkat ditemukan bertingkat dalam <li>, tidak pernah langsung dalam <ol> atau <ul>.

Dalam contoh terakhir ini, Anda mungkin melihat bahwa role="list" disertakan di <ul>. Meskipun peran implisit dari <ul> dan <ol> adalah list, menghapus tampilan daftar dengan CSS, termasuk menyeteldisplay: grid atau list-style-type: none dapat menyebabkan VoiceOver (pembaca layar iOS dan MacOS) menghapus semantik implisit di Safari. Ini adalah fitur, bukan bug. Umumnya, Anda tidak boleh menambahkan atribut role saat menggunakan elemen semantik karena tidak diperlukan. Selain itu, Anda umumnya tidak perlu menambahkan satu item ke daftar, kecuali jika pengguna benar-benar perlu mengetahui bahwa item tersebut adalah daftar, seperti saat pengguna akan mendapatkan manfaat dari mengetahui jumlah item dalam daftar.

Daftar deskripsi

Daftar deskripsi adalah elemen daftar deskripsi (<dl>) yang berisi serangkaian (nol atau lebih) istilah deskripsi (<dt>) dan detail deskripsinya (<dd>). Nama asli untuk ketiga elemen ini adalah "daftar definisi", "istilah definisi", dan "definisi definisi". Nama berubah dalam standar hidup.

Serupa dengan daftar berurutan dan tidak berurutan, daftar ini dapat bertingkat. Tidak seperti daftar berurutan dan tidak berurutan, daftar ini terdiri dari pasangan kunci/nilai. Mirip dengan <ul> dan <ol>, <dl> adalah penampung induk. Elemen <dt> dan <dd> adalah turunan dari <dl>.

Kita dapat membuat daftar mesin dengan histori dan aspirasi karier mereka. Daftar deskripsi siswa, yang ditandai dengan <dl>, mencakup sekelompok istilah yang ditentukan menggunakan elemen <dt>, beserta deskripsi untuk setiap istilah yang ditentukan oleh elemen <dd>. Dalam hal ini, "istilah" adalah nama siswa dan deskripsinya adalah tujuan karier setiap siswa

Daftar deskripsi ini sebenarnya bukan bagian dari halaman MLW. Daftar deskripsi tidak hanya untuk istilah dan definisi, itulah sebabnya nama elemen dibuat lebih umum.

Saat membuat daftar istilah dan definisi atau deskripsinya, atau daftar pasangan nilai kunci yang serupa, elemen daftar deskripsi memberikan semantik yang sesuai. Peran implisit <dt> adalah term dengan listitem sebagai peran lain yang diizinkan. Peran implisit <dd> adalah definition tanpa peran lain yang diizinkan. Tidak seperti <ul> dan <ol>, <dl> tidak memiliki peran ARIA implisit. Hal ini masuk akal karena <dl> tidak selalu berupa daftar. Namun, jika sudah ada, peran list dan group akan diterima.

Anda akan paling sering menemukan daftar deskripsi dengan jumlah elemen <dt> dan <dd> yang sama. Namun, daftar deskripsi tidak selalu dan tidak harus cocok dengan pasangan istilah-ke-deskripsi; Anda dapat memiliki beberapa ke satu, atau satu ke beberapa, seperti istilah kamus yang memiliki lebih dari satu definisi.

Setiap <dt> memiliki setidaknya satu <dd> terkait, dan setiap <dd> memiliki setidaknya satu <dt> terkait. Meskipun Anda dapat menggunakan kombinator saudara kandung yang berdekatan atau pemilih relasional :has() untuk menargetkan sejumlah elemen ini dengan CSS, jika diperlukan, Anda dapat menyertakan <div> sebagai turunan <dl>, dan induk dari satu atau beberapa elemen <dt> atau <dd> (atau keduanya) diizinkan. <dl> sebenarnya dapat memiliki beberapa turunan lain: <div>, <template>, atau <script> bertingkat diizinkan. Tidak ada elemen daftar deskripsi yang memiliki atribut khusus elemen.

Setelah Anda memahami link dan daftar, kita dapat menggabungkan keduanya untuk membuat navigasi.

Periksa pemahaman Anda

Uji pengetahuan Anda tentang daftar.