Sebagai lanjutan cara membuat judul di HTML, kali ini akan membahas tutorial tentang cara membuat daftar atau list dengan menggunakan tag <ol>, <ul> dan <li>.

Cara Membuat Daftar atau List HTML

Ada 2 jenis tag list HTML, yaitu ordered list (ol) dan unordered list (ul). Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list akan ditampilkan dengan simbol bulatan atau kotak.

Penulisan tag <ol> digunakan untuk membuat urutan angka atau huruf. Penulisan tag <ul> digunakan untuk membuat urutan berupa simbol. Penulisan tag <li> digunakan untuk menampilkan list atau daftarnya itu sendiri.

Contoh Penulisan Tag List HTML

Tag list yang digunakan pada HTML ditulis secara berpasangan yaitu tag pembuka dan tag penutup. Tag yang digunakan adalah tag <ol></ol> dan tag <ul></ul> yang digunakan untuk tipe pengurutan. Sedangkan teks yang diurutkan berada pada tag <li></li>.

Penulisan Tag Ordered List <ol>

Seperti yang telah dijelaskan sebelumnya, untuk membuat daftar list berupa angka dapat menggunakan tag <ol> atau (ordered list) seperti dibawah ini.

<!DOCTYPE html>
<html>
    <head>
        <title>penakode - Penggunaan List HTML</title>
    </head>
    <body>
    	<h1>Daftar Bahasa Pemrograman</h1>
    	<ol>
    		<li>PHP</li>
    		<li>Javascript</li>
    		<li>Java</li>
    		<li>Phyton</li>
    		<li>C</li>
            <li>C++</li>
            <li>C#</li>
    	</ol>
    </body>
</html>

Berikut ini hasil tampilan dari kode diatas.

cara-membuat-list-html

Selain untuk menampilkan angka, pada ordered list dapat juga digunakan untuk menampilkan pengurutan berdasarkan romawi, dan lain-lain dengan menambahkan perintah “type”.

<ol type="A">
	<li>PHP</li>
	<li>Java</li>
</ol>

Daftar tipe ordered list :

TIPEKETERANGAN
type=”1″Pengurutan menggunakan angka (default)
type=”A″Pengurutan berdasarkan huruf besar
type=”a″Pengurutan berdasarkan huruf kecil
type=”I″Pengurutan menggunakan angka romawi huruf besar
type=”i″Pengurutan menggunakan angka romawi huruf kecil

Penulisan Tag Unordered List <ul>

<!DOCTYPE html>
<html>
    <head>
        <title>penakode - Penggunaan List HTML</title>
    </head>
    <body>
        <h1>Daftar Bahasa Pemrograman</h1>
        <ul>
            <li>PHP</li>
            <li>Javascript</li>
            <li>Java</li>
            <li>Phyton</li>
            <li>C</li>
            <li>C++</li>
            <li>C#</li>
        </ul>
    </body>
</html>

Berikut ini hasil tampilan dari kode diatas.

cara-membuat-list-html

Selain untuk menampilkan simbol diatas, pada unordered list dapat juga digunakan untuk menampilkan pengurutan simbol kotak atau lingkaran dengan menambahkan perintah “list-style-type”.

<ul style="list-style-type: circle">
    <li>PHP</li>
    <li>Java</li>
</ul>

Daftar tipe Unordered list :

TIPEKETERANGAN
list-style-type:discPengurutan menggunakan simbol bullets (default)
list-style-type:circlePengurutan menggunakan simbol lingkaran
list-style-type:squarePengurutan menggunakan simbol kotak
list-style-type:noneMenghilangkan simbol pengurutan

Membuat Daftar List Bersarang di HTML

Sekarang coba ketik kode dibawah ini di text editor untuk melihat penggunaan tag list yang bisa dikombinasikan sesuai kebutuhan.

<!DOCTYPE html>
<html>
    <head>
        <title>penakode - Penggunaan List HTML</title>
    </head>
    <body>
        <h1>Daftar Bahasa Pemrograman</h1>
        <h3>Tag Ordered List</h3>
        <ol>
            <li>PHP Framework</li>
                <ol type="A">
                    <li>Laravel</li>
                    <li>Codeigniter</li>
                </ol>
            <li>Javascript</li>
                <ol type="i">
                    <li>Laravel</li>
                    <li>Codeigniter</li>
                </ol>
            <li>Java</li>
            <li>Phyton</li>
        </ol>

        <h3>Tag Unordered List</h3>
        <ul>
            <li>PHP Framework</li>
                <ul style="list-style-type: square">
                    <li>Laravel</li>
                    <li>Codeigniter</li>
                </ul>
            <li>Javascript</li>
                <ul style="list-style-type: circle">
                    <li>Laravel</li>
                    <li>Codeigniter</li>
                </ul>
            <li>Java</li>
            <li>Phyton</li>
        </ul>

        <h3>Gabungan</h3>
        <ol>
            <li>PHP Framework</li>
                <ul>
                    <li>Laravel</li>
                    <li>Codeigniter</li>
                </ul>
            <li>Javascript</li>
                <ul>
                    <li>Laravel</li>
                    <li>Codeigniter</li>
                </ul>
            <li>Java</li>
            <li>Phyton</li>
        </ol>
    </body>
</html>

Dan inilah hasil dari tampilan kode diatas.

cara-membuat-list-html

Demikianlah tutorial membuat daftar atau list di HTML baik menggunakan ordered list maupun unordered list. Semoga dapat dimengerti penggunaannya. Selanjutnya akan membahas tentang penggunaan link di HTML.