Daftar

Daftar adalah hal yang lebih umum dari yang Anda kira. Jika Anda pernah mengikuti kelas pemrograman, project pertamanya mungkin membuat daftar belanja atau daftar tugas. Itu adalah daftar. Tes pilihan ganda umumnya berupa daftar pertanyaan bernomor: jawaban ganda untuk setiap pertanyaan merupakan daftar bertingkat.

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

Dalam bentuk 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 butir. Daftar tersebut biasanya didahului oleh penghitung menaik seperti angka atau huruf. Butir dan urutan penomoran dapat dikontrol atau dibalik dengan HTML atau CSS, atau keduanya.

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

Daftar yang tidak diurutkan

Elemen <ul> adalah elemen induk untuk daftar item yang tidak diurutkan. Satu-satunya turunan <ul> adalah satu atau beberapa elemen item daftar <li>. Mari kita buat daftar komputer. Kita menggunakan daftar yang tidak diurutkan karena urutannya tidak berpengaruh (jangan beri tahu mereka):

Secara default, setiap item daftar yang tidak diurutkan diawali dengan butir. Daftar yang tidak diurutkan 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 banyak jenis. Jenis ini dapat ditentukan di CSS dengan properti list-style-type atau melalui atribut type.

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

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

Meskipun, seperti yang disebutkan dalam codepen, properti list-style-type menggantikan nilai atribut type, saat menulis dokumentasi yang mementingkan jenis numerik, seperti dengan dokumen hukum, misalnya, Anda perlu menyertakan type.

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

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

Kita dapat membuat daftar bertingkat, tetapi harus disarangkan di 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 belum memperkenalkannya secara resmi. Elemen <li> dapat berupa turunan langsung dari daftar yang tidak diurutkan (<ul>), daftar yang diurutkan (<ol>), atau menu (<menu>). <li> harus disusun bertingkat sebagai turunan dari salah satu elemen ini, dan tidak valid di tempat lain.

Menutup item daftar tidak diwajibkan oleh spesifikasi karena akan ditutup secara implisit saat browser menemukan tag pembuka <li> berikutnya atau tag penutup daftar yang diperlukan: </ul>, </ol>, </menu>. Meskipun spesifikasi ini tidak mewajibkannya, dan beberapa praktik terbaik perusahaan internal menyarankan agar Anda tidak menutup item daftar untuk menghemat beberapa byte, tutup tag <li> Anda. Hal itu membuat kode Anda lebih mudah dibaca dan Anda akan berterima kasih. Lebih mudah untuk menutup semua elemen daripada mengingat tag mana yang harus ditutup dan mana yang memiliki tag penutup opsional.

Hanya ada satu atribut <li> khusus elemen: value, bilangan bulat. value hanya berguna pada <li> jika <li> disusun bertingkat dalam daftar yang diurutkan dan tidak memiliki arti untuk daftar atau menu yang tidak diurutkan. Kode ini menggantikan nilai awal <ol> jika ada konflik.

value adalah jumlah item daftar dalam daftar yang diurutkan. Pada item daftar berikutnya, lanjutkan penomoran dari kumpulan nilai, kecuali jika item tersebut juga memiliki kumpulan atribut value. Nilai tidak harus berurutan; meskipun jika tidak berurutan, harus ada alasan yang tepat.

Saat Anda menggabungkan reversed di <ol> dengan atribut value pada item daftar, browser akan menetapkan <li> tersebut ke nilai yang diberikan, lalu menghitung <li> yang mendahuluinya, dan menghitung mundur untuk nilai berikutnya. 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 angka sepenuhnya hanya presentasi, gunakan CSS. Jika penomorannya 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 setiap elemen yang ditemukan dalam isi yang dapat disusun bertingkat sebagai turunan langsung <body>, termasuk judul, sehingga membagi konten.

