Blog Belajar HTML: Tag UL (Nested) HTML

Tag <ul> digunakan untuk membuat daftar tak berurutan. Artinya daftar item tidak memperhatikan urutan layaknya penomoran (angka) melainkan item-item diberi tanda bullet, circle dan square. Bullet berupa lingkaran hitam kecil penuh, circle berupa lingkaran kecil dengan warna putih ditengahnya dan square dalam bentuk persegi kecil. Jika Anda tidak menentukan salah satunya maka style bullet yang dipakai.

Daftar item-item diletakkan dalam tag <li> yang telah didahuli tag <ul>. Berikut contoh dasarnya: ul.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag ul (dasar) html</title>
        </head>
    <body>
        <p>Daftar buah-buahan:</p>
        <ul>
            <li>Apel</li>
            <li>Semangka</li>
            <li>Pisang</li>
            <li>Nangka</li>
            <li>Jambu</li>
        </ul>
    </body>
</html>

Output:

Tampilan hasil tag ul di Firefox.

Jika Anda menggunakan style circle atau square yaitu dengan mendeklarasikannya dengan list-style menggunakan css, misalnya dengan teknik secara langsung seperti berikut: ul2.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag ul (dasar) html</title>
        </head>
    <body>
        <p>Daftar buah-buahan:</p>
        <ul>
            <li style="list-style: square">Apel</li>
            <li style="list-style: square">Semangka</li>
            <li>Pisang</li>
            <li>Nangka</li>
            <li style="list-style: circle">Jambu</li>
        </ul>
    </body>
</html>

Output:

Tampilan tag ul dengan list-style.

Nested UL (UL berulang).
Nested UL adalah ketika daftar item mempunyai daftar item lagi, dengan kata lain di dalam tag <li> ada tag <ul> dan tag <li>. Anda bisa membuat UL berulang sebanyak apapun. Contohnya daftar item apel terbagi dari beberapa varietas apel, misalnya Red Delicious, Golden Delicious, Fuji, Gala dan Braeburns Washington. Yang perlu Anda pahami adalah setiap tag ada penutupnya dan harus tepat peletakannya. Contoh: ul3.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag ul (dasar) html</title>
        </head>
    <body>
        <p>Daftar buah-buahan:</p>
        <ul>
            <li style="list-style: square">Apel
                <ul>
                    <li>Red Delicious</li>
                    <li>Golden Delicious</li>
                    <li>Fuji</li>
                    <li>Gala</li>
                    <li>Braeburns Washington</li>
                </ul>
            </li>
           
            <li style="list-style: square">Semangka
                <ul>
                    <li>Semangka merah</li>
                    <li>Semangka kuning</li>
                    <li>Semangka busuk</li>
                </ul>
            </li>
           
            <li>Pisang</li>
            <li>Nangka</li>
           
            <li style="list-style: circle">Jambu
                <ul>
                    <li>Jambu monyet</li>
                   
                    <li>Jambu biji
                        <ul>
                            <li>Varietas unggul</li>
                            <li>Varietas biasa</li>
                        </ul>
                    </li>
                   
                    <li>Jambu merah</li>
                </ul>
            </li>
        </ul>
    </body>
</html>

Output:

Output tag ul nested.

Referensi tulisan:

<ul>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 07 Januari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Jenis Apel; ditulis oleh: 100buah.wordpress.com, 100buah.wordpress.com, diakses 07 Januari 2015.

Tuesday, January 6, 2015

Tag UL (Nested) HTML

No comments:

Post a Comment