Apa itu tag list HTML?

Question

Langkah berikutnya yang akan kita pelajari dalam tutorial belajar HTML dasar adalah cara membuat daftar/list di HTML. Untuk menampilkan sebuah text sebagai daftar/list, HTML menyediakan Tag <ol>, <ul> dan <li>.

Table of Contents Show

Cara Membuat Daftar/List di HTML
Mengenal Macam Elemen List
Ordered List
Unordered List
Description List
List Bersarang
List dalam HTML ada berapa?
Apa fungsi ul dan li pada HTML?
Apa fungsi tag ul?
Apa yang dimaksud dengan definition list?

Cara Membuat Daftar/List di HTML

Dalam HTML, tag list terdiri dari 2 jenis, ordered list (berurutan) dan unordered list (tidak berurutan). Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list dengan bulatan atau kotak.

Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan untuk list sendiri menggunakan tag <li>. Penjelasan ini akan lebih mudah jika menggunakan contoh.

Berikut adalah contoh kode HTML untuk membuat ordered list menggunakan tag<ol>:

<!DOCTYPE html>
<html>
<head>
  <title>penggunaan tag list </title>
</head>
<body>
  <h1>daftar belanjaan</h1>
  <ol>
  <li>minyak goreng</li>
    <li>sabun mandi</li>
    <li>deterjen</li>
    <li>shampoo</li>
    <li>obat nyamuk</li>
  </ol>
</body>
</html>

Untuk membuat unordered list, tinggal ganti tag <ol> menjadi <ul>.

Berikut adalah contoh kode HTML untuk membuat unordered list menggunakan tag<ul>:

<!DOCTYPE html>
<html>
<head>
  <title>penggunaan tag list </title>
</head>
<body>
  <h1>daftar belanjaan</h1>
  <ul>
    <li>minyak goreng</li>
    <li>sabun mandi</li>
    <li>deterjen</li>
    <li>shampoo</li>
    <li>obat nyamuk</li>
  </ul>
</body>
</html>

Penggunaan tag list pada HTML tidak hanya untuk membuat daftar saja. Dengan CSS, tag list dapat digunakan untuk membuat menu navigasi di dalam halaman web, seperti menu home, contact us, dll. Tag list juga dapat digunakan untuk nested list, atau list bersarang, yang artinya sebuah list yang berada di dalam list lainnya.

eBook HTML Uncover Duniailkom

Anda serius ingin menguasai HTML? Duniailkom telah menyusun eBook HTML Uncover. eBook ini membahas HTML dengan lebih detail dan lebih lengkap hingga fitur terbaru HTML5. Penjelasan lebih lanjut bisa ke: eBook HTML Uncover Duniailkom.

Ya itu semua setidaknya akan terlihat seperti list, tapi membuat list dengan kedua cara di atas sangat tidak disarankan.

Dalam HTML ada tag atau elemen tersendiri untuk melakukan hal tersebut yaitu dengan menggunakan….

Mengenal Macam Elemen List

Tercatat ada tiga elemen yang dapat ditugaskan untuk membuat suatu list di HTML. Elemen-elemen tersebut antara lain:

Ordered List
Unordered List
Description List

Ketiganya memiliki perbedaan yang akan kita bahasa satu-satu di bawah ini…

Ordered List

Merupakan jenis list yang ditampilkan dengan diwakili oleh angka (defaultnya) secara urut. Ordered list dibentuk dengan menggunakan tag <ol> yang kemudian dilanjutkan menggunakan tag <li> untuk mewakili setiap item (item list) di dalamnya.

Contoh penerapan:


<!DOCTYPE html>
<html>
<head>
	<title>Belajar List di HTML</title>
</head>
<body>
	<h1>3 Framework PHP Terpopuler</h1>
	<ol>
		<li>Laravel</li>
		<li>Codeigniter</li>
		<li>Symfony</li>
	</ol>
</body>
</html>

Keluaran:

Selain dengan angka, setiap item list juga dapat diwakili dengan menggunakan huruf seperti A, B, C atau bahkan menggunakan angka romawi I, II, III.

Hal tersebut bisa dilakukan dengan menerapkan nilai dari atribut type. Nilai-nilai yang disediakan antara lain:

A – untuk nilai berupa alfabet (uppercase) A, B, C, dan seterusnya
a – untuk nilai berupa alfabet (lowercase) a, b, c, dan seterusnya
I – untuk nilai berupa angka romawi (uppercase) I, II, III, dan seterusnya
i – untuk nilai berupa angka romawi (lowercase) i, ii, iii, dan seterusnya

Contoh Penerapan


<!DOCTYPE html>
<html>
<head>
	<title>Belajar List di HTML</title>
</head>
<body>
	<h3>List dengan Nomor</h3>
	<ol type="1">
		<li>Laravel</li>
		<li>Codeigniter</li>
		<li>Symfony</li>
	</ol>
	<h3>List dengan Huruf (Uppercase)</h3>
	<ol type="A">
		<li>Laravel</li>
		<li>Codeigniter</li>
		<li>Symfony</li>
	</ol>
	<h3>List dengan Huruf (Lowercase)</h3>
	<ol type="a">
		<li>Laravel</li>
		<li>Codeigniter</li>
		<li>Symfony</li>
	</ol>
	<h3>List dengan Angka Romawi (Uppercase)</h3>
	<ol type="I">
		<li>Laravel</li>
		<li>Codeigniter</li>
		<li>Symfony</li>
	</ol>
	<h3>List dengan Angka Romawi (Lowercase)</h3>
	<ol type="i">
		<li>Laravel</li>
		<li>Codeigniter</li>
		<li>Symfony</li>
	</ol>
