Cara Membuat Daftar/List di HTML

Pada tutorial kali ini kita akan membahasa cara membuat daftar list di html, fungsi daftar atau list ini biasanya mengarah pada pengurutan sebuah teks yang masing-masing teks di dalamnya memiliki point-point tersendiri, sehingga di dibutuhkan pengurutan pada setiap kata, sama halnya seperti daftar isi pada sebuah buku. Sebenarnya tidak ada yang berbeda dengan daftar atau list pada Ms. Word, pada Ms. Word pembuatan daftar atau list memiliki dua tipe, yaitu ordered list dan unordered list, perbedaanya adalah pada ordered list yaitu pengurutan dengan menggunakan angka dan ditulis dengan kode <ol>, sedangkan unordered list dengan menggunakan simbol dan ditulis dengan kode <ul>.

Cara Membuat Daftar List di HTML

Tag list pada html termasuk salah satu tag yang ditulis secara berpasangan yaitu tag pembuka dan tag penutup di gunakan untuk membuat daftar list di html, yaitu tag <ol></ol> atau <ul></ul>, tag tersebut digunakan untuk mendefinisikan tipe pengurutan sedangkan untuk pengurutan teksnya menggunakan tag <li></li> yang di pasang didalam tag pembuka <ol> atau </ul> tergantung daftar tipe apa yang ingin dibuat. Tag seperti ini bisa di sebut nested tag, atau tag bersarang, dimana tag <ol> atau <ul> menjadi kepalanya, sedangkan <li></li> menjadi badannya, tag <ol> atau </ul> ditulis hanya sekali dalam setiap pengurutan daftar, sedangkan tag <li> ditulis berdasarkan jumlah teks yang di ingin di urutkan.

Membuat Daftar/List Angka di HTML

Seperti yang sudah dijelaskan bahwa jika ingin membuat daftar list dengan angka maka menggunakan tag <ol> yaitu tipe ordered list, silahkan buka text editor, lalu ketikan kode html dibawah ini.

<!DOCTYPE html> <html> <head> <title>Membuat daftar/list di HTML</title> </head> <body> <h1>Cara membuat daftar/list di HTML</h1> <ol> <li>Ini adalah contoh daftar ordered list</li> <li>Ini adalah contoh daftar ordered list</li> <li>Ini adalah contoh daftar ordered list</li> <li>Ini adalah contoh daftar ordered list</li> <li>Ini adalah contoh daftar ordered list</li> </ol> </body> </html>
Code language: HTML, XML (xml)

Dari kode di atas maka seharusnya muncul seperti gambar di bawah.

Cara Membuat Daftar/List di HTML

Sebenarnya pada ordered list selain angka anda juga bisa menampilkan tipe pengurutan lainnya, seperti romawi dan lain-lain, caranya hanya dengan menambahkan atribut “type” tanpa tanda kutip, contoh penulis akan menambilkan pengurutan daftar alfabet dengan huruf besar.

<ol type="A"> .... </ol>
Code language: HTML, XML (xml)

Berikut ini adalah tabel tipe-tipe pengurutan yang bisa di gunakan untuk ordered list.

TipeKeterangan
type=”1″Pengurutan menggunakan angka (default)
type=”A”Pengurutan berdasarkan huruf besar
type=”a”Pengurutan berdasarkan huruf kecil
type=”I”Pengurutan menggunakan angka romawi huruf besar
type=”i”Pengurutan menggunakan angka romawi huruf kecil

Membuat Daftar/List Simbol di HTML

Untuk pembuatan daftar list dengan simbol maka menggunakan tag html <ul>, silahkan buka text editor anda lalu ketikan kode html di bawah ini.

<!DOCTYPE html> <html> <head> <title>Membuat daftar/list di HTML</title> </head> <body> <h1>Cara membuat daftar/list di HTML</h1> <ul> <li>Ini adalah contoh daftar unordered list</li> <li>Ini adalah contoh daftar unordered list</li> <li>Ini adalah contoh daftar unordered list</li> <li>Ini adalah contoh daftar unordered list</li> <li>Ini adalah contoh daftar unordered list</li> </ul> </body> </html>
Code language: HTML, XML (xml)

