HTML Dasar Part 07: Cara Membuat List di HTML

Setelah belajar koding sebelumnya kita sudah berhasil menjalankan file cara membuat judul di HTML. Nah, Kali ini kita akan membahas tentang cara membuat daftar/list di HTML.

Cara Membuat Daftar/List di HTML

Jika Kamu ingin menyusun sebuah daftar belanja atau membuat sebuah menu resep masakan yang ingin dibeli dan menuliskannya didalam sebuah website. Tentu Kamu akan menulisnya menggunakan tag HTML, masih ingat dengan pengertian tag, atribut dan element HTML ? Tentu saja masih ingatkan dan jangan sampai dilupakan agar perjalanan belajar koding HTML kita ini lancar.

Mungkin saja Kamu akan membuat sebuah daftar atau list didalam HTML seperti ini :


<!DOCTYPE html>
<html>
<head>
  <title>Tag List HTML</title>
</head>
<body>
  <h1>Daftar Belanja Hari Ini </h1>
    <p>- Ayam 1kg</p>
    <p>- Cabai 2kg</p>
    <p>- Sayur Kol</p>
</body>
</html>

Hasilnya :

Mungkin Kamu akan membuat seperti itu kan? membuat list dengan tanda kurang (-) atau tanda bintang (*) dsb. Hasilnya emang tampak seperti list. Namun itu adalah list yang salah.

Didalam HTML ada tiga jenis list yaitu : Ordered List, Unordered List, dan Description List.

Mari kita bahas satu-persatu :

Ordered List

Ordered List merupakan list yang berurut atau list yang memang sesuai urutannya. Penentuan dari list ini menggunakan urutan angka atau huruf. Ordered List sangat cocok untuk membuat daftar yang sudah disusun berdasarkan kronologis. Misalnya : daftar cara memasak atau jadwal kegiatan sehari-hari dsb.

Ordered list dibuat dengan menggunakan tag <ol>, sedangkan untuk mengisi item-item didalamnya menggunakan tag <li>. Tag <li> merupakan singkatan dari list item.

Contoh Penggunaannya


<!DOCTYPE html>
<html>
<head>
  <title>Tag List HTML</title>
</head>
<body>
    <h1>Memasak Telur</h1>
    <p>Cara memasak telur dadar</p>
    <ol>
        <li>Siapkan daun bawang serta daun seledri, lalu cuci bersih dan potong kecil-kecil.</li>
        <li>Kocok telur dalam wadah, masukan bumbu halus daun bawang, seledri dan garam secukupnya.</li>
        <li>Goreng telur pada wajan, tuangkan adonan pada tengah wajan dan goreng hingga matang.</li>
        <li>Balik adonan agar sisi atasnya juga ikut matang.</li>
        <li>Setelah kedua sisi matang, angkat, dan tiriskan.</li>
        <li>telur dadar siap disajikan.</li>
    </ol>
</body>
</html>

Hasilnya :

Secara default list tersebut tampil secara berurutan dengan menggunakan angka dari 1, 2, 3 hingga 6 list. Namun, dapat diubah menjadi huruf alfabet atau angka romawi menggunakan atribut type.

Atribut Type Ordered List

Atribut type untuk ordered list tag <ol> memiliki fungsi untuk mengganti jenis lambang yang dibubuhkan diawal sebagai penanda dari list tersebut. Ada 4 macam jenis type pada ordered list di HTML, yaitu :

Atribut type a untuk lambang alfabet huruf kecil, seperti a, b, c, dst
Atribut type A untuk lambang alfabet huruf besar, seperti A, B, C, dst
Atribut type iuntuk lambang alfabet angka romawi kecil, seperti i, ii, iii, dst
Atribut type Iuntuk lambang alfabet angka romawi besar, seperti I, II, III, dst

Contoh penggunaan atribut type ordered list


<!DOCTYPE html>
<html>
<head>
  <title>Atribut type ordered list</title>
</head>
<body>
    <h3>Atribut type lambang alfabet huruf kecil</h3>
    <ol type='a'>
        <li>Jam 07:00 makan pagi</li>
        <li>Jam 13:00 makan siang</li>
        <li>Jam 19:00 makan malam</li>
    </ol>
    <h3>Atribut type lambang alfabet huruf besar</h3>
    <ol type='A'>
        <li>Jam 07:00 makan pagi</li>
        <li>Jam 13:00 makan siang</li>
        <li>Jam 19:00 makan malam</li>
    </ol>
    <h3>Atribut type lambang angka romawi kecil</h3>
    <ol type='i'>
        <li>Jam 07:00 makan pagi</li>
        <li>Jam 13:00 makan siang</li>
        <li>Jam 19:00 makan malam</li>
    </ol>
    <h3>Atribut type lambang angka romawi besar</h3>
    <ol type='I'>
        <li>Jam 07:00 makan pagi</li>
        <li>Jam 13:00 makan siang</li>
        <li>Jam 19:00 makan malam</li>
    </ol>
</body>
</html>

Hasilnya :

Atribut Start Ordered List

Atribut start ditambahkan ketika membuat suatu list yang dimulai dari angka tertentu.

Contoh penggunaannya


<!DOCTYPE html>
<html>
<head>
  <title>Atribut Start List</title>
</head>
<body>
    <p>Jadwal Makan</p>
    <ol type="i" start="2">
        <li>Jam 07:00 makan pagi</li>
        <li>Jam 13:00 makan siang</li>
        <li>Jam 19:00 makan malam</li>
    </ol>
</body>
</html>

Hasilnya :

Nested List (List Bersarang)

Didalam kondisi tertentu, kita perlu membuat nested list. Biasanya ini dikenal dengan istilah list bersarang atau list didalam list.

Kalau membuat nested list, tag <ol> ditulis didalam tag <li> dari list tertentu.

Contoh penggunaannya


<!DOCTYPE html>
<html>
<head>
  <title>Nested List</title>
</head>
<body>
    <p>Jadwal Makan</p>
    <ol>
        <li>Jam 07:00 makan pagi        <!-- tag penutup </li> tidak diletakkan disini -->
            <ol type="a">
                <li>Mie gomak 1 porsi</li>
                <li>Air putih 1 gelas</li>
                <li>Teh manis 1 gelas</li>
            </ol>
        </li>                           <!-- ini adalah tag penutup </li> -->
        <li>Jam 13:00 makan siang</li>
        <li>Jam 19:00 makan malam</li>
    </ol>
</body>
</html>

Hasilnya :

Untuk penulisan dan peletakan tag penutup </li> kita harus berhati-hati, jika ingin membuat nested list di HTML. Kalau salah penulisan yah hasilnya pun akan salah.

Unordered List

Yak, emang betul seperti yang ada dipikiranmu, sesuai dengan namanya unordered list adalah list yang tidak berurutan alias kebalikan dari ordered list. Unordered list biasanya digunakan untuk list yang tidak memiliki kronologis tertentu.

Jika ordered list menggunakan tag <ol> maka unordered list menggunakan tag <ul> dan untuk penulisan item nya, sama seperti tag <ol> yaitu menggunakan tag <li>. Yak, memang penulisannya hampir sama seperti ordered list.

Contoh cara penulisan unordered list


<!DOCTYPE html>
<html>
<head>
  <title>Unordered List</title>
</head>
<body>
    <p>Jenis-jenis mie</p>
    <ul>
        <li>mie gomak</li>
        <li>mie tiaw</li>
        <li>ifu mie</li>
        <li>indomie</li>
        <li>supermie, dst</li>
    </ul>
</body>
</html>

Hasilnya :

Atribut Type Unordered List

Sama juga seperti tag <ol>, tag <ul> juga memiliki atribut type untuk mengatur lambang dari tampilan list

Secara default, unordered list akan menampilkan lambang bulatan hitam sebagai penanda dari list. Dengan atribut ini, kita bisa mengganti lambang tersebut menjadi lambang yang lain.

Ada beberapa pilihan jenis atribut type unordered list antara lain :