Kita punya beberapa daftar yang tidak diurutkan di MLW. Pengajar di bagian instruktur mencantumkan daftar, begitu juga 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>. Masing-masing 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. The Russians had nothing to do with it. This has
    <span style="font-family:Arial;vertical-align:baseline;">no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ&nbsp;̗̰͓̲̞̀t͙̀o̟̖͖̹̕&nbsp;͓̼͎̝͖̭dó̪̠͕̜&nbsp;͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢&nbsp;̰̳̯̮͇i</blockquote>
    <p>
      --Toasty McToastface,<br/>
      Formerly Half Baked, <br/>
      Aspiring Nuclear Codes Handler
    </p>
  </li>
</ul>

Membuat daftar bertingkat dalam daftar juga sangat umum dilakukan. Meskipun MLW tidak memiliki daftar bertingkat, situs ini memilikinya. Dalam bab pertama rangkaian ini, Ringkasan HTML, bagian elemen utama memiliki dua subbagian. Dalam daftar isi yang merupakan daftar yang tidak diurutkan, terdapat daftar tidak berurutan bertingkat dengan link ke dua bagian berikut:

<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 di <li>, tidak pernah langsung di <ol> atau <ul>.

Pada contoh terakhir ini, Anda mungkin telah melihat bahwa role="list" disertakan di <ul>. Meskipun peran implisit <ul> dan <ol> adalah list, menghapus tampilan daftar dengan CSS, termasuk setelandisplay: grid atau list-style-type: none, dapat menyebabkan VoiceOver (pembaca layar iOS dan MacOS) menghapus semantik implisit di Safari. Ini adalah fitur yang bukan bug. Umumnya, Anda tidak boleh menambahkan atribut peran saat menggunakan elemen semantik karena tidak diperlukan. Secara umum, Anda juga tidak perlu menambahkannya ke daftar, kecuali jika pengguna benar-benar perlu mengetahui bahwa itu adalah daftar, seperti ketika pengguna akan mendapat manfaat dengan mengetahui berapa banyak item yang ada dalam daftar tersebut.

Daftar deskripsi

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

Serupa dengan daftar yang diurutkan dan tidak diurutkan, daftar tersebut dapat disarangkan. Tidak seperti daftar yang diurutkan dan tidak diurutkan, daftar terdiri dari pasangan kunci/nilai. Serupa dengan <ul> dan <ol>, <dl> adalah penampung induk. Elemen <dt> dan <dd> adalah turunan dari <dl>.

Kita dapat membuat daftar mesin dengan riwayat karier dan aspirasinya. Daftar deskripsi siswa, yang dilambangkan dengan <dl>, mencakup sekelompok istilah—dalam hal ini, "istilah" adalah nama siswa—yang ditentukan menggunakan elemen <dt>, beserta deskripsi untuk setiap istilah—dalam hal ini, sasaran karier setiap siswa—ditentukan oleh elemen <dd>.

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

Saat membuat daftar istilah beserta definisi atau deskripsinya, atau daftar key-value pair serupa, elemen daftar deskripsi akan menyediakan semantik yang sesuai. Peran implisit <dt> adalah term, dengan listitem menjadi 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 tersebut masuk akal karena <dl> tidak selalu berupa daftar. Namun, saat tersedia, fungsi tersebut menerima peran list dan group.

Sering kali Anda akan 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 memungkinkan untuk menggunakan kombinator seinduk yang berdekatan atau pemilih relasional :has() untuk menargetkan angka variabel elemen ini dengan CSS, jika diperlukan, Anda dapat menyertakan <div> sebagai turunan dari <dl>, dan induk dari satu atau beberapa elemen <dt> atau <dd> (atau keduanya) diizinkan. <dl> sebenarnya dapat memiliki beberapa turunan lain: membuat <div>, <template>, atau <script> menjadi bertingkat diizinkan. Tidak ada elemen daftar deskripsi yang memiliki atribut khusus elemen.

Setelah Anda memahami link dan daftar, mari gabungkan keduanya untuk membuat navigasi.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang daftar.

Apakah menyertakan <h2> ke dalam item daftar valid?

Tidak.

Coba lagi.

Ya.

Benar.

Pilih tiga elemen yang mendefinisikan jenis daftar.

<il>

Coba lagi.

<ol>

Benar.

<ul>

Benar.

<dl>

Benar.