Cara menggunakan ul html untuk apa?

List adalah salah satu elemen HTML yang berguna untuk menampilkan data secara berurutan. List biasany

Table of Contents Show

Unordered list
Memilih gaya penandaan unordered
Ordered list
Memilih gaya penandaan ordered
List bersarang
Description List
Apa perbedaan antara tag ol dan ul?
Apa fungsi dari tag ul dan li?
Ul HTML untuk apa?
Tag ol digunakan untuk membuat apa?

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:

HtmlHtml kepanjangan dari Hypertext Markup Language.CssHtml 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

Apa perbedaan antara tag ol dan ul?

Tag Ol atau ordered list adalah suatu tag untuk mengurutkan daftar dengan menggunakan angka, abjad dan angka romawi pada HTML. Sedangkan ul atau unordered list yaitu tag untuk mengurutkan daftar dengan menggunakan symbol atau special character pada HTML.

Apa fungsi dari tag ul dan li?

Deskripsi. Penjelasan HTML ul Untuk menulis sebuah item dalam daftar (list), digunakan element <li> yang menunjukkan List Item. Jadi, <li> terletak didalam <ul> dan dapat ditulis lebih dari satu element. <ul> juga bisa saja terletak (ditulis) didalam <li> yang menunjukkan tingkatan daftar (list) bersarang (nested).

Ul HTML untuk apa?

Unordered list adalah list yang tak terurut yang menggunakan simbol-simbol pada item-nya. Unordered list dibuat dengan tag <ul> dan untuk item-nya dibuat juga dengan tag <li> . Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil (disc).

Tag ol digunakan untuk membuat apa?

Ordered list dibuat dengan tag <ol> . Lalu di dalamnya diisi dengan item-item yang akan dimasukkan ke dalam list. Item dibuat dengan tag <li> (list item). Hasilnya: List diatas diurutkan berdasarkan angka dari 1 , 2 , 3 , sampai 5 .