Ada beberapa jenis daftar dalam HTML. Pertama-tama, ada daftar bercorak. Pada jenis daftar ini, entri daftar individu dilengkapi dengan tanda bercorak, yang disebut Bullet.
Daftar bercorak diawali dengan elemen ul. Entri daftar individunya ditandai dengan elemen li.
<p>Topik Terbaru dari Forum</p> <ul> <li>CSS tidak dilanjutkan</li> <li> Showroom Gaya Hollywood era 40an</li> <li>CSS dropdown</li> <li>Koneksi/Putuskan PHP</li> <li>Showroom Saya yang Kecil - Pemula meminta tips!</li> </ul>
Berikut adalah tampilan hasilnya di browser:
Sebuah tanda bercorak ditambahkan sebelum setiap entri. Bagaimana tampilan standarnya ditentukan oleh browser. Meskipun terdapat atribut yang memungkinkan pengaruh terhadap tampilan daftar, saat ini sebaiknya tidak digunakan lagi. Sebagai gantinya, gunakan properti CSS.
Daftar bercorak juga dapat bersarang. Pertama-tama, lihatlah gambar berikut:
Di sini diklarifikasi tentang pembungkusannya.
Sintaksnya adalah sebagai berikut:
<ul>
<li>Tutorial
<ul>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ul>
</li>
<li>Videotraining
<ul>
<li>3D</li>
<li>Desain Media</li>
<li>Web</li>
</ul>
</li>
<li>Tips</li>
<li>Toko</li>
</ul>
Dalam satu entri daftar, dapat ada daftar lain. Pada kenyataannya, tidak selalu harus berupa daftar bercorak. Sebenarnya, jenis daftar lainnya juga dapat dimasukkan - yang akan dijelaskan dalam tutorial ini.
Seperti yang terlihat di HTML5, penutup </li> tidaklah wajib. Namun, demi kejelasan, sebaiknya selalu ditutup. Secara syntax akan tetap benar meskipun hanya seperti berikut:
<p>Topik Terbaru dari Forum</p> <ul> <li>CSS tidak dilanjutkan <li> Showroom Gaya Hollywood era 40an <li>CSS dropdown <li>Koneksi/Putuskan PHP <li>Showroom Saya yang Kecil - Pemula meminta tips! </ul>
Daftar Berangka
Selain daftar bercorak, juga dapat ditentukan daftar berangka. Juga di sini terdapat contoh, yang menunjukkan apa sebenarnya yang dimaksud dengan daftar berangka.
Jadi, angka yang berlanjut disisipkan sebelum entri daftar. Daftar berangka diawali dengan elemen ol.
Contoh berikut menunjukkan bagaimana elemen ini digunakan.
<ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>XML</li> </ol>
Seperti daftar bercorak, entri individu ditandai dengan elemen li.
Pada teori, daftar bercorak juga dapat disarikan.
<ol>
<li>Tutorial
<ol>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ol>
</li>
<li>Videotraining
<ol>
<li>3D</li>
<li>Desain Media</li>
<li>Web</li>
</ol>
</li>
<li>Tips</li>
<li>Toko</li>
</ol>Namun, hasilnya di browser kurang memuaskan.
Sehingga, tidak akan tercapai tatanan berikut ini:
1. Tutorial 2D
1.1 3D
1.2 Web
- Videotraining 3D
2.1 Desain Media
2.2 Web - Tips
- Toko
Sesuatu seperti ini tidak mungkin dilakukan dengan HTML murni. Sebenarnya, perlu menggunakan CSS untuk memberi nomor secara otomatis sesuai skema tersebut.
Daftar Definisi
Jenis daftar lainnya adalah daftar definisi. Juga di sini, terdapat contoh untuk menunjukkan bagaimana akhirnya daftar semacam itu terlihat di browser:
Daftar definisi digunakan terutama untuk glossary. Berikut adalah sintaks yang menghasilkan tampilan yang telah ditunjukkan sebelumnya:
<dl>
<dt>AM</dt>
<dd>AM - Air Mail</dd>
<dd>AM - Air Marshal</dd>
<dd>AM - Amberg</dd>
<dd>AM - Americium</dd>
<dd>AM - Amstetten</dd>
<dt>AN</dt>
<dd>AN - above named</dd>
<dd>AN - Access Node</dd>
<dd>AN - Ancona</dd>
</dl>Di dalam daftar definisi, selalu terdapat tiga elemen. Daftar-denda tersebut diawali dengan elemen dl. Ini adalah struktur luar. Istilah yang akan didefinisikan ditandai dengan elemen dt. Ini pada akhirnya adalah pengertian dari definisi. Deskripsi definisi yang sesuai kemudian diberikan melalui elemen dd.
Penanaman daftar definisi bersarang juga memungkinkan. Ini akan berfungsi sama seperti yang telah ditunjukkan oleh varian-varian daftar lainnya.
Tampilan standar daftar definisi ditentukan oleh browser. Pada akhirnya, Anda dapat mengatur tata letak yang diinginkan sendiri melalui CSS.
Pada versi-versi HTML sebelumnya, terdapat pula daftar menu dan direktori. Untuk keperluan tersebut, digunakan kedua elemen menu dan dir. Elemen dir tidak lagi termasuk dalam HTML5. Berbeda halnya dengan elemen menu. Elemen ini diimplementasikan kembali dan nantinya dapat digunakan untuk menu konteks dan toolbar. Berikut adalah contoh bagaimana W3C membayangkan penggunaan menu secara tipikal:
<menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="fnew()">New...</button> <button type="button" onclick="fopen()">Open...</button> <button type="button" onclick="fsave()">Save</button> <button type="button" onclick="fsaveas()">Save as...</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="ecopy()">Copy</button> <button type="button" onclick="ecut()">Cut</button> <button type="button" onclick="epaste()">Paste</button> </menu> </li> <li> <menu label="Help"> <li><a href="help.html">Help</a></li> <li><a href="about.html">About</a></li> </menu> </li> </menu>
Saat ini, hal ini belum didukung oleh browser apa pun dalam bentuk ini.
Karenanya, menu pada saat ini sebaiknya juga tidak digunakan.
Mempercantik Daftar
Satu catatan lagi mengenai daftar. Pada banyak situs web, penataan daftar menggunakan atribut HTML yang sesuai. Misalnya, dengan <ul type="square">, kita dapat membuat kotak-kotak muncul sebelum entri dalam daftar bercorak.
Demikian pula, untuk daftar berangka kita dapat menetapkan jenis penomoran yang diinginkan.
<ol type="A">
Namun perlu diingat, tidak semua hal yang ditawarkan harus digunakan. Lebih baik menggunakan properti-properti CSS yang sesuai. Sebagai gantinya, Anda sebaiknya benar-benar menggunakannya untuk menyesuaikan daftar sesuai keinginan Anda. Informasi detail mengenai CSS akan dijelaskan dalam rangkaian ini nanti.