Atribut type disc untuk lambang lingkaran (default)
Atribut type square untuk lambang kotak (persegi
Atribut type circle untuk lambang lingkaran putih
Atribut type none tidak menggunakan lambang

Contoh penggunaannya


<!DOCTYPE html>
<html>
<head>
  <title>Atribut Type Unordered List</title>
</head>
<body>
    <h3>Atribut type disc</h3>
    <ul type="disc">
        <li>mie gomak</li>
        <li>mie tiaw</li>
        <li>ifu mie</li>
        <li>indomie</li>
        <li>supermie, dst</li>
    </ul>
    <h3>Atribut type square</h3>
    <ul type="square">
        <li>mie gomak</li>
        <li>mie tiaw</li>
        <li>ifu mie</li>
        <li>indomie</li>
        <li>supermie, dst</li>
    </ul>
    <h3>Atribut type circle</h3>
    <ul type="circle">
        <li>mie gomak</li>
        <li>mie tiaw</li>
        <li>ifu mie</li>
        <li>indomie</li>
        <li>supermie, dst</li>
    </ul>
    <h3>Atribut type none</h3>
    <ul type="none">
        <li>mie gomak</li>
        <li>mie tiaw</li>
        <li>ifu mie</li>
        <li>indomie</li>
        <li>supermie, dst</li>
    </ul>
</body>
</html>

Hasilnya :

Selain menggunakan simbol/lambang yang ada didalam HTML, kita bisa mengubahnya dengan menggunakan CSS yang dapat menggantikan simbol tersebut dengan menggunakan gambar atau tidak sama sekali. Hal ini sering dilakukan untuk membuat navigasi sebuah website.

Membuat Menu Navigasi

Kita dapat membuat sebuah menu navigasi website menggunakan unordered list. Hal ini sebagai pelengkap list saja, untuk lebih lanjut kita akan membahas nya di belajar koding CSS.

Contoh penggunaannya


<!DOCTYPE html>
<html>
<head>
  <title>Menu Navigasi List</title>
</head>
<body>
    <ul>
         <li><a href="home.html">Home</a></li>
         <li><a href="indomie.html">Indomie</a></li>
         <li><a href="supermie.html">Supermie</a></li>
         <li><a href="intermie.html">Intermie</a></li>
    </ul>  
</body>
</html>

Hasilnya :

Lah? Kok masih tetap saja tampilannya? Ya emang benar, begitu tampilannya. Disinilah fungsi CSS untuk memanipulasi tampilan HTML dengan sedikit memberi warna dan efek visual lainnya.

Contoh penggunaannya dengan CSS


<!DOCTYPE html>
<html>
<head>
  <title>Menu Navigasi List</title>
  <style>
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    ul li {
        float: left;
    }
    li a {
        text-decoration: none;
        color: black;
        padding: 10px 20px;
        height: 20px;
        display: block;
        background-color: #c2c2c2;
        text-transform: uppercase;
    }
    ul a:hover{
        color: white;
        background-color: #838181;
    }
    </style>
    
</head>
<body>
    <ul>
         <li><a href="home.html">Home</a></li>
         <li><a href="indomie.html">Indomie</a></li>
         <li><a href="supermie.html">Supermie</a></li>
         <li><a href="intermie.html">Intermie</a></li>
    </ul>
</body>
</html>

Hasilnya :

Nah, sekarang bisa Kamu perhatikan kode untuk membuat menu nya percis sama dan hanya memanipulasi tampilannya menggunakan CSS. Dengan struktur HTML yang bagus, style atau gaya dari menu tersebut dapat diubah dengan mudah sesuai keinginan, hanya menggunakan kode CSS saja tanpa mengotak-atik kode HTML.

Description List

Description List merupakan sebuah list yang berisi deskripsi atau penjelasan yakni seperti "kamus" yang memiliki judul dan keterangannya dan biasanya list ini jarang digunakan.

Untuk membuat sebuah description list, kita menggunakan tag <dl> dan ditutup dengan tag </dl>. Untuk item didalamnya, kita menggunakan tag <dt> dan untuk penjelasan dari item, kita menggunakan tag <dd>.