Cara Membuat Daftar/List di HTML (tag ol, ul dan li) (Part IX)

Jumat, 09 Desember 2011

Menampilkan sebuah text sebagai daftar/list, HTML menyediakan Tag <ol>, <ul> dan <li>. Membuat Daftar/List di HTML. Dalam HTML, tag list terdiri dari 2 jenis, ordered list (berurutan) dan unordered list (tidak berurutan). Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list dengan bulatan atau kotak.

Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan untuk list sendiri menggunakan tag <li>. Penjelasan ini akan lebih mudah jika menggunakan contoh.

Berikut adalah contoh kode HTML untuk membuat ordered list menggunakan tag<ol>:

<!DOCTYPE html>
<html>
<head>
  <title> Contoh penggunaan tag list </title>
</head>
<body>
  <h1>daftar belanjaan</h1>
  <ol>
  <li>Celana Dalam</li>
    <li>Kaos Oblog</li>
    <li>Celana Jeans</li>
    <li>Jaket</li>
    <li>Topi</li>
  </ol>
</body>
</html>

Output :

Untuk membuat unordered list, tinggal ganti tag <ol> menjadi <ul>.

<!DOCTYPE html>
<html>
<head>
  <title>penggunaan tag list </title>
</head>
<body>
  <h1>daftar belanjaan</h1>
  <ul>
    <li>Celana Dalam</li>
    <li>Kaos Oblong</li>
    <li>Celana Jeans</li>
    <li>Jaket</li>
    <li>Topi</li>
  </ul>
</body>
</html>

Output:

Penggunaan tag list pada HTML tidak hanya untuk membuat daftar saja. Dengan CSS, tag list dapat digunakan untuk membuat menu navigasi di dalam halaman web, seperti menu home, contact us, dll. Tag list juga dapat digunakan untuk nested list, atau list bersarang, yang artinya sebuah list yang berada di dalam list lainnya. Selanjutnya kita akan Membuat link (tag a) di HTML.

Cowaska

Cara Membuat Daftar/List di HTML (tag ol, ul dan li) (Part IX)

Blogpost Jumat, 09 Desember 2011 edit Tags: Belajar HTML