Cara Membuat List Pada Html

Pada artikel kali ini saya akan menjelaskan mengenai cara membuat list pada html, biasanya list dapat kita gunakan untuk menampilkan suatu informasi, misalnya: untuk menampilkan menu makanan, list nama siswa dan lain sebagainya.

Dalam Html, list dapat dibedakan menjadi 2 jenis yaitu: ordered list dan unordered list.

Untuk menulis ordered list kita dapat menggunakan tag <ol>, ordered list memiliki fungsi untuk membuat list secara berurutan, sedangkan unordered list dapat kita pakai untuk membuat list yang tidak berurutan, untuk menulis unordered list kita dapat menggunakan tag <ul>.

Cara Membuat List Pada Html

Silahkan simak penjelasan dibawah ini untuk penjelasan lebih lanjut mengenai ordered list dan unordered list.

Ordered List

Seperti yang sudah saya jelaskan sebelumnya ordered list ( <ol> ) adalah tag yang bisa kita gunakan untuk membuat daftar atau list secara berurutan

Contoh

Berikut adalah contoh penulisan tag ordered list:

<!DOCTYPE html>
<html>
<head>
    <title>List Nama Siswa</title>
</head>
<body>
    <ol type="A">
        <li>Rimuru</li>
        <li>Kuhaku</li>
        <li>Shiro</li>
        <li>Shora</li>
        <li>Kiragami</li>
    </ol>    
</body>
</html>

Hasil saat dijalankan atau dibuka melalui browser:

contoh oredered list

Penjelasan

Untuk menulis ordered list, kita dapat menggunakan tag <ol> dan diakhiri dengan tag </ol>, kemudian pada contoh diatas terdapat tag <li>…</li> diantara tag <ol dan </ol>, tag <li> berfungsi untuk menulis daftar item.

Selain itu didalam tag <ol> juga terdapat atribut type=”A”, atribut tersebut dapat Anda ganti dengan atribut yang ada dibawah ini:

Atribut Fungsi
type=”A” Untuk membuat list berurutan dengan huruf besar
type=”a” Untuk membuat list berurutan dengan huruf kecil
type=”I” Untuk membuat list berurutan dengan huruf romawi besar
type=”i”> Untuk membuat list berurutan dengan huruf romawi kecil
type=”1″> Untuk membuat list berurutan menggunakan angka

Unordered List

Anda dapat menggunakan tag <ul> dan diakhiri dengan tag </ul> untuk membuat list yang tidak berurutan (unordered list), terdapat tiga type unordered list yang bisa Anda pakai yaitu: disc, circle, dan square.

Jika Anda tidak memilih type list didalam tag <ul> maka secara default browser akan menampilkan list dengan type disc (bulat berwarna hitam).

Atribut Fungsi
type=”disc” Membuat list dengan bentuk bulat hitam
type=”circle” Membuat list dengan bentuk bulat putih
type=”square” Membuat list dengan bentuk kotak

Contoh

Berikut adalah contoh penulisan unoredered list dengan type disc, circle, dan square.


<!DOCTYPE html>
<html>
<head>
    <title>List Nama Siswa</title>
</head>
<body>
    <ul type="disc">
        <li>Rimuru</li>
        <li>Kuhaku</li>
    </ul>
    <ul type="circle">
        <li>Shiro</li>
        <li>Shora</li>
    </ul>
    <ul type="square">
        <li>Kiragami</li>
        <li>Ains</li>
    </ul>    
</body>
</html>

Hasil saat dijalankan atau dibuka melalui browser:

unordered listJadi itulah 2 jenis list beserta type list dan cara membuat list pada html, Anda dapat melanjutkan ke artikel berikutnya yaitu: Cara Membuat Hyperlink di Html untuk mengetahui lebih lanjut mengenai Html.

Istilah pencarian terkait:

  • cara membuat list pada html
  • cara membuat list pada html yang bagus
  • cara membuat list horizontal html
  • cara membuat list dengan html
  • cara membuat list dalam html
  • cara membuat daftar list html
  • cara membuat list pada html yang benar

Share your love
Bayu Purnama
Bayu Purnama
Articles: 23

Leave a Reply

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *