Membuat list Tag HTML Ordered list, Unordered list, nested list

list html

 

Sebuah List dapat memiliki penomoran atau hanya simbol berupa lingkaran atau bentuk lainnya. Dalam HTML, list/daftar yang menggunakan penomoran disebut dengan ordered list dan yang menggunakan simbol disebut dengan unordered list.

Ordered List

Ordered list atau daftar berurutan dapat dibuat dengan menggunakan tag <ol> (singkatan dari ordered list) dan untuk setiap listnya kita gunakan tag <li> (singkatan dari list item). Sebagai contoh, perhatikan kode HTML berikut :

<!DOCTYPE html>
 <html>
  <head> 
   <title>latihan list</title>
  </head>
    <body>
     <h2> Yang harus dilakukan hari ini </h2>
      <ol> 
           <li>pergi ke pasar</li> 
           <li>buat tutorial HTML</li> 
           <li>Mengerjakan tugas kuliah</li><ol>
    </body>
</html>

Penomoran daftar akan dilakukan secara otomatis ketika anda menambahkan daftar item.

jika ditampilkan pada browser, maka yang akan anda dapatkan adalah seperti berikut :

ordered list

Unordered List

Berbeda dengan Ordered List, Unordered List akan menandai setiap item dengan simbol. Baik berupa lingkaran atau persegi (anda masih bisa merubahnya dengan CSS). Untuk membuat daftar tidak berurut kita gunakan tag <ul> dan seperti tag <ol>, item yang terdapat di dalamnya harus diapit dengan tag <li>.

Jika kita modifikasi contoh sebelumnya dengan merubah <ol> menjadi <ul> maka yang akan kita dapat adalah seperti berikut :

<!DOCTYPE html>
<html>
<head>
  <title>penggunaan tag heading</title>
</head>
<body>
  <h2>ini adalah judul dengan h2 </h2>
    <ul>
        <li>Pergi ke pasar</li>
        <li>Buat Tutorial HTML</li>
        <li>Mengerjakan tugas kuliah</li>
    </ul>
</body>
</html>

Secara default, item akan ditandai dengan lingkaran.

unordered list

Definition Term List

Berbeda dengan Ordered List dan Unordered List yang memiliki struktur sama, Data list memiliki struktur tersendiri. Biasanya data list ini digunakan untuk membuat daftar istilah beserta definisinya seperti halnya dalam kamus.

<dl> 
        <dt>test</dt>
        <dd>test</dd>
</dl>

Tag dt (definition term) digunakan untuk menampung istilah yang akan didefinisikan, dan tag dd digunakan untuk menuliskan definisi dari dt sebelumnya. Berikut contoh penggunaan dari Definition List :

<dl>
    <dt>Manga</dt> 
    <dd>Manga(baca: man-ga, atau ma-ng-ga) merupakan kata komik dalam bahasa 
    Jepang; di luar Jepang, kata tersebut digunakan khusus untuk membicarakan tentang komik Jepang. </dd>
 
    <dt>Mangaka</dt> 
    </dd>Mangaka (baca: menggambar manga</dd> 
</dl>

List Campuran

Sebuah daftar bisa saja memiliki daftar lagi di dalamitemnya, atau biasa kita sebut dengan list bersarang (nested list). Contohnya seperti pada latihan yang akan kita buat berikut.

Buat file baru dengan nama file latihan5.html lalu ketikkan kode HTML berikut.

<!DOCTYPE HTML>
<HTML>
<head>
      <title>List/Daftar</title>
</head>
<body>
        <h2>Yang harus dilakukan hari ini</h2>
        <ol>
          <li>Pergi ke pasar
            <ul>
                 <li>Beli sayuran</li>
                 <li>Beli kertas
          <ol>
                 <li>A4</li>
                 <li>Legal</li>

          </ol>
                 </li>
                 <li>beli tinta</li>
            </ul>
          </li>
          <li>Buat tutoial HTML</li>
          <li>Mengerjakan tugas kuliah</li>
        </ol>
</body>
</html>

Dan berikut tampilan pada browser.

nested list

Yang perlu anda perhatikan adalah di mana anda meletakkan tag <ol> atau <ul> jika anda ingin menempatkannya pada suatu item, yaitu sebelum penutup tag list item ( </li> ). Daftar seperti ini biasa digunakan untuk pembuatan menu website, atau keperluan lainnya yang memang membutuhkan penomoran atau sesuatu yang memiliki poin-poin.

Tinggalkan Balasan

%d blogger menyukai ini: