Cara Membuat List Di HTML

View Categories

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. Berikut adalah cara membuat List di HTML.

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>

Jalankan Contoh

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>

Jalankan Contoh

Marker Circle

Marker circle berbentuk lingkaran tanpa warna.

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

Jalankan Contoh

Marker Square

Marker square berbentuk kotak.

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

Jalankan Contoh

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>

Jalankan Contoh

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>

Jalankan Contoh

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>

Jalankan Contoh

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>

Jalankan Contoh

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>

Jalankan Contoh

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>

Jalankan Contoh

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>

Jalankan Contoh

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>

Jalankan Contoh

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>

Jalankan Contoh

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>

Jalankan Contoh

Tutorial sebelumnya : Cara Menambahkan Gambar Di HTML
Tutorial setelahnya : Cara Membuat Tabel Di HTML
Semua Tutorial HTML : Tutorial HTML 

Tinggalkan Balasan