Cara Membuat Daftar/List Pada HTML

Mungkin kalian pernah melihat daftar pada suatu blog maupun website, dan kalian pasti berpikir bagaimana cara membuatnya. Disini saya akan berbagi Cara Membuat Daftar/List Pada HTML. Dalam HTML, list terbagi menjadi 2 yaitu Unordered List dan Ordered List.

1. Unordered List

Unordered list digunakan untuk daftar yang tidak memiliki urutan. List ini menggunakan tag <ul>. Ada 3 tipe untuk unordered list ini yaitu:
a.  Tipe Disk 
<b>Jurusan di SMKN 2 Karanganyar</b>
<ul type="disk">
<li>Teknik Pemesinan</li>
<li>Teknik Pembuatan Kain</li>
<li>Teknik Otomotif Elektronik</li>
<li>Teknik Rekayasa Perangkat Lunak</li>
</ul>
- Hasil

Jurusan di SMKN 2 Karanganyar

• Teknik Pemesinan
• Teknik Pembuatan Kain
• Teknik Otomotif Elektronik
• Teknik Rekayasa Perangkat Lunak

b. Tipe Circle
<b>Jurusan di SMKN 2 Karanganyar</b>
<ul type="circle">
<li>Teknik Pemesinan</li>
<li>Teknik Pembuatan Kain</li>
<li>Teknik Otomotif Elektronik</li>
<li>Teknik Rekayasa Perangkat Lunak</li>
</ul>
- Hasil

Jurusan di SMKN 2 Karanganyar

• Teknik Pemesinan
• Teknik Pembuatan Kain
• Teknik Otomotif Elektronik
• Teknik Rekayasa Perangkat Lunak

c. Tipe Square
<b>Jurusan di SMKN 2 Karanganyar</b>
<ul type="square">
<li>Teknik Pemesinan</li>
<li>Teknik Pembuatan Kain</li>
<li>Teknik Otomotif Elektronik</li>
<li>Teknik Rekayasa Perangkat Lunak</li>
</ul>
- Hasil

Jurusan di SMKN 2 Karanganyar

• Teknik Pemesinan
• Teknik Pembuatan Kain
• Teknik Otomotif Elektronik
• Teknik Rekayasa Perangkat Lunak

2. Ordered List

Ordered list digunakan untuk daftar yang memiliki urutan, dan tag yang digunakan adalah <ol>. Di ordered list juga ada 3 tipe yaitu:
a. Tipe Desimal
<b>Jurusan di SMKN 2 Karanganyar</b>
<ol type="1">
<li>Teknik Pemesinan</li>
<li>Teknik Pembuatan Kain</li>
<li>Teknik Otomotif Elektronik</li>
<li>Teknik Rekayasa Perangkat Lunak</li>
</ol>
- Hasil

Jurusan di SMKN 2 Karanganyar

1. Teknik Pemesinan
2. Teknik Pembuatan Kain
3. Teknik Otomotif Elektronik
4. Teknik Rekayasa Perangkat Lunak

b. Tipe Romawi
<b>Jurusan di SMKN 2 Karanganyar</b>
<ol type="i">
<li>Teknik Pemesinan</li>
<li>Teknik Pembuatan Kain</li>
<li>Teknik Otomotif Elektronik</li>
<li>Teknik Rekayasa Perangkat Lunak</li>
</ol>
- Hasil

Jurusan di SMKN 2 Karanganyar

1. Teknik Pemesinan
2. Teknik Pembuatan Kain
3. Teknik Otomotif Elektronik
4. Teknik Rekayasa Perangkat Lunak

c. Tipe Alfabet
<b>Jurusan di SMKN 2 Karanganyar</b>
<ol type="a">
<li>Teknik Pemesinan</li>
<li>Teknik Pembuatan Kain</li>
<li>Teknik Otomotif Elektronik</li>
<li>Teknik Rekayasa Perangkat Lunak</li>
</ol>
- Hasil

Jurusan di SMKN 2 Karanganyar

1. Teknik Pemesinan
2. Teknik Pembuatan Kain
3. Teknik Otomotif Elektronik
4. Teknik Rekayasa Perangkat Lunak