</body>
</html>

Keluaran:

Unordered List

Sedangkan untuk unordered list merupakan jenis list yang setiap itemnya diwakili dengan simbol. Cara membuatnya dengan menggunakan tag <ul> dengan setiap item di dalamnya dibuat menggunakan tag <li> sama seperti sebelumnya.

Contoh:


<!DOCTYPE html>
<html>
<head>
	<title>Belajar List di HTML</title>
</head>
<body>
	<h3>3 Bahasa Pemrograman Terpopuler</h3>
	<ul>
		<li>Python</li>
		<li>Javascript</li>
		<li>Java</li>
	</ul>
</body>
</html>

Keluaran:

Sama seperti ordered list, atribut type juga dapat digunakan pada unordered list namun dengan berbeda nilai yang tersedia. Untuk unordered list nilai dari atribut type antara lain:

circle – menampilkan lingkaran
disc – menampilkan lingkaran hitam
square – menampilkan simbol kotak
none – tidak menampilkan simbol apa-apa

Contoh penerapan:


<!DOCTYPE html>
<html>
<head>
	<title>Belajar List di HTML</title>
</head>
<body>
	<h3>List dengan Nilai Disc</h3>
	<ul type="disc">
		<li>Python</li>
		<li>Javascript</li>
		<li>Java</li>
	</ul>
	<h3>List dengan Nilai Circle</h3>
	<ul type="circle">
		<li>Python</li>
		<li>Javascript</li>
		<li>Java</li>
	</ul>
	<h3>List dengan Nilai Rectangle</h3>
	<ul type="rectangle">
		<li>Python</li>
		<li>Javascript</li>
		<li>Java</li>
	</ul>
	<h3>List dengan Nilai None</h3>
	<ul type="none">
		<li>Python</li>
		<li>Javascript</li>
		<li>Java</li>
	</ul>
</body>
</html>

Keluaran:

Selain dengan simbol melalui atribut type, kita juga diizinkan menggunakan gambar melalui atribut style CSS.


<!DOCTYPE html>
<html>
<head>
	<title>Belajar List di HTML</title>
</head>
<body>
	<h1>List dengan Ikon</h1>
	<ul style="list-style-image: url(php-logo.png)">
		<li>Laravel</li>
		<li>Codeigniter</li>
		<li>Symfony</li>
	</ul>
</body>
</html>

Keluaran:

Description List

Description list merupakan jenis list yang berisi penjelasan atau deskripsi dari sesuatu. Untuk membuat description list kita butuh tiga tag antara lain:

<dl> – definition list, tag untuk membuat definition list
<dt> – definition term, tag untuk membuat istilah yang akan dideskripsikan
<dd> – definition description, tag untuk membuat definisi, deskripsi atau penjelasan dari istilah

Seperti inilah format penulisannya

Contoh:


<!DOCTYPE html>
<html>
<head>
	<title>Description List</title>
</head>
<body>
	<h1>Apa yang dibutuhkan untuk membuat website?</h1>
	<dl>
		<dt>HTML</dt>
		<dd>HTML singkatan dari HyperText Markup Language, merupakan bahasa markup yang digunakan untuk membuat struktur website</dd>
		<dt>CSS</dt>
		<dd>CSS singkatan dari Cascade Stylesheet, merupakan bahasa stylesheet yang digunakan untuk mempercantik tampilan website</dd>
		<dt>Javascript</dt>
		<dd>Merupakan bahasa yang mampu membuat suatu halaman website menjadi lebih dinamis dan interaktif</dd>
	</dl>
</body>
</html>

Keluaran:

List Bersarang

Sebuah list dikatakan list bersarang atau nested list bila dalam suatu list terdapat list lagi. Simpelnya list di dalam list. Sebagai contoh di bawah ini,

List dalam HTML ada berapa?

Ada tiga jenis list di HTML: Ordered List adalah list yang terurut; Unordered List adalah list yang tak terurut; Descriptiona List adalah list yang berisi definisi.

Apa fungsi ul dan li pada HTML?

Deskripsi. Penjelasan HTML ul Untuk menulis sebuah item dalam daftar (list), digunakan element <li> yang menunjukkan List Item.

Apa fungsi tag ul?

Ul (Unordered List) merupakan tag list tidak beraturan yang berfungsi untuk mengurutkan suatu list dengan urutan berupa karakter spesial atau dengan simbol pada HTML.

Apa yang dimaksud dengan definition list?

<dl> kepanjangan dari Definition List yang artinya daftar definisi. elemen <dl> harus digunakan ketika ingin memasukan definisi istilah dalam dokumen, sering digunakan dalam glosarium untuk mendefinisikan banyak istilah dan juga digunakan dalam dokumen ketika penulis ingin menjelaskan suatu istilah lebih detail.