Responsive Advertisement

Cara Membuat List HTML

judul

Pembahasan kali ini adalah tentang membuat list pada HTML. Pada Pembahasan sebelumnya Cara Membuat Judul HTML dapat kalian terapkan untuk membuat judul pada sebuah halaman website. Kali ini List merupakan susunan daftar isi yang digunakan untuk merapihkan atau menyusun daftar nama dan lainnya.

Dalam pembuatan list, ada yang namanya <ul> dan <li>. Sederhananya kedua tag tersebut pada umumnya digunakan untuk menyusun teks dalam website. Jika didefinisikan <ul> atau unorder list dan <li> atau list adalah sebutan dari kedua tag tersebut.

Pilihan dari List ada 4 macam yang diantaranya:
disc, tipe list yang dipakai berbentuk bulat
circle, tipe list yang dipakai berbentuk bulat tetapi kosong ditengah
square, tipe list yang dipakai berbentuk kotak
none, tipe list kosong

Untuk kodingan list sederhananya dapat kamu lihat dibawah ini.

See the Pen List1_materi by lintangzakti (@zakti13) on CodePen.
Kodingan list yang memakai 4 macam list bisa kamu lihat di bawah ini.

See the Pen List2_materi by lintangzakti (@zakti13) on CodePen.

Kodingan diatas merupakan materi list sederhana yang dapat kamu lakukan dengan mudah. Untuk kodingan yang memakai 4 macam list, kodingan tersebut memakai bahasa pemrograman CSS untuk memunculkan 4 macam list tersebut. 

Kali ini, ada tag <ol> atau ordered list yang menggunakan susunan angka, teks, dan romawi. Penggunaan tag <ol> berbeda dengan pemakaian 4 macam list, karena tag <ol> memakai definisi langsung dari HTML dan tidak memakai definisi CSS.

Contoh kodingan bisa kamu lihat dibawah ini.

See the Pen List3_materi by lintangzakti (@zakti13) on CodePen.


Penggunaan tag dan perbedaan list dapat anda pakai untuk kebutuhan masing-masing. Jadi penggunaan tag <ol> adalah untuk menyusun tulisan dalam format angka, teks, dan romawi. Sedangkan tag <ul> biasa digunakan untuk pembuatan susuan default atau untuk hal yang umum.

Jika kalian ingin mencoba, silahkan kalian masukkan kodingan tersebut ke dalam Text Editor lalu Save As dengan format HTML dan nama yang kalian suka. Klik dua kali untuk membuka File tersebut dan lihat hasilnya.