Membuat List Pada HTML

Membuat List Pada HTML

Apa itu List?

List adalah elemen yang biasanya digunakan untuk menampilkan informasi dalam bentuk list. Biasanya digunakan untuk membuat menu atau yang lainnya.

Ada 3 jenis List pada HTML:

  1. Ordered List: List yang terurut;
  2. Unordered List: List yang tak terurut;
  3. Descriptiona List: List yang berisi definisi.

1. Membuat Ordered List pada HTML

Ordered list biasanya ditandai dengan angka atau huruf di depannya sebagai penanda bahwa list ini terurut.

Dibuat dengan tag <ol>. Tag ini memiliki anak berupa tag yang berfungsi untuk membuat item list yaitu <li> (list item).

Contoh:

<!DOCTYPE html>

<html>

<head>

         <title>Membuat Ordered List</title>

</head>

<body>

        <h1>Nama Hewan</h1>

         <ol>

             <li>Kucing</li>

  <li>Singa</li>

  <li>Kuda</li>

       </ol>

</body>

</html>

Hasilnya:

Nama Hewan

1. Kucing

2. Singa

3. Kuda

  • Membuat List dengan menggunakan atribut type pada tag <ol>

<!DOCTYPE html>

<html>

<head>

         <title>Membuat Ordered List</title>

</head>

<body>

        <h2>Dengan type Alphabet<h2>

         <ol type=’a’>

             <li>Kucing</li>

  <li>Singa</li>

  <li>Kuda</li>

       </ol>

<h2>Dengan type Kapital<h2>

         <ol type=’A’>

             <li>Kucing</li>

  <li>Singa</li>

  <li>Kuda</li>

       </ol>

<h2>Dengan type Romawi<h2>

         <ol type=’i’>

             <li>Kucing</li>

  <li>Singa</li>

  <li>Kuda</li>

       </ol>

<h2>Dengan type Romawi Kapital<h2>

         <ol type=’I’>

             <li>Kucing</li>

  <li>Singa</li>

  <li>Kuda</li>

       </ol>

</body>

</html>

Hasilnya:

List Dengan type Alphabet

a. Kucing

b. Singa

c. Kuda

List Dengan type Kapital

A. Kucing

B. Singa

C. Kuda

List Dengan type Romawi

i. Kucing

ii. Singa

iii. Kuda

List Dengan type Romawi Kapital

I. Kucing

II. Singa

III. Kuda

2. Membuat Unordered List pada HTML

Unordered list biasanya menggunakan simbol-simbol. Cara membuatnya dengan menggunakan tag <ul> (unordered list). Dia juga memiliki anak berupa tag  yang sama seperti <ul>.

Contoh:

<!DOCTYPE html>

<html>

<head>

         <title>Membuat Unordered List</title>

</head>

<body>

        <h1>Nama Hewan</h1>

         <ul>

             <li>Kucing</li>

  <li>Singa</li>

  <li>Kuda</li>

       </ul>

</body>

</html>

Hasilnya:

Nama Hewan

  • Kucing
  • Singa
  • Kuda

Secara default simbol yang digunakan unordered list adalah lingkaran kecil (disc). Kita juga bisa mengganti menjadi seperti ordered list dengan menggunakan atribut type.

Contoh

<!DOCTYPE html>

<html>

<head>

         <title>Membuat Unordered List</title>

</head>

<body>

        <h2>Dengan Type Square</h2>

         <ul type=”square”>

             <li>Kucing</li>

  <li>Singa</li>

  <li>Kuda</li>

       </ul>

<h2>Dengan Type Disc</h2>

         <ul type=”disc”>

             <li>Kucing</li>

  <li>Singa</li>

  <li>Kuda</li>

       </ul>

<h2>Dengan Type None</h2>

         <ul type=”none”>

             <li>Kucing</li>

  <li>Singa</li>

  <li>Kuda</li>

       </ul>

<h2>Dengan Type Circle</h2>

         <ul type=”circle”>

             <li>Kucing</li>

  <li>Singa</li>

  <li>Kuda</li>

       </ul>

</body>

</html>

Hasilnya:

Dengan Type Square

  • Kucing
  • Singa
  • Kuda

Dengan Type Disc

  • Kucing
  • Singa
  • Kuda

Dengan Type None

      Kucing

      Singa

      Kuda

Dengan Type Circle

  • Kucing
  • Singa
  • Kuda

Selain itu membuat list juga bisa menggunakan gambar

Contoh:

<!DOCTYPE html>

<html>

<head>

         <title>Membuat Unordered List</title>

</head>

<body>

        <h1>Nama Hewan</h1>

         <ul style=”list-style-image: url(https://asset/img/favicon.ico);”>

             <li>Kucing</li>

  <li>Singa</li>

  <li>Kuda</li>

       </ul>

</body>

</html>

Maka Hasilnya didepan setiap menu akan muncul gambar yang sesuai dengan yang anda inginkan.

3. Membuat Description List pada HTML

Description List digunakan untuk menampilkan deskripsi/penjelasan seperti kamus. Untuk membuat description list menggunakan tag <dl> (data list). Dan didalamnya terdapat tag <dt> (data term) dan <dd> (data description).

Contoh:

<!DOCTYPE html>

<html>

<head>

         <title>Membuat Description List</title>

</head>

<body>

        <h1>Nama Hewan</h1>

         <dl>

            <dt>Kucing</dt>

                <dd>Kucing makan sedang ikan</dd>

  <dt>Singa</dt>

      <dd>Singa tinggal dihutan

</dd>

  <dt>Kuda</dt>

     <dd>Kuda sedang makan rumput</dd>

       </dl>

</body>

</html>

Hasilnya:

Kucing

      Kucing makan sedang ikan

Singa

      Singa tinggal dihutan

Kuda

      Kuda sedang makan rumput

4. Membuat List didalam List pada HTML (Nested List)

Didalam sebuah list kita bisa membuat list baru, contohnya jika kita ingin menggabungkan ordered list dengan unordered list. Caranya adalah list yang di dalam ditulis di dalam tag <li>.

Contoh:

<!DOCTYPE html>

<html>

<head>

         <title>Membuat List didalam List</title>

</head>

<body>

        <h1>Nama Hewan</h1>

         <ol>

             <li>Kucing</li>

                <ul><li>Anak kucing 1</li>

                         <li>Anak Kucing 2</li>

                <ul>

  <li>Singa</li>

                <ul><li>Anak Singa 1</li>

                         <li>Anak Singa 2</li>

                         <li>Anak Singa 3</li>

                <ul>

       </ol>

</body>

</html>

Hasilnya:

Nama Hewan

1. Kucing

  • Anak Kucing 1
  • Anak Kucing 2

2. Singa

  • Anak Singa 1
  • Anak Singa 2
  • Anak Singa 3
Download Tutorial