Belajar HTML : List HTML

assalamualaikum wr. wb.

Kali ini saya posting tentang cara membuat list pada html. List HTML dapat digunakan dalam membuat daftar pada halaman website.

HTML List terdiri dari 2 macam yaitu :
Unordered List,

• barang
• barang
• barang
• barang

Ordered List,

1. Item pertama
2. Item kedua
3. Item ketiga
4. Item keempat

Unordered List HTML
Unordered list dimulai dengan tag <ul>. Setiap item list dimulai dengan tag <li>. List item akan ditandai dengan peluru (lingkaran hitam kecil) secara default.

<ul>
   <li>...</li>
   <li>...</li>
   <li>...</li>
</ul>

Terdapat beberapa type list lainnya, yaitu

• Disc

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul> 

• Lingkaran

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

• Persegi

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

• Tidak ada

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>


Ordered List HTML
Ordered list dimulai dengan tag <ol>. Setiap item list dimulai dengan tag <li>.
List item akan ditandai dengan nomor secara default.

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Beberapa type untuk Ordered List HTML, yaitu

• Type="1"

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

• Type="A"

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

• Type="a"

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

• Type="I"

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

• Type="i"

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>


List HTML Bersarang
List dapat bersarang, maksudnya ada list di dalam list. Contoh :

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
     <li>Black tea</li>
     <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>



Sekian postingan saya, terimakasih kepada yang sudah mau mampir.

wassalamualaikum wr. wb.

Referensi :
- http://www.w3schools.com/html/html_lists.asp