HTML sudah menyediakan elemen untuk membuat list. Ada tiga macam jenis list yang bisa dibuat di HTML:
- Ordered List adalah list yang terurut;
- Unordered List adalah list yang tak terurut;
- dan Descriptiona List adalah list yang berisi definisi.
Mari kita bahas satu-per-satu…
1. Ordered List di HTML
Ordered list dibuat dengan tag
Contoh:
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
Hasilnya:
List diatas diurutkan berdasarkan angka dari
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
0,
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
1,
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
2, sampai
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
3.
Lalu bagaimana kalau kita ingin menggunakan huruf seperti
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
4,
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
5,
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
6 atau angka romawi seperti
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
7,
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
8,
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
9?
Gampang..
Untuk membuat yang seperti itu, kita bisa menggunakan atribut
<html>
<head>
<title>Ordered List dengan Atribut Typetitle>
head>
<body>
<h3>List dengan type alfabeth3>
<ol type='a'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type alfabet kapital (huruf besar)h3>
<ol type='A'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawih3>
<ol type='i'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawi kapitalh3>
<ol type='I'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
body>
html>
0 pada tag
<html>
<head>
<title>Ordered List dengan Atribut Typetitle>
head>
<body>
<h3>List dengan type alfabeth3>
<ol type='a'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type alfabet kapital (huruf besar)h3>
<ol type='A'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawih3>
<ol type='i'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawi kapitalh3>
<ol type='I'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
body>
html>
1 dan berikut ini nilai yang bisa diberikan:
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
4 untuk alfabet
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
4,
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
5,
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
6, dan seterusnya;
<html>
<head>
<title>Ordered List dengan Atribut Typetitle>
head>
<body>
<h3>List dengan type alfabeth3>
<ol type='a'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type alfabet kapital (huruf besar)h3>
<ol type='A'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawih3>
<ol type='i'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawi kapitalh3>
<ol type='I'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
body>
html>
6 untuk alfabet
<html>
<head>
<title>Ordered List dengan Atribut Typetitle>
head>
<body>
<h3>List dengan type alfabeth3>
<ol type='a'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type alfabet kapital (huruf besar)h3>
<ol type='A'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawih3>
<ol type='i'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawi kapitalh3>
<ol type='I'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
body>
html>
6,
<html>
<head>
<title>Ordered List dengan Atribut Typetitle>
head>
<body>
<h3>List dengan type alfabeth3>
<ol type='a'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type alfabet kapital (huruf besar)h3>
<ol type='A'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawih3>
<ol type='i'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawi kapitalh3>
<ol type='I'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
body>
html>
8,
<html>
<head>
<title>Ordered List dengan Atribut Typetitle>
head>
<body>
<h3>List dengan type alfabeth3>
<ol type='a'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type alfabet kapital (huruf besar)h3>
<ol type='A'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawih3>
<ol type='i'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawi kapitalh3>
<ol type='I'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
body>
html>
9, dan seterusnya;
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul>
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
body>
html>
0 untuk angka romwari
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul>
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
body>
html>
0,
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul>
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
body>
html>
2,
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul>
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
body>
html>
3, dan seterusnya;
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
7 untuk angka romwari
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
7,
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
8,
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
9, dan seterusnya.
Contoh:
<html>
<head>
<title>Ordered List dengan Atribut Typetitle>
head>
<body>
<h3>List dengan type alfabeth3>
<ol type='a'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type alfabet kapital (huruf besar)h3>
<ol type='A'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawih3>
<ol type='i'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawi kapitalh3>
<ol type='I'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
body>
html>
Hasilnya:
2.Unordered List di HTML
Unordered list adalah list yang tak terurut yang menggunakan simbol-simbol pada item-nya. Unordered list dibuat dengan tag
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul>
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
body>
html>
8 dan untuk item-nya dibuat juga dengan tag
.
Contoh:
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul>
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
body>
html>
Hasilnya:
Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil (disc). Kita juga bisa menggantinya dengan atribut
<html>
<head>
<title>Ordered List dengan Atribut Typetitle>
head>
<body>
<h3>List dengan type alfabeth3>
<ol type='a'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type alfabet kapital (huruf besar)h3>
<ol type='A'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawih3>
<ol type='i'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawi kapitalh3>
<ol type='I'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
body>
html>
0.
Berikut ini nilai yang bisa diberikan untuk atribut
<html>
<head>
<title>Ordered List dengan Atribut Typetitle>
head>
<body>
<h3>List dengan type alfabeth3>
<ol type='a'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type alfabet kapital (huruf besar)h3>
<ol type='A'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawih3>
<ol type='i'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawi kapitalh3>
<ol type='I'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
body>
html>
0:
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul type="square">
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
<h1>Framework untuk dipelajari:h1>
<ul type="circle">
<li>Vuejsli>
<li>Svelteli>
<li>Reactjsli>
ul>
<h1>Tools untuk dipelajari:h1>
<ul type="none">
<li>Gulpli>
<li>NPMli>
<li>Js Lintli>
ul>
<h1>Pelajari juga:h1>
<ul type="disc">
<li>JSONli>
<li>XMLli>
<li>Markdownli>
ul>
body>
html>
2 untuk simbol persegi;
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul type="square">
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
<h1>Framework untuk dipelajari:h1>
<ul type="circle">
<li>Vuejsli>
<li>Svelteli>
<li>Reactjsli>
ul>
<h1>Tools untuk dipelajari:h1>
<ul type="none">
<li>Gulpli>
<li>NPMli>
<li>Js Lintli>
ul>
<h1>Pelajari juga:h1>
<ul type="disc">
<li>JSONli>
<li>XMLli>
<li>Markdownli>
ul>
body>
html>
3 (default) untuk simbol lingkaran disc;
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul type="square">
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
<h1>Framework untuk dipelajari:h1>
<ul type="circle">
<li>Vuejsli>
<li>Svelteli>
<li>Reactjsli>
ul>
<h1>Tools untuk dipelajari:h1>
<ul type="none">
<li>Gulpli>
<li>NPMli>
<li>Js Lintli>
ul>
<h1>Pelajari juga:h1>
<ul type="disc">
<li>JSONli>
<li>XMLli>
<li>Markdownli>
ul>
body>
html>
4 tidak memakai simbol;
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul type="square">
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
<h1>Framework untuk dipelajari:h1>
<ul type="circle">
<li>Vuejsli>
<li>Svelteli>
<li>Reactjsli>
ul>
<h1>Tools untuk dipelajari:h1>
<ul type="none">
<li>Gulpli>
<li>NPMli>
<li>Js Lintli>
ul>
<h1>Pelajari juga:h1>
<ul type="disc">
<li>JSONli>
<li>XMLli>
<li>Markdownli>
ul>
body>
html>
5 untuk simbol lingkaran;
Contoh:
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul type="square">
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
<h1>Framework untuk dipelajari:h1>
<ul type="circle">
<li>Vuejsli>
<li>Svelteli>
<li>Reactjsli>
ul>
<h1>Tools untuk dipelajari:h1>
<ul type="none">
<li>Gulpli>
<li>NPMli>
<li>Js Lintli>
ul>
<h1>Pelajari juga:h1>
<ul type="disc">
<li>JSONli>
<li>XMLli>
<li>Markdownli>
ul>
body>
html>
Hasilnya:
Selain menggunakan type, kita juga bisa menggunakan gambar.
Ini dilakukan dengan style CSS.
Contohnya:
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul style="list-style-image: url(https://assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico)">
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
body>
html>
Hasilnya:
3. Description List di HTML
Description List adalah list yang berisi deksripsi atau penjelasan dari sesuatu.
Ada tiga tag yang digunakan untuk membuat description list:
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul type="square">
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
<h1>Framework untuk dipelajari:h1>
<ul type="circle">
<li>Vuejsli>
<li>Svelteli>
<li>Reactjsli>
ul>
<h1>Tools untuk dipelajari:h1>
<ul type="none">
<li>Gulpli>
<li>NPMli>
<li>Js Lintli>
ul>
<h1>Pelajari juga:h1>
<ul type="disc">
<li>JSONli>
<li>XMLli>
<li>Markdownli>
ul>
body>
html>
6 (description list) tag untuk memulai description list;
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul type="square">
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
<h1>Framework untuk dipelajari:h1>
<ul type="circle">
<li>Vuejsli>
<li>Svelteli>
<li>Reactjsli>
ul>
<h1>Tools untuk dipelajari:h1>
<ul type="none">
<li>Gulpli>
<li>NPMli>
<li>Js Lintli>
ul>
<h1>Pelajari juga:h1>
<ul type="disc">
<li>JSONli>
<li>XMLli>
<li>Markdownli>
ul>
body>
html>
7 (description term) tag untuk membuat kata yang akan dideskripsikan;
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul type="square">
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
<h1>Framework untuk dipelajari:h1>
<ul type="circle">
<li>Vuejsli>
<li>Svelteli>
<li>Reactjsli>
ul>
<h1>Tools untuk dipelajari:h1>
<ul type="none">
<li>Gulpli>
<li>NPMli>
<li>Js Lintli>
ul>
<h1>Pelajari juga:h1>
<ul type="disc">
<li>JSONli>
<li>XMLli>
<li>Markdownli>
ul>
body>
html>
8 (description description) tag untuk membuat penjelasan dari kata.
Format penulisannya seperti ini:
Contoh:
<html lang="en">
<head>
<title>Membuat Description Listtitle>
head>
<body>
<h1>Daftar istilah:h1>
<dl>
<dt>Kopidt>
<dd>Sebuah minuman berwarna hitam. Menurut pendapat lain kopi adalah air yang dimasak sampai gosong.dd>
<dt>Kopi Black Magicdt>
<dd>Kopi hitam atau kopi tradisional yang dibuat dengan mantra-mantra.dd>
<dt>White Coffeedt>
<dd>Kopi berwarna putih, kandungan kafeinnya sedikit.dd>
<dt>Kopi++dt>
<dd>Kopi ini mampu meningkatkan imajinasi 99 kali lipat.dd>
dl>
body>
html>
Hasilnya:
List di dalam List (Nested List)
List juga dapat dibuat di dalam list, misalkan kita ingin menggabungkan ordered list dengan unordered list.
Ol untuk apa?
Sedangkan tag Ol (Ordered List) merupakan tag beraturan yang berfungsi untuk mengurutkan suatu list dengan urutan berupa abjad, angka ataupun berupa angka romawi.
Apa fungsi ul di HTML?
HTML element ul (un-ordered list) merupakan elemen HTML yang digunakan untuk menampilkan daftar (list) dalam bentuk butir-butir peluru atau bulet. Daftar list yang ditampilkan tidak dalam bentuk urutan angka maupun huruf namun ditampilkan dalam bentuk bulet atau titik kecil sebagai penanda daftar.
