Daftar

Daftar lebih umum dari yang Anda kira. Jika Anda pernah mengambil kelas pemrograman, proyek pertamanya adalah membuat daftar belanja atau daftar tugas. Itu adalah daftar. Tes pilihan ganda umumnya merupakan daftar pertanyaan bernomor: beberapa kemungkinan jawaban untuk setiap pertanyaan adalah daftar bertingkat.

HTML menyediakan beberapa cara untuk menandai daftar. Ada daftar yang diurutkan (<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 deskripsi detail <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. Dalam daftar berurutan, biasanya didahului oleh penghitung menaik seperti angka atau huruf. Poin-poin 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. Tetapi bahkan ketika Anda tidak ingin daftar terlihat seperti daftar, Anda masih menginginkan daftar item, seperti di bilah navigasi, daftar tugas dengan kotak centang dan bukan poin-poin, atau pertanyaan benar dan salah dalam tes pilihan ganda. Untuk semua daftar ini tanpa butir, adalah hal yang sesuai untuk menggunakan 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 daftar <li> elemen item lainnya. Mari kita buat daftar komputer. Kami menggunakan daftar yang tidak diurutkan karena urutannya tidak penting (jangan beri tahu pengguna tersebut):

Secara default, setiap item daftar yang tidak diurutkan diawali dengan poin. Daftar yang tidak diurutkan tidak memiliki atribut khusus elemen. Anda perlu 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. "butir" dalam hal ini ada banyak jenis data. 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 yang valid untuk type, nilai default-nya 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 mengganti nilai atribut type saat menulis dokumentasi yang jenis numeriknya penting, seperti pada dokumen hukum, misalnya, Anda harus menyertakan type.

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

Serupa dengan </ul>, </ol> penutup wajib diisi.

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

Item daftar

Kami telah menggunakan elemen <li>, tetapi kami belum memperkenalkannya secara resmi. Elemen <li> dapat berupa turunan langsung dari elemen yang tidak diurutkan daftar (<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 item tersebut akan ditutup secara implisit saat browser menemukan <li> berikutnya tag pembuka atau tag penutup daftar yang diperlukan: </ul>, </ol>, </menu>. Meskipun spesifikasi ini tidak memerlukannya, dan beberapa perusahaan internal praktik terbaik menyarankan agar Anda tidak menutup item daftar untuk menyimpan beberapa byte, tutup tag <li> Anda. Ini 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 yang memiliki tag penutup opsional.

Hanya ada satu atribut <li> khusus elemen: value, bilangan bulat. value hanya berguna pada <li> saat <li> disusun bertingkat di 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. Dengan item daftar berikutnya, lanjutkan penomoran dari ditetapkan, kecuali jika item tersebut juga memiliki kumpulan atribut value. Nilainya tidak harus berurutan; meskipun tidak berurutan, harus ada alasan yang kuat.

Saat Anda menggabungkan reversed di <ol> dengan atribut value pada item daftar, browser akan menyetel <li> tersebut ke yang diberikan, lalu hitung <li> sebelumnya, dan hitung 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 menyediakan konten yang dihasilkan untuk elemen pseudo ::marker. Jika angka tersebut hanya bersifat presentasi, gunakan CSS. Jika penomoran tersebut penting secara semantik, atau memiliki arti, gunakan atribut ini.

Sejauh ini, kita telah melihat item daftar yang hanya berisi node teks. Item daftar dapat berisi semua konten yang mengalir, artinya semua ditemukan di isi yang dapat disusun bertingkat sebagai turunan langsung dari <body>, termasuk judul, sehingga dapat membagi konten.

Ada beberapa daftar yang tidak diurutkan di MLW. Pengajar di bagian instruktur merupakan daftar, begitu juga mesin siswa dalam ulasan bagian. 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 pemisah 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 terjadi. Meskipun MLW tidak memiliki daftar bertingkat, situs ini memilikinya. Di bab pertama rangkaian ini, Ikhtisar HTML, bagian elemen utama memiliki dua subbagian. Dalam daftar isi, yang merupakan daftar yang tidak diurutkan, terdapat daftar yang tidak diurutkan 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>.

Dalam contoh terakhir ini, Anda mungkin telah memperhatikan bahwa role="list" disertakan di <ul>. Sementara peran implisit dari <ul> dan <ol> adalah list, menghapus tampilan daftar dengan CSS, termasuk setelandisplay: grid atau list-style-type: none dapat mengarahkan VoiceOver (pembaca layar iOS dan MacOS) untuk menghapus semantik implisit di Safari. Ini adalah fitur bukan bug. Umumnya, Anda tidak boleh menambahkan atribut peran saat menggunakan elemen semantik karena hal ini tidak diperlukan. Dan biasanya Anda tidak perlu untuk menambahkan satu ke daftar baik, kecuali pengguna benar-benar perlu tahu itu adalah daftar, seperti kapan pengguna akan mendapat manfaat dari mengetahui berapa banyak item dalam daftar.

Daftar deskripsi

Daftar deskripsi adalah elemen daftar deskripsi (<dl>) yang berisi serangkaian (nol atau lebih) istilah deskripsi (<dt>) dan detail deskripsi (<dd>). Nama asli untuk ketiga elemen ini adalah “daftar definisi,” "istilah definisi," dan "definisi definisi." Nama diubah di standar kehidupan.

Mirip dengan daftar yang diurutkan dan tidak diurutkan, keduanya dapat disusun bertingkat. 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 beserta riwayat karier dan cita-citanya. Daftar deskripsi siswa, dilambangkan dengan <dl>, mencakup sekelompok istilah—dalam hal ini, "istilah" adalah nama siswa—ditentukan menggunakan elemen <dt>, beserta deskripsi untuk setiap semester— 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, yang mengapa nama-nama elemen itu dibuat lebih umum.

Saat membuat daftar istilah dan definisi atau deskripsinya, atau daftar pasangan nilai kunci serupa, deskripsi mencantumkan elemen menyediakan semantik yang sesuai. Peran implisit <dt> adalah term dengan listitem menjadi peran lain yang diizinkan. Peran implisit dari <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, kode tersebut menerima peran list dan group.

paling sering Anda akan melihat daftar deskripsi dengan jumlah elemen <dt> dan <dd> yang sama. Tapi 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 minimal satu <dd> yang terkait, dan setiap <dd> memiliki setidaknya satu <dt> terkait. Meskipun Anda dapat menggunakan kombinator seinduk yang berdekatan atau :has() relasional pemilih untuk menargetkan nomor variabel elemen ini dengan CSS, jika diperlukan, Anda dapat menyertakan <div> sebagai turunan dari <dl>, dan induk dari salah satu atau beberapa elemen <dt> atau <dd> (atau keduanya) diizinkan. <dl> sebenarnya dapat memiliki beberapa turunan lain: membuat <div>, <template>, atau <script> bertingkat diizinkan. Tak satu pun dari elemen daftar deskripsi memiliki atribut khusus elemen.

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

Menguji pemahaman Anda

Uji pengetahuan Anda tentang daftar.

Apakah menyertakan <h2> di dalam item daftar valid?

Tidak.

Coba lagi.

Ya.

Benar.

Pilih tiga elemen yang menentukan jenis daftar.

<il>

Coba lagi.

<ol>

Benar.

<ul>

Benar.

<dl>

Benar.