Membuat List di HTML

Saat belajar HTML pasti mengalami yang namanya kendala, salah satu contohnya adalah membuat list dalam HTML.

Bagaimana kamu membuat list HTML?

Mungkin kamu membuatnya seperti di bawah ini:

<h1>Daftar yang dibeli bulan ini:</h1>
<p>- Sabun</p>
<p>- Mouse</p>
<p>- Buku</p>

Hasilnya di bawah ini:

Daftar yang dibeli bulan ini:
- Sabun
- Mouse
- Buku

Bagaimana hasilnya?
Memang terlihat seperti daftar list pada umumnya, tapi itu bukanlah cara yang tepat dalam membuat list di HTML.

Berikut penjabaran tentang:

Element list di dalam HTML

HTML menyediakan element untuk membuat list. Ada tiga macam jenis list yang akan dibahas kali ini

1. Ordered List adalah list yang terurut;
2. Unordered List adalah list yang tak terurut;
3. Descriptiona List adalah list yang berisi definisi.

Kita bahas satu persatu yaa...

1. Order List

Ordered list dibuat dengan tag pembuka <ol> dan tag penutup </ol>.
Lalu di dalamnya diisi dengan item-item yang akan berubah ke bentuk susunan terurut.
Item dibuat dengan tag pembuka <li> dan tag penutup </li> (list item).

Berikut contohnya:

<h1>Daftar buku bulan ini:</h1>
    <ol>
  		
<li>Bumi</li>
    	
<li>Bulan</li>
    	
<li>Matahari</li>
		
</ol>

Hasilnya di bawah ini:

Daftar buku bulan ini:

1. Bumi
2. Bulan
3. Matahari

Pada hasil di atas berdasarkan angka dari 1, 2, dan 3.

Lalu bagaimana jika ingin menggunakan huruf a, b, dan c atau angka romawi I, II, dan III?

Untuk membuat seperti itu, bisa menggunakan atribut type pada tag ol dan berikut nilai yang bisa diberikan:

• a untuk alfabet a, b, c, dan seterusnya;
• A untuk alfabet A, B, C, dan seterusnya;
• i untuk angka romawi i, ii, iii, dan seterusnya;
• I untuk angka romawi I, II, III, dan seterusnya.

Contoh sebagai berikut:

<h1>List dengan alfabet kecil</h1>
		<ol type='a'>
				<li>Bumi</li>
				<li>Bulan</li>
				<li>Matahari</li>
    </ol>
<h1>List dengan alfabet besar</h1>
		<ol type='A'>
				<li>Bumi</li>
				<li>Bulan</li>
				<li>Matahari</li>
    </ol>
<h1>List dengan type romawi kecil</h1>
		<ol type='i'>
				<li>Bumi</li>
				<li>Bulan</li>
				<li>Matahari</li>
    </ol>
<h1>List dengan type romawi besar</h1>
		<ol type='I'>
				<li>Bumi</li>
				<li>Bulan</li>
				<li>Matahari</li>
    </ol>

Hasilnya di bawah ini:

List dengan alfabet kecil

1. Bumi
2. Bulan
3. Matahari

List dengan alfabet besar

1. Bumi
2. Bulan
3. Matahari

List dengan type romawi kecil

1. Bumi
2. Bulan
3. Matahari

List dengan type romawi besar

1. Bumi
2. Bulan
3. Matahari

2. Unorder List

Unorder list adalah list tak terurut yang menggunakan simbol pada itemnya, codenya hampir mirip dengan pembahasan di atas.
Perbedaannya ada di <ul> untuk tag pembuka dan tag penutup </ul>, untuk item sama dengan pembahasan di atas, Item dibuat dengan tag pembuka <li> dan tag penutup </li>.

Berikut contohnya:

<h1>Daftar buku bulan ini:</h1>
    <ul>
  		
<li>Bintang</li>
    	
<li>Ceros dan Batozar</li>
    	
<li>Komet</li>
		
</ul>

Hasilnya di bawah ini:

Daftar buku bulan ini:

• Bintang
• Ceros dan Batozar
• Komet

Simbol bawaan atau default yang digunakan adalah lingkaran kecil (disc) dan kita juga bisa menggantinya dengan atribut type seperti pembahasan di atas.

Berikut nilai yang bisa dimasukkan ke atribut type:

• square menjadi simbol persegi;
• disc (default) menjadi simbol lingkaran disc;
• none tidak memakai simbol;
• circle menjadi simbol lingkaran.

Contoh sebagai berikut:

<h1>Daftar buku bulan ini:</h1>
		<ul type='square'>
				<li>Bintang</li>
				<li>Ceros dan Batozar</li>
				<li>Komet</li>
    </ul>
<h1>Daftar buku bulan ini:</h1>
		<ul type='disc'>
				<li>Komet Minor</li>
				<li>Selena</li>
				<li>Nebula</li>
    </ul>
<h1>Daftar buku bulan ini:</h1>
		<ul type='none'>
				<li>Si Putih</li>
				<li>Lumpu</li>
				<li>Bibi Gili</li>
    </ul>
<h1>Daftar buku bulan ini:</h1>
		<ul type='circle'>
				<li>Sagaras</li>
				<li>HTML</li>
				<li>CSS</li>
    </ul>

