Daftar deskripsi menyediakan cara semantik untuk menyusun dan menyajikan informasi yang menciptakan hubungan antara istilah dan deskripsi yang sesuai. Itu membuat data atau informasi lebih mudah diakses dan dimengerti. Pembuat dapat menggunakan daftar deskripsi di tempat-tempat seperti glosarium, kamus, bagian FAQ, Spesifikasi produk, dll. Artikel ini menunjukkan prosedur untuk menggunakan daftar deskripsi dalam HTML.
Bagaimana Cara Menggunakan Daftar Deskripsi dalam HTML?
Daftar deskripsi terdiri dari “ ”, “ ', Dan ' ” tag dan digunakan untuk mewakili kumpulan istilah dan definisi yang sesuai. Ini menyajikan/menampilkan konten dalam bentuk terstruktur di mana deskripsi melampaui daftar poin-poin sederhana. Properti CSS juga dapat diterapkan ke daftar deskripsi untuk membuat antarmuka yang menarik secara visual.
Kunjungi cuplikan kode di bawah ini untuk membuat daftar deskripsi dalam HTML:
< tubuh >
< div >
< h2 > Pangsa Pasar Laptop h2 >
< dl >
< dt > Hp dt >
< DD > Dalam kategori Sistem Desktop dan laptop memiliki andil sebesar 30 % DD >
< dt > Dell dt >
< DD > Dalam kategori Sistem Desktop dan laptop memiliki andil sebesar 24 % DD >
< dt > lenovo dt >
< DD > Dalam kategori Sistem Desktop dan laptop memiliki andil sebesar 14 % DD >
dl >
div >
tubuh >
Penjelasan potongan kode di atas:
-
- Awalnya orang tua “ div ” elemen telah dibuat yang berfungsi seperti wadah untuk elemen daftar deskripsi dan elemen HTML lainnya seperti “ ”.
- Selanjutnya, daftar deskripsi “
- Kemudian, deskripsi nama/istilah “ ” tag digunakan untuk mendefinisikan deskripsi item yang deskripsinya akan ditambahkan.
- Setelah itu, deskripsi data “ ” disisipkan tag yang berisi deskripsi/informasi yang berkaitan dengan item deskripsi.
Setelah fase kompilasi berakhir, elemen HTML muncul di halaman web seperti ini:
Output menunjukkan bahwa daftar deskripsi telah dibuat.
Contoh 1: Tetapkan Beberapa Deskripsi ke Istilah Tunggal
Tabel deskripsi dapat dibuat di mana ada lebih dari satu deskripsi untuk satu istilah. Ini bisa sangat berguna jika ada lebih dari satu arti atau metode dimana istilah deskripsi dapat dijelaskan.
Kode untuk skenario di atas ditunjukkan di bawah ini:
< div >< h2 > Pangsa Pasar Laptop h2 >
< dl >
< dt > Hp dt >
< DD > Dalam kategori Sistem Desktop dan laptop memiliki andil sebesar 30 % di dalam 2018 DD >
< DD > Dalam kategori Sistem Desktop dan laptop memiliki andil sebesar 23 % di dalam 2017 DD >
< dt > Dell dt >
< DD > Dalam kategori Sistem Desktop dan laptop memiliki andil sebesar 24 % di dalam 2018 DD >
< DD > Dalam kategori Sistem Desktop dan laptop memiliki andil sebesar 27 % di dalam 2017 DD >
< dt > lenovo dt >
< DD > Dalam kategori Sistem Desktop dan laptop memiliki andil sebesar 14 % di dalam 2018 Dan 9 % di dalam 2017 DD >
dl >
div >
Dalam kode di atas:
-
- Pertama, daftar deskripsi dibuat dengan bantuan “ dl ”, “ dt ' Dan ' DD ” elemen.
- Selanjutnya, banyak “ ” tag digunakan di bawah satu “ dt ” elemen. Ini memberikan beberapa deskripsi untuk satu istilah.
Setelah fase kompilasi:
Output menunjukkan bahwa banyak deskripsi telah ditambahkan untuk satu istilah.
Contoh 2: Tetapkan Beberapa Istilah ke Deskripsi Tunggal
Pengembang juga dapat membuat daftar deskripsi yang terdiri dari beberapa istilah deskripsi dengan data deskripsi tunggal. Ini sangat berguna ketika beberapa istilah serupa atau memiliki fungsi yang sama. Dengan menggunakan teknik ini, semua istilah ini dapat dijelaskan sekaligus:
< div gaya = 'margin: 20px' >< h2 > Pangsa Pasar Laptop h2 >
< dl >
< dt > Hp dt >
< dt > EliteBook dt >
< dt > proBook dt >
< DD > Dalam kategori Sistem Desktop dan laptop memiliki andil sebesar 30 % di dalam 2018 DD >
< DD > Dalam kategori Sistem Desktop dan laptop memiliki andil sebesar 23 % di dalam 2017 DD >
< dt > lenovo dt >
< DD > Dalam kategori Sistem Desktop dan laptop memiliki andil sebesar 14 % di dalam 2018 Dan 9 % di dalam 2017 DD >
dl >
div >
Di blok kode di atas, daftar deskripsi dibuat, dan beberapa “ ” tag digunakan dengan satu “ ” tag.
Setelah akhir fase kompilasi:
Cuplikan di atas menunjukkan bahwa beberapa istilah ditetapkan dengan data deskripsi tunggal.
Kesimpulan
Daftar deskripsi dibuat menggunakan daftar deskripsi “ ” yang membuat wadah untuk item daftar dan deskripsinya. Selanjutnya, “ ” Tag menunjukkan nama item yang deskripsinya akan diberikan. Selagi ' ” tag menyimpan deskripsi yang sesuai. Artikel ini telah menunjukkan penggunaan daftar deskripsi dalam HTML.