Dari kode html di atas maka seharusnya akan muncul seperti gambar di bawah ini.

Cara Membuat Daftar/List di HTML

Unordered list sebenarnya memiliki tipe-tipe simbol seperti pada ordered list, hanya saja bedanya adalah ordered list menggunakan angka atau alfabet, sedangkan unordered list menggunakan simbol, juga cara penulisan tipe berbeda, apabila ordered list langsung menggunakan tipe maka undered list menggunakan atribut style, atribut ini memungkinkan penulisan kode css langsung ditulis di dalam tag yang bersangkutan tanpa membuat file css lagi, berikut ini contohnya.

<ul style="list-style-type: circle"> .... </ul>
Code language: HTML, XML (xml)

Berikut ini adalah daftar tipe simbol dalam pengurutan menggunakan unordered list.

TipeKeterangan
list-style-type:discPengurutan menggunakan simbol bullets (default)
list-style-type:circlePengurutan menggunakan simbol lingkaran
list-style-type:squarePengurutan menggunakan simbol kotak
list-style-type:noneMenghilangkan simbol pengurutan

Membuat daftar/list bersarang dengan HTML

Selain hanya menambilkan daftar secara vertical, anda juga dapat menampillan daftar bersarang atau nested list, maksudnya ialah dimana setiap item yang muncul pada daftar memiliki daftar anak di bawahnya, berikut ini adalah contoh kode html membuat daftar/list bersarang.

<!DOCTYPE html> <html> <head> <title>Membuat daftar/list bersarang di HTML</title> </head> <body> <h1>Cara membuat daftar/list bersarang di HTML</h1> <ul> <li>Contoh daftar bersarang <ul> <li>Item daftar bersarang</li> <li>Item daftar bersarang</li> <li>Item daftar bersarang</li> </ul> </li> <li>Contoh daftar bersarang <ul> <li>Item daftar bersarang</li> <li>Item daftar bersarang</li> <li>Item daftar bersarang</li> </ul> </li> <li>Contoh daftar bersarang <ul> <li>Item daftar bersarang</li> <li>Item daftar bersarang</li> <li>Item daftar bersarang</li> </ul> </li> </ul> </body> </html>
Code language: HTML, XML (xml)

Dari kode html di atas seharusnya muncul seperti gambar di bawah ini.

Cara Membuat Daftar/List di HTML

Contoh penggunaan daftar bersarang atau nested list di atas hanya menggunakan dua kali, pembaca dapat bereksperimen dengan menampilkan daftar bersarang lebih dari contoh di atas, dan juga silahkan di gabungkan dengan tipe-tipe simbol dari daftar di atas.

Demikian tutorial ini cara membuat daftar list di html, semoga bermanfaat, dan harapan penulis, untuk latihan tidak dengan copy/paste, ketiklah setiap kode diatas agar terbiasa dan hafal dengan sendirinya.

22 Komentar

Andi Khalik

Andi Khalik

Gan pingin nanya kalo misalkan buat daftar isi kaya chord tela ini gmana ?? Misalnya Kita Pilih Label A+B terus muncul semua daftar label A dan B terus kita klik salah satu nama artis itu. misal Bagindas terus muncul semua dafta isi bagindas, itu gmana ya gan makasih sebelumnya. https://uploads.disquscdn.com/images/ebc26662aeb71e353643d217d39bba5fc23d5ba948de15ebcfb5ada01ff7f5ed.png
Rizky

Rizky

Gan Untuk Mengetahui URL Situs Yang Kita Buat Gimana Ya? agar Orang Orang Bisa Mengunjungi Situs Kita
Balas #160
Aris Munandar

Aris Munandar

@Rizky
Kalau itu ranahnya SEO mas, hal pertama yang mesti kita lakukan setelah membuat blog/website yaitu mendaftarkan website tersebut ke mesin pencari seperti google dengan menggunakan google webmaster tools agar lebih cepat terdeteksi mesin pencari.
Balas #161
suryo

suryo

