Home › html › Belajar membuat list pada html

Belajar membuat list pada html

Diperbaharui: 18 October 2020

List adalah salah satu elemen HTML yang berguna untuk menampilkan data secara berurutan. Biasanya <li> ditampilkan bersamaan tag <ul> yang kepanjangan dari Unordered atau <ol> yang kepanjangan dari Ordered. List sendiri ditampilkan secara default dengan bola hitam.

Unordered list

Unordered adalah salah satu elemen HTML kegunaanya membuat daftar yang tidak berurutan. Biasanya ditandai dengan bola hitam secara defaultnya. Cara membuat unordered menggunakan <ul> dan <li>.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ul>
        <li>Html</li>
        <li>Css</li>
        <li>Javascript</li>
        <li>Php</li>
    </ul>

    </body>
</html>

Hasilnya:

Html
Css
Javascript
Php

Memilih gaya penandaan unordered

Value	Kegunaanya
disc	Menampilkan gaya bola hitam ( default )
circle	Menampilkan gaya bola putih
square	Menampilkan gaya kotak
none	Menghapus gaya

Contoh menggunakan disc ( Default ):

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ul style="list-style-type: disc">
        <li>Html</li>
        <li>Css</li>
        <li>Javascript</li>
        <li>Php</li>
    </ul>

    </body>
</html>

Hasil menggunakan disc ( Default ):

Html
Css
Javascript
Php

Contoh menggunakan circle:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ul style="list-style-type: circle">
        <li>Html</li>
        <li>Css</li>
        <li>Javascript</li>
        <li>Php</li>
    </ul>

    </body>
</html>

Hasil menggunakan circle:

Html
Css
Javascript
Php

Contoh menggunakan square:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ul style="list-style-type: square">
        <li>Html</li>
        <li>Css</li>
        <li>Javascript</li>
        <li>Php</li>
    </ul>

    </body>
</html>

Hasil menggunakan square:

Html
Css
Javascript
Php

Contoh menggunakan none:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ul style="list-style-type: circle">
        <li>Html</li>
        <li>Css</li>
        <li>Javascript</li>
        <li>Php</li>
    </ul>

    </body>
</html>

Hasil menggunakan none:

Html
Css
Javascript
Php

Ordered list

Ordered adalah salah satu elemen HTML kegunaanya membuat daftar yang berurutan. Biasanya ditandai dengan angka secara default. Cara membuat Ordered menggunakan <ol> dan <li>.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ol>
        <li>Html</li>
        <li>Css</li>
        <li>Javascript</li>
        <li>Php</li>
    </ol>

    </body>
</html>

Hasilnya:

Html
Css
Javascript
Php

Memilih gaya penandaan ordered

Value	Kegunaanya
type=”1″	Menampilkan gaya dengan angka ( default )
type=”A”	Menampilkan gaya dengan huruf besar
type=”a”	Menampilkan gaya dengan huruf kecil
type=”I”	Menampilkan gaya dengan huruf romawi besar
type=”i”	Menampilkan gaya dengan huruf romawi kecil

Contoh menggunakan type 1 ( default ):

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ol type="1">
        <li>Html</li>
        <li>Css</li>
        <li>Javascript</li>
        <li>Php</li>
    </ol>

  </body>
</html>

Hasil menggunakan type 1 ( Default ):

Html
Css
Javascript
Php

Contoh menggunakan type A:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ol type="A">
        <li>Html</li>
        <li>Css</li>
        <li>Javascript</li>
        <li>Php</li>
    </ol>

  </body>
</html>

Hasil menggunakan type A:

Html
Css
Javascript
Php

Contoh menggunakan type a:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ol type="a">
        <li>Html</li>
        <li>Css</li>
        <li>Javascript</li>
        <li>Php</li>
    </ol>

  </body>
</html>

Hasil menggunakan type a:

Html
Css
Javascript
Php

Contoh menggunakan type I:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ol type="I">
        <li>Html</li>
        <li>Css</li>
        <li>Javascript</li>
        <li>Php</li>
    </ol>

  </body>
</html>

Hasil menggunakan type I:

Html
Css
Javascript
Php

Contoh menggunakan type i:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ol type="i">
        <li>Html</li>
        <li>Css</li>
        <li>Javascript</li>
        <li>Php</li>
    </ol>

  </body>
</html>

Hasil menggunakan type i:

Html
Css
Javascript
Php

List bersarang

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ul>
        <li>Html</li>
        <li>Css
            <ul>
                <li>Bootstrap</li>
                <li>Materialize</li>
                <li>Bulma</li>
            </ul>
        </li>
        <li>Javascript</li>
        <li>Php</li>
    </ul>

  </body>
</html>

Hasilnya:

Html
Css
- Bootstrap
- Materialize
- Bulma
Javascript
Php

Description List

Anda bisa membuat list HTML untuk deskripsi.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <dl>
    <dt>Html</dt>
    <dd>Html kepanjangan dari Hypertext Markup Language.</dd>

    <dt>Css</dt>
    <dd>Html kepanjangan dari Cascading Style Sheet.</dd>
    </dl>

  </body>
</html>

Hasilnya:

Html: Html kepanjangan dari Hypertext Markup Language.
Css: Html kepanjangan dari Cascading Style Sheet.

Elemen <dl> mendefinisikan sebuah Deskripsi List yang didalamnya terdapat Elemen <dt> dan <dd>.
Elemen <dt> mendefinisikan sebuah Data Term atau Data Title
Elemen <dd> mendefinisikan sebuah Data Deskripsi

Elemen	Kegunaanya
<ul>	Mendefinisikan unordered untuk list
<ol>	Mendefinisikan ordered untuk list
<li>	Mendefinisikan sebuah list item
<dl>	Mendefinisikan deskripsi list
<dt>	Mendefinisikan sebuah data title atau data term
<dd>	Mendefinisikan sebuah data deskripsi