Cara Membuat List Di HTML

Cara Membuat List Di HTML

List digunakan untuk membuat daftar dalam bentuk text. List berisi beberapa text yang ditampilkan dalam bentuk daftar. List terdiri dari list tanpa penomoran dan list dengan penomoran.

List Tanpa Penomoran

List tanpa penomoran menggunakan tag ul, sedangkan isi list dibuat dengan menggunakan tag li.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul> 

Atribut style dapat digunakan untuk mengatur jenis marker yang ditampilkan pada list.

Marker Disk

Marker disk adalah marker default list, marker ini berbentuk lingkaran berwarna hitam.

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

Marker Circle

Marker circle berbentuk lingkaran tanpa warna.

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

Marker Square

Marker square berbentuk kotak.

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

Tanpa Marker

List tanpa penomoran juga bisa ditampilkan tanpa marker.

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

List Dengan Penomoran

List dengan penomoran mempunyai marker berupa urutan angka atau huruf. List ini menggunakan tag ol, sedangkan isi list dibuat dengan menggunakan tag li.

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

Terdapat beberapa tipe penomoran yang dapat diatur dengan menggunakan atribut type.

Penomoran Angka

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

Ini adalah tipe penomoran default dari list dengan penomoran.

Penomoran Huruf Besar

Penomoran ini memakai huruf besar dari A sampai Z.

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

Penomoran Huruf Kecil

Penomoran ini memakai huruf kecil dari a sampai z.

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

Penomoran Angka Romawi Besar

Penomoran ini memakai angka romawi mulai dari I, II, III dan seterusnya.

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

Penomoran Angka Romawi Kecil

Penomoran ini memakai angka romawi mulai dari i, ii, iii dan seterusnya.

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

Atribut Start

Atribut start dipakai untuk mengubah nomor awal list dengan penomoran.

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 

List Di Dalam List

List dapat berisi list yang lain.

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

List dengan penomoran bisa berada di dalam list tanpa penomoran, begitu juga sebaliknya.

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

 

Tinggalkan Balasan

Keranjang Belanja0
Keranjang belanja kosong ...
0