Hasilnya di bawah ini:

Daftar buku bulan ini:

• Bintang
• Ceros dan Batozar
• Komet

Daftar buku bulan ini:

• Komet Minor
• Selena
• Nebula

Daftar buku bulan ini:

• Si Putih
• Lumpu
• Bibi Gili

Daftar buku bulan ini:

• Sagaras
• HTML
• CSS

Selain menggunakan type, kita juga bisa menggunakan gambar.

List ini menggunakan style CSS.

Contoh sebagai berikut:

<h1>Daftar buku bulan ini:</h1>
		<ul style='list-style-image: url(https://assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico)'>
				<li>Bumi</li>
				<li>Bulan</li>
				<li>Matahari</li>
    </ul>

Hasilnya di bawah ini:

Daftar buku bulan ini:

• Bumi
• Bulan
• Matahari

3. Description List

Description list adalah list yang berisi penjelasan atau deskripsi dari sesuatu.

Ada tiga tag yang digunakan untuk membuat description list, berikut penjabaran singkatnya:

• <dl> (description list) tag untuk memulai description list dan ditutup dengan </dl>;
• <dt> (description term) tag untuk membuat kata yang akan dideskripsikan atau topik utama dan ditutup dengan </dt>;
• <dd> (description) tag untuk membuat penjelasan dari topik utama atau deskripsi dari kalimat yang ditulis dan ditutup dengan </dd>;

Berikut contohnya:

<h1>Daftar buku bulan ini:</h1>
	<dl>
		<dt>Bumi</dt>
			<dd>Novel "Bumi", Novel ini mengisahkan tentang petualangan 3 remaja yang berusia 15 tahun bernama Raib, Ali dan Seli. Namun mereka bukanlah remaja biasa, melainkan remaja yang memiliki kekuatan khusus seperti Raib yang bisa menghilang, Seli yang bisa mengeluarkan petir dan Ali seorang pelajar yang sangat jenius.</dd>
		<dt>Bulan</dt>
			<dd>Novel "Bulan", Masih menceritakan petualangan dari tiga sekawan, pada novel Bulan ini dikisahkan Ali, Seli, dan Raib yang dibawa oleh Miss Selena dan Av untuk melakukan diplomasi di Klan Matahari. Tujuannya adalah untuk membuka portal atau gerbang yang sudah ribuan tahun lamanya ditutup.</dd>
		<dt>Matahari</dt>
			<dd>Novel "Matahari", Cerita ini dibuka dengan suasana duka yang menyelimuti Raib, Seli, dan Ali atas tewasnya Ily saat pertarungan di klan Matahari (di novel sebelumnya). Para ksatria dari klan Bulan pun turut merasakan yang sama, hingga membuat Miss Selena tak dapat pulang ke klan Bumi.</dd>
	</dl>

Hasilnya di bawah ini:

Daftar buku bulan ini:

Bumi

Novel "Bumi", Novel ini mengisahkan tentang petualangan 3 remaja yang berusia 15 tahun bernama Raib, Ali dan Seli. Namun mereka bukanlah remaja biasa, melainkan remaja yang memiliki kekuatan khusus seperti Raib yang bisa menghilang, Seli yang bisa mengeluarkan petir dan Ali seorang pelajar yang sangat jenius.

Bulan

Novel "Bulan", Masih menceritakan petualangan dari tiga sekawan, pada novel Bulan ini dikisahkan Ali, Seli, dan Raib yang dibawa oleh Miss Selena dan Av untuk melakukan diplomasi di Klan Matahari. Tujuannya adalah untuk membuka portal atau gerbang yang sudah ribuan tahun lamanya ditutup.

Matahari

Novel "Matahari", Cerita ini dibuka dengan suasana duka yang menyelimuti Raib, Seli, dan Ali atas tewasnya Ily saat pertarungan di klan Matahari (di novel sebelumnya). Para ksatria dari klan Bulan pun turut merasakan yang sama, hingga membuat Miss Selena tak dapat pulang ke klan Bumi.

Untuk tambahan ada satu lagi yang bernama:

4. List di dalam List (Nested List)

List dapat dibuat di dalam list, contohnya kita ingin menggabungkan Ordered List dengan Unordered List.

Caranya, list yang di dalam ditulis di dalam tag <li>.

Bingung?

Berikut contohnya di bawah ini:

<h1>Detail buku tahun ini:</h1>
	<ol>
		<li>Bulan Januari
			<ul>
				<li>Bumi</li>
				<li>Bulan</li>
			</ul>       
		</li>
		<li>Bulan Februari
			<ul>
				<li>Matahari</li>
				<li>Bintang</li>
			</ul>
		</li>
		<li>Bulan Maret?</li>
	</ol>

Hasilnya di bawah ini:

Detail buku tahun ini:

1. Bulan Januari
   • Bumi
   • Bulan
2. Bulan Februari
   • Matahari
   • Bintang
3. Bulan Maret?

Bagaimana hasilnya dalam membuat list di HTML? Jika ingin lancar dalam menggunakan list, silakan latihan terus yaa...

Sekian postingan tentang list, semoga bermanfaat untuk kita semua.
Terima kasih.

Referensi:
https://www.petanikode.com/html-list/