Langkah 1: Membuat Markup HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <ol> <li>Item 1</li> <!-- 1 --> <li>Item 2 <!-- 2 --> <ol> <li>Sub Item 1</li> <!-- 2.1 --> <li>Sub Item 2</li> <!-- 2.2 --> <li>Sub Item 3 <!-- 2.3 --> <ol> <li>Sub-sub Item 1</li> <!-- 2.3.1 --> <li>Sub-sub Item 2</li> <!-- 2.3.2 --> <li>Sub-sub Item 3</li> <!-- 2.3.3 --> <li>Sub-sub Item 4</li> <!-- 2.3.4 --> </ol> </li> <li>Sub Item 4</li> <!-- 2.4 --> </ol> </li> <li>Item 3</li> <!-- 3 --> <li>Item 4</li> <!-- 4 --></ol> |
Atau bisa sperti di bawah ini
<!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>
Dari kode html di atas seharusnya muncul seperti gambar di bawah ini.
