এইচটিএমএল ক্রমহীন তালিকা উপাদান (The HTML Unordered List element)

<ul>: এইচটিএমএল ক্রমহীন তালিকা উপাদান (The HTML Unordered List element)। HTML এ <ul> উপাদানটি আইটেমগুলির একটি ক্রমবিহীন তালিকা উপস্থাপন করে। একটি ক্রমবিন্যস্ত তালিকা এমন একটি তালিকা যেখানে আইটেমগুলির ক্রম পরিবর্তন করা তালিকার অর্থ পরিবর্তন করবে না। <ul> উপাদানটি সাধারণত একটি বুলেটেড তালিকা হিসাবে রেন্ডার করা হয়। <ul> উপাদানটির একটি খোলা এবং বন্ধ করার ট্যাগ প্রয়োজন। তালিকার আইটেমগুলি হল উল উপাদানের <li> এলিমেন্ট চাইল্ড নোড। এইচটিএমএল ক্রমহীন তালিকা উপাদান (The HTML Unordered List element) সম্পর্কে বিস্তারিত নিচে দেওয়া হল।

Example:1

<!-- Example:1 -->
    <ul>
        <li>number</li>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <li>Alphabet</li>
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
    </ul>

Example:2

<!-- Example:2 -->
    <ul>
        <li>number</li>
        <ul>
            <li class="li2">1</li>
            <ul>
                <li>i</li>
                <li>ii</li>
                <li>iii</li>
            </ul>
            <li class="li2">2</li>
            <li class="li2">3</li>
        </ul>
        <li class="li1">Alphabet</li>
        <ul>
            <li class="li3">a</li>
            <ul>
                <li>i</li>
                <li>ii</li>
                <li>iii</li>
            </ul>
            <li class="li3">b</li>
            <li class="li3">c</li>
        </ul>
    </ul>

    <style>
        .li2 {
            list-style-type: square;
        }

        .li3 {
            list-style-type: circle;
        }
    </style>

Full Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML MASTER JHUTANDA</title>
    <!--https://jhutanda.com-->
    <!--https://github.com/jhutanda-->
</head>

<body>
    <h1>ul or Unordered List tag</h1>

    <!-- Example:1 -->
    <ul>
        <li>number</li>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <li>Alphabet</li>
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
    </ul>

    <!-- Example:2 -->
    <ul>
        <li>number</li>
        <ul>
            <li class="li2">1</li>
            <ul>
                <li>i</li>
                <li>ii</li>
                <li>iii</li>
            </ul>
            <li class="li2">2</li>
            <li class="li2">3</li>
        </ul>
        <li class="li1">Alphabet</li>
        <ul>
            <li class="li3">a</li>
            <ul>
                <li>i</li>
                <li>ii</li>
                <li>iii</li>
            </ul>
            <li class="li3">b</li>
            <li class="li3">c</li>
        </ul>
    </ul>

    <style>
        .li2 {
            list-style-type: square;
        }

        .li3 {
            list-style-type: circle;
        }
    </style>
</body>

</html>

Scroll to Top