min say amau tanya, saya mau membuat semacam katalog file database komputer. apakah bisa dilakukan dengan html? contohnya gini: di kantor saya database jaringan tidak tertata rapi dan saya ingin membuat katalognya dalam satu halaman yang bisa link ke folder2 tsb, seperti excel itu yang bisa hyperlink ke folder/file path. apakah ada saran, jika bisa dilakukan dengan html gmn caranya ya me-link-an folder/file tsb terimkasih.
Balas #164
Aris Munandar

Aris Munandar

@suryo
Mungkin maksud mas adalah file manager? kalau dijaringan mungkin bisa pakai fitur sharing, atau bisa cari file manager di google yang support untuk jaringan.
Balas #165
suryo

suryo

@Aris Munandar
tujuan saya membuat daftar/katalog file nya sehingga bisa hyperlink ke folder2 tsb. apakah html bisa menghandle nya? seperti di excel yang bisa buka folder path gitu via hyperlink
Balas #166
Aris Munandar

Aris Munandar

@suryo
kalau hanya untuk membuat hyperlink ke file2 tertentu, tentu saja bisa mas, tinggal urlnya saja diarahkan ke folder file tersebut.
Balas #167
suryo

suryo

@Aris Munandar
apakah bisa dibantu contoh scriptnya seperti apa,sy br bljr html dan sdh mencari gmn caranya blm ketemu terimakasih
Balas #168
Aris Munandar

Aris Munandar

@suryo
Balas #169
suryo

suryo

@Aris Munandar
misal saya punya file di "C:\Users\pool pmnp\Videos" apakah saya bisa membuat hyperlink untuk folder tsb?
Balas #170
Anonim

Anonim

@Aris Munandar
Mas cara biar daftar nya landscape / horizontal gimana ya?
Balas #200
Aris Munandar, S.Kom.

Aris Munandar, S.Kom.

@Anonim
Gunakan position: left; atau display: inline-block; di css untuk horizontal list.
Balas #201
Anonim

Anonim

@Anonim
Makasih mas, mantap
Balas #202
sakura

sakura

makasi banyak gan, saya baru mulai belajar bikin blogger, sangat membantu saya tips nya kunjung balik ya gan
Balas #177
Aris Munandar

Aris Munandar

@sakura
Terima kasih kembali.. semoga bermanfaat.
Balas #178
Muhammad Rafif Nugroho

Muhammad Rafif Nugroho

bagaimana cara memilih jenis list yang digunakan agar tepat dalam penggunaannya?
Balas #196
Muhammad Rafif Nugroho

Muhammad Rafif Nugroho

List ada 2 jenis, ordered list dan unordered list. Menurut Anda bagaimana cara memilih jenis list yang digunakan agar tepat dalam penggunaannya?
Balas #197
Aris Munandar, S.Kom.

Aris Munandar, S.Kom.

@Muhammad Rafif Nugroho
gunakan ordered list untuk daftar yang berurutan misalnya pada Rukun Iman, dimana memiliki urutan pasti 1-6, sedangkan unordered list bisa digunakan untuk daftar yang tidak berurutan sebagai contoh jenis-jenis kuliner, jenis-jenis kuliner ini kita tidak bisa pastikan mana urutan yang benar karna memang tidak ada keharusan untuk mengurutkan mana yang utama, kurang lebih seperti itu.
Balas #198
kevin

kevin

Gan bagaimana agar list nya sejajjar dengan paragraf
Balas #1969
Aris Munandar

Aris Munandar

@kevin
tambahkan css ini (padding: 0; margin: 0;) di ul/ol
Balas #1972
supar

supar

bismillah, terimakasih mas... jadi tambah ilmu nih
Balas #2706
Aris Munandar

Aris Munandar

@supar
sama-sama mas dan semoga bermanfaat.
Balas #2720
Terima kasih telah memilih untuk meninggalkan komentar. Harap diingat bahwa semua komentar dimoderasi sesuai dengan kebijakan, dan informasi anda TIDAK akan dipublikasikan. Harap JANGAN gunakan kata kunci di kolom nama. Mari kita buat diskusi yang menarik dan bermakna.

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.