List merupakan sebuah daftar yang sering digunakan dalam penulisan HTML. Ada tiga jenis list yang bisa dibuat di HTML, yaitu :
- Ordered List adalah list yang berurutan
- Unordered List adalah list tidak berurutan
- Description List adalah list yang berisi definisi.
Elemen untuk membuat list sudah disediakan HTML. Berdasarkan dari jenis-jenis List, maka cara membuat list di html juga akan berbeda-beda, Mari kita bahas satu-persatu.
Ordered List di HTML
Ordered list adalah list angka/nomor yang dibuat menggunakan tag <ol> dan diisi dengan item-item yang akan dimasukkan ke dalam list menggunakan tag <li>.
Cara penulisannya adalah sebagai berikut :
<ol>
<li>item</li>
</ol>
Keterangan :
- <ol> tag pembuka ordered list
- <li> tag pembuka item
- </li> tag penutup item
- </ol> tag penutup ordered list
Atribut Ordered List
Penggunaan atribut pada ordered list terbagi menjadi 3 kelompok, yaitu :
- Atribut type
- Atribut Start
- Atribut reversed
Atribut type
Atribut type digunakan untuk mengubah jenis pengurutannya (angka,huruf,romawi). Berikut Atribut type yang sering digunakan pada ordered list di HTML
- type=”1″ Untuk pengurutan dengan angka
- type=”a” Untuk pengurutan alfabet a, b, c, dan seterusnya;
- type=”A” Untuk pengurutan alfabet kapital A, B, C, dan seterusnya;
- type=”i” Untuk pengurutan angka romawi i, ii, iii, dan seterusnya;
- type=”I” Untuk pengurutan angka romawi kapital I, II, III, dan seterusnya.
Atribut Start
Secara default, pengurutan dari ordered list dimulai dari angka satu (1). Namun kita mengubah urutannya sesuai yang diinginkan dengan menggunakan atribut start. Contoh jika kita ingin memulai dari angka 3, maka cara penulisannya adalah :
<ol start=”3″>
Atribut reversed
Digunakan untuk mengubah urutan list dari yang terbesar ke yang terkecil. Kita tidak perlu memberikan nilai (value) pada atribut ini. Cara penulisannya hanya perlu menambahkan reversed pada tag pembuka ol.
<ol reversed>
Cara Membuat Ordered List
Berikut ini merupakan contoh penggunaan Atribut type, Start, reversed dalam membuat Ordered List :
<!DOCTYPE html>
<html>
<head>
<title>Ordered List di HTML</title>
</head>
<body>
<p>List dengan Atribut type angka</p>
<ol>
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
</ol>
<p>List dengan Atribut type alfabet</p>
<ol type='a'>
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
</ol>
<p>List dengan Atribut type kapital</p>
<ol type='A'>
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTMLL</li>
<li>Cara Membuat List di HTML</li>
</ol>
<p>List dengan Atribut type romawi</p>
<ol type='i'>
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
</ol>
<p>List dengan Atribut type romawi kapital</p>
<ol type='I'>
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
</ol>
<p>List dengan atribut start</p>
<ol start="3">
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
</ol>
<p>List dengan atribut reversed</p>
<ol reversed>
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
</ol>
</body>
</html>
Hasil tampilannya dibrowser :
Unordered List di HTML
Unordered list adalah kebalikan dari Ordered List, yaitu list yang tidak berurutan yang tampilannya menggunakan simbol-simbol. Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil. Dari cara penulisannya, Unordered list dibuat dengan tag <ul> dan <li> untuk item-nya.
Ada 2 atribut khusus yang biasanya digunakan pada Unordered list yaitu atribut type dan compact. Tapi, untuk versi HTML5 atribut tersebut sudah tidak disupport. Atribut type digunakan untuk merubah jenis symbol, sedangkan atribut compact digunakan untuk menampilkan ukuran lebih kecil.
Berikut ini nilai yang bisa diberikan untuk atribut type:
- square untuk simbol persegi;
- disc (default) untuk simbol lingkaran disc;
- none tidak memakai simbol;
- circle untuk simbol lingkaran;
Untuk sekedar pengetahuan, saya akan tetap memberikan contoh penggunaan Unordered list pada Atribut type.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Unordered List di HTML</title>
</head>
<body>
<p>none tidak memakai simbol </p>
<ul type="none">
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
</ul>
<p>square untuk simbol persegi</p>
<ul type="square">
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
</ul>
<p>circle untuk simbol lingkaran </p>
<ul type="circle">
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
</ul>
<p>disc (default) untuk simbol lingkaran disc </p>
<ul type="disc">
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
</ul>
</body>
</html>
Hasil tampilannya dibrowser :
Description List pada HTML
Description List adalah list yang berisi deksripsi atau penjelasan. Adapun penulisan dari description list, kita membutuhkan 3 tag HTML, yaitu :
- Tag <dl> digunakan untuk mendefinisikan bahwa kode tersebut adalah list deskripsi.
- Tag <dt> digunakan untuk membuat kata yang akan dideskripsikan;
- Tag <dd> digunakan untuk untuk membuat penjelasan dari kata.
Contoh:
<html>
<head>
<title>Description List Di HTML </title>
</head>
<body>
<h2>Atribut List Di HTML</h2>
<dl>
<dt>Atribut type</dt>
<dd>Mengubah jenis pengurutan List (angka,huruf,romawi).</dd>
<dt>Atribut Start</dt>
<dd>Mengubah urutan List sesuai yang diinginkan .</dd>
<dt>Atribut reversed</dt>
<dd>mengubah urutan list dari yang terbesar ke yang terkecil</dd>
</dl>
</body>
</html>
Hasil tampilannya dibrowser :
List di dalam List (Nested List)
List juga dapat dibuat di dalam list, misalkan kita ingin menggabungkan ordered list dengan unordered list. Caranya, list yang di dalam ditulis di dalam tag <li>.
Contoh:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>List di dalam List</title>
</head>
<body>
<h1>Jenis-jenis Handphone beserta tipenya</h1>
<ol>
<li>Samsung
<ul>
<li>Seri A</li>
<li>Seri M</li>
<li>Note</li>
</ul>
</li>
<li>Vivo
<ul>
<li>Seri Y</li>
<li>Seri V</li>
<li>Seri T</li>
</ul>
</li>
<li>iPhone
<ul>
<li>iPhone SE</li>
<li>iPhone 13</li>
<li>iPhone 12</li>
</ul>
</li>
</ol>
</body>
</html>
Hasil tampilannya dibrowser :
Membuat List HTML dengan style CSS
Selain menggunakan atribut, kita juga bisa menggunakan gambar untuk membuat List dengan menggunakan style CSS.
Contohnya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>List HTML dengan style CSS</title>
</head>
<body>
<h1>List HTML dengan style CSS</h1>
<ul style="list-style-image: url(https://praktekotodidak.com/wp-content/uploads/2022/07/favicon-16x16-1.png)">
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
<li>Cara Membuat List di HTML</li>
</ul>
</body>
</html>
Hasil tampilannya dibrowser :
Begitulah cara membuat List di HTML. Baca juga artikel selanjutnya yaitu : Belajar HTML#10 – Cara Membuat Form pada HTML
