Apa itu list ?
List adalah salah satu elemen HTML yang digunakan untuk mengelompokkan informasi terkait sehingga menjadi kait mengait satu sama lain dan memudahkan untuk dibaca. Dalam pengembangan web modern, list adalah elemen yang sering digunakan untuk design navigasi.
List bagus dari sudut pandang struktural karena membantu membuat dokumen yang terstruktur dengan baik dan lebih mudah diakses. List juga mempunyai nilai semantik didalamnya.
Jenis-jenis list
Didalam HTML terdapat tiga jenis gaya list yang berbeda dan mempunyai nilai makna semantik didalamnya. Berikut tiga jenis list yang bisa Anda pilih:
- Unordered list (
<ul>
) – list item ditandai dengan peluru - Ordered list (
<ol>
) – list item ditandai dengan nomor - Definition list (
<dl>
) – list item dengan deskripsi setiap list
Selain tiga jenis list yang tersedia dalam HTML, ada beberapa cara untuk mengatur gaya list ini dengan CSS. Misalnya, kita dapat memilih jenis penanda yang akan digunakan pada list. Penanda bisa berbentuk persegi, bulat, numerik, abjad, atau mungkin tidak ada.
Bukan hanya itu, Anda juga bisa menentukan apakah list harus ditampilkan secara vertikal atau horizontal. Semua pilihan ini memainkan peran penting dalam design halaman web.
Mengatur style list
Secara default, list dalam ordered list ditandai sebagai nomor ( 1, 2, 3 dll. ), sedangkan list dalam unordered list ditandai sebagai peluru. Namun, dengan properti list-style-type
Anda bisa mengatur atau mengganti penanda type listnya.
Kemungkinan nilai untuk properti ini adalah: circle
, square
, upper-roman
, lower-alpha
dll.
Contohnya:
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
Hasilnya:
- Contoh list circle
- Contoh list square
- Contoh list upper-roman
- Contoh list lower-alpha
Anda bisa menggunakan properti list-style-type:none
untuk menghapus list style bawaan <ol>
atau <ul>
.
Posisi List Marker
Property list-style-positon
menentukan posisi dari marker. Nilainya bisa outside
atau inside
.
Contohnya:
List Position Outside
- Coffee - A brewed drink prepared from roasted coffee beans...
- Tea
- Coca-cola
List Position Inside
- Coffee - A brewed drink prepared from roasted coffee beans...
- Tea
- Coca-cola
List Shorthand
Dengan list shorthand kita bisa mempersingkat penulisan property list.
Contohnya:
ul {
list-style: square inside url("sqpurple.gif");
}
Ketika menggunakan shorthand propery, susunan dari nilai adalah:
list-style-type
list-style-position
list-style-image
Jika salah satu value tidak ditentukan, maka akan menggunakan value defaultnya.
Nah itulah pembahasan tentang properti list dalam css. Semoga artikel ini bisa membuat kamu lebih mengerti tentang list dalam css.
Kunjungi artikel tentang css lainnya di link berikut: Belajar CSS